Представьте себе красивый и высокий 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/

CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций.
#css
https://webformyself.com/4-novye-udivitelnye-css-funkcii-v-2022/

Мне одному кажется, что большую часть времени изучение новых возможностей CSS приводит к изучению не только принципа работы одного конкретного свойства, а набора свойств и того, как они работают вместе? А порой и изучения всей спецификации. Нет, я не жалуюсь: понятное дело, что свойства нужно рассматривать как часть экосистемы. Но признаюсь, я обожаю, когда новое CSS свойство появляется в браузерах, и его изучение не требует много сил, и все просто работает.
#css
https://webformyself.com/sootnoshenie-storon-eto-kruto/

Важным элементом веб-страницы, особенно лендинга является CTA (call to action) – призыв к действию. CTA часто сразу пишут на кнопках «Оформить заказ», «Перезвоните мне», «Заказать расчет стоимости» и т.д. И чем лучше сделана кнопка, чем красивее эффект по наведению на такую кнопку, тем выше вероятность, что ее нажмут посетители сайта.
#css
https://webformyself.com/effekt-navedeniya-na-knopku/

CSS селекторы позволяют выбирать элементы по типу, атрибутам и положению внутри HTML-документа. В этом уроке разберем три новые опции — :is(), :where() и :has().
#css
https://webformyself.com/kak-rabotayut-css-psevdoklassy-is-where-i-has/

CSS переменные или кастомные свойства представляют собой определенные пользователем значения, которые можно задать один раз, а использовать много раз по коду. С их помощью легче управлять цветами, шрифтами, размерами и анимацией, а также переменные позволяют добиться единообразия по всему приложению.
#css
https://webformyself.com/kak-ispolzovat-peremennye-v-css/