Копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время.
#css
https://webformyself.com/novaya-funkciya-css-image/
#css
https://webformyself.com/novaya-funkciya-css-image/
Webformyself
Новая функция CSS image
Для чего нужна новая функция CSS image? Загрузка и обрезка изображений. Поддержка браузерами
CSS clamp() предоставляет метод для установки числовых значений с минимальным, максимальным и рассчитанным значением между ними. Синтаксис такой, calc([min], [calculated], [max]). Функция полезна в тех случаях, когда вы хотите масштабировать какое-либо значение в зависимости от размера экрана с помощью единицы длины vw.
#css
https://webformyself.com/css-clamp-dlya-adaptivnogo-dizajna/
#css
https://webformyself.com/css-clamp-dlya-adaptivnogo-dizajna/
Webformyself
CSS clamp() для адаптивного дизайна
Как сделать сайт адаптивным с помощью CSS clamp(). Как работает. Масштабируем размеры
Поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так?
#css
https://webformyself.com/nestandartnoe-myshlenie-s-css-grid/
#css
https://webformyself.com/nestandartnoe-myshlenie-s-css-grid/
Webformyself
Нестандартное мышление с CSS Grid
Необычный дизайн макета не из блоков с помощью с CSS Grid. Пошаговая инструкция настройки изображения
Каскадные таблицы стилей или CSS, как их обычно называют, составляют основу современной сети. Как HTML отвечает за структуру, а JavaScript — за интерактивные функции, CSS обрабатывает все стили, делая веб-сайт таким великолепным, как он есть.
#css
https://webformyself.com/sravnenie-i-obyasnenie-vsex-edinic-izmereniya-css/
#css
https://webformyself.com/sravnenie-i-obyasnenie-vsex-edinic-izmereniya-css/
Webformyself
Сравнение и объяснение всех единиц измерения CSS
Сравнительный анализ всех единиц измерения CSS: vh, em, rem, vw, px. Абсолютные и относительные. Советы по синтаксису
Представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента.
#css
https://webformyself.com/kak-sozdat-umenshayushhijsya-pri-prokrutke-header-bez-javascript/
#css
https://webformyself.com/kak-sozdat-umenshayushhijsya-pri-prokrutke-header-bez-javascript/
Webformyself
Как создать уменьшающийся при прокрутке Header без JavaScript
При прокрутке Header уменьшается: как это сделать без Javascript. Выставляем отрицательную величину top
Поговорим о тенях в веб-дизайне. Тени добавляют текстуру, перспективу и подчеркивают размеры объектов. В веб-дизайне использование света и тени может добавить физического реализма и может использоваться для создания насыщенных тактильных интерфейсов.
#css
https://webformyself.com/detalno-razbiraemsya-s-tenyami-v-veb-dizajne/
#css
https://webformyself.com/detalno-razbiraemsya-s-tenyami-v-veb-dizajne/
Webformyself
Детально разбираемся с тенями в веб-дизайне
Как работать с тенями в веб-дизайне: теория и практика. Источники света и объекты. CSS и влияние на производительность
CSS развивается с каждым годом. Сейчас прекрасное время для веб-разработчика, но может быть непросто оставаться в курсе последних функций. У CSS нет определенных версий, как у JavaScript. Итак, как узнать, какие есть последние функции?
#css
https://webformyself.com/novye-vozmozhnosti-css-v-2021-godu/
#css
https://webformyself.com/novye-vozmozhnosti-css-v-2021-godu/
Webformyself
Новые возможности CSS в 2021 году
Новые возможности: обзор последних основных функций CSS, которые можно использовать в браузерах и их использование. Конический градиент, соотношение сторон
Одним из наиболее популярных иконочных шрифтов является набор иконок Font Awesome. Данный набор использовал, пожалуй, практически каждый веб-разработчик. Однако, многие используют лишь малую часть возможностей набора иконок Font Awesome.
#html #css #fontawesome
https://webformyself.com/animaciya-ikonok-font-awesome-i-drugie-vozmozhnosti/
#html #css #fontawesome
https://webformyself.com/animaciya-ikonok-font-awesome-i-drugie-vozmozhnosti/
Webformyself
Анимация иконок Font Awesome и другие возможности
В этом уроке будет показана анимация иконок Font Awesome, а также другие возможности по работе с иконками
Имея дело со сложной анимацией CSS, есть тенденция создавать экспансивные keyframes с большим количеством объявлений. Однако есть пара приемов, о которых я хочу поговорить, они могут помочь упростить задачу, оставаясь при этом ванильным CSS.
#css
https://webformyself.com/rasshirennaya-animaciya-css-s-ispolzovaniem-cubic-bezier/
#css
https://webformyself.com/rasshirennaya-animaciya-css-s-ispolzovaniem-cubic-bezier/
Webformyself
Расширенная анимация CSS с использованием cubic-bezier()
Как создать необычную анимацию с функцией с функцией CSS cubic-bezier и знанием математики. Примеры кода и графиков
Одной из интересных возможностей в CSS является CSS Shapes. Используя возможности CSS Shapes, можно гибко управлять обтеканием текстом различных геометрических фигур и изображений. Соответственно, данная возможность позволит создавать интересные макеты для ваших веб-страниц.
#css
https://webformyself.com/css-shape-outside/
#css
https://webformyself.com/css-shape-outside/
Webformyself
CSS Shape Outside
Одной из интересных возможностей в CSS является CSS Shapes. Используя возможности CSS Shapes, можно гибко управлять обтеканием текстом различных геометрических фигур и изображений
В одном из предыдущих уроков вы могли увидеть реализацию модального окна с помощью HTML тега details. В данном уроке вы познакомитесь с еще одним вариантом реализации компонента модального окна и для этого будет использован псевдокласс target
#css
https://webformyself.com/psevdoklass-target-dlya-modalnogo-okna/
#css
https://webformyself.com/psevdoklass-target-dlya-modalnogo-okna/
Webformyself
Псевдокласс target для модального окна
В данном уроке вы познакомитесь с еще одним вариантом реализации компонента модального окна и для этого будет использован псевдокласс target
Одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и сделает ваши чекбоксы стильными, предложив более десяти вариантов самых разных оформлений.
#css
https://webformyself.com/biblioteka-moretoggles-dlya-checkbox/
#css
https://webformyself.com/biblioteka-moretoggles-dlya-checkbox/
Webformyself
Библиотека MoreToggles для Checkbox
В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css. Библиотека использует только CSS и сделает ваши чекбоксы стильными
В данном уроке вы познакомитесь с функцией CSS attr(), которая позволяет получить значение атрибута выбранного элемента и использовать это значение в таблице стилей. В качестве примера практического применения данной возможности будет показана реализация всплывающей подсказки tooltip без JS.
#css
https://webformyself.com/funkciya-css-attr-i-tooltip-bez-js/
#css
https://webformyself.com/funkciya-css-attr-i-tooltip-bez-js/
Webformyself
Функция CSS attr и tooltip без JS
В данном уроке вы познакомитесь с функцией CSS attr(). В уроке будет показана реализация всплывающей подсказки tooltip без JS
Полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений.
#css
https://webformyself.com/psevdoelementy-before-i-after-v-css/
#css
https://webformyself.com/psevdoelementy-before-i-after-v-css/
Webformyself
Псевдоэлементы before и after в CSS
В уроке показан вариант использования псевдоэлементов before и after, который можно применить для «битых» изображений