10 (Още) CSS трикове, които вероятно сте пропуснали

Има много CSS фрагменти, които уеб разработчиците могат да използват, за да постигнат определени резултати, и след това има CSS трикове, които можете да използвате за неща като вертикалното подреждане на съдържание. С CSS е постоянно развиващ се обект, отново и отново ние се натъкваме на страхотни CSS трикове, които са забавни за познаване.

В днешния пост ви представям Още 10 атрибута на CSS и трикове, които може да не знаете.

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

Нарича се CSS атрибут писането режим която приема една от тези три стойности; хоризонтална-TB, вертикално-RL и вертикално-LR.

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

Най- vertical- * стойностите обаче са за вертикален блок, което води до записване на текста отгоре надолу от браузърите. в вертикално-RL, добавят се нови редове отляво на предишните и обратно вертикално-LR.

Това е полезно за показва езици като китайски и японски които обикновено се пишат отгоре надолу, а също и когато искате да показвате текст вертикално, за да запазите хоризонтално пространство, като в заглавията на таблиците.

Забележка: Ако искате да контролирате посоките на отделните букви, можете да използвате ориентацията на текста, като ги завъртите изправени или странично, по желание.

 -режим на писане на webkit: вертикален-rl; -ms-режим на писане: tb-rl; режим на писане: вертикален-rl; 

2. Повторно използване на цветната стойност

Ключовата дума currentColor носи стойността на цвят атрибут и може да се използва в други атрибути, които приемат цветови стойности като заден план.

div фон: линеен градиент (90deg, currentColor 50%, черен 50%);… цвят: # FFD700; / * currentColor е # FFD700 * / 

3. Смесете фоновете

Елементът може да има повече от един фон (цвят на фона и множество фонови изображения). Най- фон-смес режим смесва всички от тях по зададения режим на смесване. В момента има общо 16 режима на смесване.

режим фон-смес: разлика; 

4. Смесете елементи

mix-blend-mode смесва съдържанието и фона на припокриващите се елементи. Изглежда, че Chrome не поддържа всички режими, въпреки че Firefox работи.

режим микс-смес: цвят; 

Взех два елемента, един IMG показвайки образа на роза и педя с графичен фон, подредили ги и приложили няколко режима на смесване.

5. Игнорирайте събития с указатели

Можете да направите елемент, забравящ всяко събитие с указател, като използвате един атрибут, наречен показалеца-събития. Давайки показалеца-събития стойността на нито един в елемент, това не позволява да бъде цел за показване на събития. Поддържа се IE11 + поддръжка.

В следващата демонстрация има квадратче под две изображения, подредени един над друг. И двете изображения носят събития с показалеца: няма, позволявайки ни да щракнем върху квадратчето, затворено под тях. Въз основа на провереното състояние на квадратчето за отметка, желаното изображение се показва, докато другото се скрива.

6. Украсете разделените кутии

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

Сега, за да проследим това с примера и рано напомняне за "Коледа в хоризонта", ето списък на всички елени на Дядо Коледа, които са написани в един педя! Хо! Хо! Хо!

Забележка: Въпреки че модерната IE поддържа кутия-декорация-пауза, на ръба на границата с разделителната част, рендирането не е гладко и фонът изглежда нарязан. Но това се прави кутия сянка добре, затова използвах сенки за кутии за граница и фон. Има и липса на хоризонтална подложка в ръбовете в IE, която може да искате да запълните с интервали.

7. Свиване на елементите на таблицата

видимост: колапс е атрибут, създаден само за елементите на таблицата, като редове и колони. Ако се използва за нещо друго, ще се държи така видимост: скрита. Chrome обаче я третира като скрит дори за таблични елементи.

Когато зададете видимост: колапс на елемент на таблица, той е скрит и неговото пространство е запълнено от близкото съдържание - например как ще се държи при използване дисплей: няма вместо.

Но за разлика дисплей: няма който променя оформлението на таблицата след премахване на пространството, оформлението остава същото в видимост: колапс. Тук можете да видите по-подробно как работи.

8. Създайте колони

Можете да създадете оформление на колона за съдържанието си, като използвате колони атрибут. Тя ви позволява да укажете колко колони (колона броене) и как всяка ширина на колоната (колона ширина) трябва да бъдат изобразени в елемент.

Ако съдържанието е различно от текста, като например изображение, тогава трябва да имате предвид неговата ширина, съответстваща на колоната. За следващия пример използвах само колона броене , за да определите колко колони искам.

-брой на webkit-колона: 2; -moz-колона-брой: 2; броя на колоните: 2; 

9. Направете елементи за преоразмеряване

Елемент може да се направи преоразмерителен (вертикално, хоризонтално или и двете) с атрибута CSS3 преоразмеряване . Възможност за преоразмеряване в a текстово поле може да се деактивира, използвайки същото.

преоразмеряване: вертикално; преоразмеряване: хоризонтално; преоразмеряване: и двете; преоразмеряване: няма; 

10. Създайте шаблони

Може да има множество CSS3 градиенти (както линейни, така и радиални) за един елемент и те могат да бъдат натрупани един върху друг, за да се създадат модели. Това ни позволява създайте хубави фонове за елементи, без да използвате външни изображения. За да работи това, може да се изисква малко практика.