IT

11 секретов CSS


Автор: Livo Дата публикации: 22.05.2020

Даже если вы знакомы с CSS и уже строите красивые макеты, эти секреты  помогут вам открыть для себя его новые свойства и функции.

01. Text-stroke

Мы знакомы с контурной обводкой текста из Adobe Illustrator или векторных рисунков. Тот же самый эффект можно применить и в CSS, используя свойство text-stroke.



02. ::first-letter

Примените стиль к самой первой букве элемента блока. Благодаря этому мы можем представить знакомые нам эффекты из печатных и бумажных журналов.



03. Gradient text

А это способ применить градиент к нашему тексту без каких-либо сложных методов.



04. Line-clamp 

Line-clamp разбивает текст на определенное количество строк. Вот, как это работает.



05. Column-count

Благодаря свойству column-count браузер равномерно распределяет содержимое в указанном количестве столбцов.



06. Character unit

Мы можем ограничить ширину или высоту нашего текста в зависимости от символьной единицы.



07. Word break tag

А этот HTML-тег даёт возможность разрыва слова – позицию, где браузер может разбить текст и перенести его на следующую строку. Это необходимо, когда слово довольно длинное, и мы боимся, что браузер разобьёт его в неправильном месте.



08. Object fit

Это свойство используется для указания способа изменения размера изображения или видео в соответствии с его контейнером. Оно указывает содержимому заполнять контейнер различными способами: заполнить, сохранить, растянуть и уменьшить.



09. Conic-gradient

Если вы задумывались, можете ли вы создать круговую диаграмму только с использованием CSS, то с помощью этого свойства – возможно.



10. Counters

Чтобы стилизовать числа в нумерованном списке, нам нужно использовать счетчики CSS. Они позволяют настраивать внешний вид содержимого в зависимости от его расположения в документе.





11. @support

Всякий раз, когда вы хотите использовать свойство CSS, поддерживаемое не всеми браузерами, есть запрос функции – @support. Он позволяет проверить поддержку браузером определенных CSS свойств.






Вам также может понравиться

12 феноменально реалистичных рисунков карандашом
Дизайн

12 феноменально реалистичных рисунков карандашом

Эти потрясающе реалистичные изображения нарисованы карандашом. Получите вдохновение для своего творчества.


30.09.2019

Соседи, почём интернет?
IT

Соседи, почём интернет?

Какая цена за 1 ГБ мобильного трафика в Таджикистане и соседних странах?


07.03.2019

10 сайтов, которые красиво используют минимализм
Дизайн

10 сайтов, которые красиво используют минимализм

Creative Blog собрал лучшие минималистские сайты, чтобы вдохновить вас на большее, делая меньше.


17.09.2019

Android разработчик
Вакансии

Android разработчик

Android разработчик — это специалист, который занимается cозданием, обновлением, усовершенствованием мобильных приложений на операционной системе Android.


27.01.2022