IT

11 секретов CSS


Автор: Colibri IT-инновации Дата публикации: 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 свойств.






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

Спецвыпуск. Футбольная эстафета
Digital-полиция

Спецвыпуск. Футбольная эстафета

Не так давно прошел финал Чемпионата мира по футболу – 2018 в России. Перед полуфинальными матчами мы запустили флэш-моб и заодно увидели, насколько бренды готовы к ситуативному маркетингу.


22.08.2018

14 лучших наборов бесплатных иконок
Дизайн

14 лучших наборов бесплатных иконок

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


28.04.2020

Перестаньте оценивать эффективность маркетинга по этим показателям
Маркетинг

Перестаньте оценивать эффективность маркетинга по этим показателям

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


07.01.2019

Иностранные бренды, которые креативно адаптировались к коронавирусу
Менеджмент

Иностранные бренды, которые креативно адаптировались к коронавирусу

7 антикризисных кампаний от брендов, креативно сохранивших прибыль


23.04.2020

Выбор редакции