Копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время.
#css
https://webformyself.com/novaya-funkciya-css-image/

CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw.
#css
https://webformyself.com/css-clamp-dlya-adaptivnogo-dizajna/

Поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так?
#css
https://webformyself.com/nestandartnoe-myshlenie-s-css-grid/

Каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть.
#css
https://webformyself.com/sravnenie-i-obyasnenie-vsex-edinic-izmereniya-css/

Представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента.
#css
https://webformyself.com/kak-sozdat-umenshayushhijsya-pri-prokrutke-header-bez-javascript/

Поговорим о тенях в веб-дизайне. Тени добавляют текстуру, перспективу и подчеркивают размеры объектов. В веб-дизайне использование света и тени может добавить физического реализма и может использоваться для создания насыщенных тактильных интерфейсов.
#css
https://webformyself.com/detalno-razbiraemsya-s-tenyami-v-veb-dizajne/

CSS развивается с каждым годом. Сейчас прекрасное время для веб-разработчика, но может быть непросто оставаться в курсе последних функций. У CSS нет определенных версий, как у JavaScript. Итак, как узнать, какие есть последние функции?
#css
https://webformyself.com/novye-vozmozhnosti-css-v-2021-godu/

Одним из наиболее популярных иконочных шрифтов является набор иконок Font Awesome. Данный набор использовал, пожалуй, практически каждый веб-разработчик. Однако, многие используют лишь малую часть возможностей набора иконок Font Awesome.
#html #css #fontawesome
https://webformyself.com/animaciya-ikonok-font-awesome-i-drugie-vozmozhnosti/

Имея дело со сложной анимацией CSS, есть тенденция создавать экспансивные keyframes с большим количеством объявлений. Однако есть пара приемов, о которых я хочу поговорить, они могут помочь упростить задачу, оставаясь при этом ванильным CSS.
#css
https://webformyself.com/rasshirennaya-animaciya-css-s-ispolzovaniem-cubic-bezier/

Одной из интересных возможностей в CSS является CSS Shapes. Используя возможности CSS Shapes, можно гибко управлять обтеканием текстом различных геометрических фигур и изображений. Соответственно, данная возможность позволит создавать интересные макеты для ваших веб-страниц.
#css
https://webformyself.com/css-shape-outside/

В одном из предыдущих уроков вы могли увидеть реализацию модального окна с помощью HTML тега details. В данном уроке вы познакомитесь с еще одним вариантом реализации компонента модального окна и для этого будет использован псевдокласс target
#css
https://webformyself.com/psevdoklass-target-dlya-modalnogo-okna/

Одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и сделает ваши чекбоксы стильными, предложив более десяти вариантов самых разных оформлений.
#css
https://webformyself.com/biblioteka-moretoggles-dlya-checkbox/

В данном уроке вы познакомитесь с функцией CSS attr(), которая позволяет получить значение атрибута выбранного элемента и использовать это значение в таблице стилей. В качестве примера практического применения данной возможности будет показана реализация всплывающей подсказки tooltip без JS.
#css
https://webformyself.com/funkciya-css-attr-i-tooltip-bez-js/

Полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений.
#css
https://webformyself.com/psevdoelementy-before-i-after-v-css/

В этом уроке вы познакомитесь с отличным сервисом IcoMoon, который предлагает огромное количество шрифтовых иконок. Думаю, все вы в своих проектах использовали иконочные шрифты, например, наиболее известный – Font Awesome. Сервис IcoMoon предлагает не менее качественные шрифтовые иконки и в большом количестве.
#css
https://webformyself.com/ikonki-servisa-icomoon/

В данном уроке будет показана реализация красивой ленты (ribbon) на CSS. Чаще всего подобные ленты можно видеть, к примеру, на карточках товара, но также ее можно использовать при желании и для других элементов сайта. В уроке вы найдете реализацию такой ленты на CSS без использования дополнительных изображений.
#css
https://webformyself.com/krasivaya-lenta-ribbon-na-css/

CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта.
#css
https://webformyself.com/6-kreativnyx-idej-css-hover-effekta-dlya-ssylok/

При работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье.
#flexbox #css
https://webformyself.com/dinamicheskij-razdelitel-strok-cherez-flexbox/