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 свойств.






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

5 ярких цветовых трендов в 2021 года
Дизайн

5 ярких цветовых трендов в 2021 года

Прогноз цветовых палитр, которые будут популярны в 2021 году


18.12.2020

Что такое лиды и как их генерировать в Facebook?
Маркетинг

Что такое лиды и как их генерировать в Facebook?

Интернет-маркетологу должен не только красиво продвигать бренд, но и показывать результат. Например, в виде лидов. Что это такое и как их получить через Facebook – рассмотрим в статье.


11.11.2019

Выпуск №5. Надо, надо подкачаться
Digital-полиция

Выпуск №5. Надо, надо подкачаться

До лета осталось совсем немного времени. Пора готовить к нему свое тело! Заодно посмотрим, веб-сайты каких фитнес-залов готовы к сезону лучше всего.


05.01.2019

Советы по презентации своих работ в социальных сетях.
Маркетинг

Советы по презентации своих работ в социальных сетях.

Измените подход к работе, чтобы привлечь онлайн-аудиторию.


12.01.2021

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