10 (више) ЦСС трикова које сте вероватно превидели

Постоји много ЦСС исјечака које веб програмери могу користити за постизање одређених резултата, а затим постоје ЦСС трикови које можете користити за ствари као што је поравнавање садржаја вертикално. Са ЦСС-ом као ентитетом који се стално развија, поново и поново се спотакнемо о цоол ЦСС трикове које је забавно знати.

У данашњем посту, представљам вам Још 10 ЦСС атрибута и трикова које можда не знате.

1. Напишите вертикално

Позван је ЦСС атрибут мод писања који прихвата једну од ове три вредности; хоризонтал-тб, вертицал-рл и вертицал-лр.

хоризонтал-тб је подразумевана и изазива типичан хоризонтални текстуални ток текста са лева на десно.

Тхе вертикала-* вредности су међутим за вертикални блок проток, што узрокује да се текст пише од врха до дна од стране претраживача. Ин вертицал-рл, нове линије се додају лево од претходних и обрнуто за вертицал-лр.

Ово је корисно за приказује језике као што су кинески и јапански које се обично пишу од врха до дна и такође када желите да прикажете текст вертикално да бисте сачували хоризонтални простор, као у заглављима табеле.

Белешка: Ако желите да контролишете упутства појединачних слова, можете користити оријентацију текста окрећући их усправно или бочно, по жељи.

 -вебкит-писање-мод: вертикални-рл; -мс-моде-писања: тб-рл; мод писања: вертикално-рл; 

2. Поново употребите вредност боје

Кључна реч цуррентЦолор носи вредност цолор атрибут и може се користити у другим атрибутима који прихватају вредности боја позадини.

див бацкгроунд: линеар-градиент (90дег, цуррентЦолор 50%, блацк 50%);… цолор: # ФФД700; / * цуррентЦолор је # ФФД700 * / 

3. Бленд Бацкгроундс

Елемент може имати више од једне позадине (боја позадине и више позадинских слика). Тхе бацкгроунд-бленд-моде комбинује их све у складу са датим режимом мешања. Тренутно постоји укупно 16 начина мијешања.

бацкгроунд-бленд-моде: разлика; 

4. Бленд Елементс

мик-бленд-моде спаја садржај и позадину елемената који се преклапају. Чини се да Цхроме не подржава све режиме иако Фирефок ради.

мик-бленд-моде: боја; 

Узео сам два елемента, један имг приказује слику руже и спан са графичком позадином, слажући их и примењујући неколико мик-бленд-модова.

5. Игноришите Поинтер догађаје

Можете направити елемент који није свјестан било којег догађаја показивача помоћу једног атрибута који се зове поинтер-догађаји. Давањем поинтер-догађаји вредност ниједан у елементу, то спречава да буде мета за показивање догађаја. ИЕ11 + подршка укључена.

У следећој демо верзији, испод две слике постављене су једна изнад друге. Обје слике носе поинтер-догађаји: нема, дозвољавајући нам да кликнемо на поље за потврду покопано испод њих. На основу провереног поља за потврду, жељена слика се приказује док је друга скривена.

6. Украсите подељене кутије

Обично када је кутија подељена (као када је уметнути елемент сведок прелома линије), ивице дељених делова су лишене икаквих стилова и изгледају нарезане. Да бисте то избегли, можете користити бок-децоратион-бреак: клон.

Сада, да бих то пратио са примером и раним подсетником "Божић у хоризонту", ево листе Санта'с Реиндеер које су све уписали у једном спан! Хо! Хо! Хо!

Белешка: Иако модерни ИЕ не подржава бок-децоратион-бреак, на ивици границе дељеног дела, рендеровање није глатко и позадина изгледа исечено. Али чини се бок-схадов Лепо, због чега сам користио сенке за кутије и за границе и за позадину. Ту је и одсуство хоризонталних падова у ивицама ИЕ које можда желите да попуните размацима.

7. Сажми елементе табеле

видљивост: колапс је атрибут креиран само за елементе табеле, као што су редови и колоне. Ако се користи на било шта друго, понашат ће се као видљивост: скривена. Цхроме ипак третира сакривен чак и за елементе стола.

Када доделите видљивост: колапс на елементу табеле, он је скривен и његов простор је попуњен оближњим садржајем - као што би се понашао у коришћењу дисплаи: ноне уместо тога.

Али за разлику од дисплаи: ноне која модификује изглед табеле након уклањања простора, распоред остаје исти у видљивост: колапс. Овде можете видети како то ради.

8. Направите колоне

Можете креирати изглед колоне за ваш садржај користећи ступаца аттрибуте. Омогућава вам да одредите колико колона (цоунт-цолумн) и како свака ширина колоне (Ширина колона) треба приказати у елементу.

Ако је садржај другачији од текста, као што је на пример слика, мораћете да имате на уму његову ширину која је одговарајућа колони. За следећи пример сам само користио цоунт-цолумн да одредите колико колона желим.

-вебкит-цолумн-цоунт: 2; -моз-цолумн-цоунт: 2; број колона: 2; 

9. Маке Елементс Ресизеабле

Елемент може да се подеси на величину (вертикално, хоризонтално или обоје) са атрибутом ЦСС3 промените величину . Могућност промене величине у а тектареа може бити онемогућен употребом истог.

ресизе: вертицал; ресизе: хоризонтал; ресизе: ботх; ресизе: ноне; 

10. Креирајте обрасце

Може постојати више ЦСС3 градијента (линеарних и радијалних) за један елемент и могу се сложити један на други да би се створили обрасци. То нам омогућава креирајте лепе позадине за елементе без употребе спољашњих слика. Учинити то може захтевати мало праксе.