Математические функции в CSS
В CSS есть математические функции, их всего четыре:
min(),max(),clamp()иcalc().Математика в каком-то виде есть и в препроцессорах, например, в SCSS есть
min(),max()иclamp(), в Less —min()иmax(), но есть пара существенных отличий. Во-первых, в препроцессорах всё рассчитывается один раз при компиляции, и в итоговом файле всегда будут фиксированные значения. А во-вторых, в препроцессорных функциях нельзя сочетать разные единицы измерения.Адаптивное видео с помощью встроенных математических функций CSS
Когда я в твиттере спросила для чего могут быть нужны в CSS типизированные значения атрибутов, Вадим Макеев предположил, что это было бы очень удобно для адаптивных картинок.
Но я подумала, что картинки как-то умеют при ресайзе изменять высоту, сохраняя пропорции, а вот фреймы — совсем нет. При этом на адаптивных сайтах важно иметь возможность подгонять под ширину окна любой контент, и видео тоже. Что тут можно сделать?
Недоступность в картинках
Когда мы говорим про доступность, мне часто не хватает визуальной составляющей. «Недоступно для скринридера» — как это выглядит?
Когда есть возможность запустить программу экранного доступа и увидеть всё своими глазами, это достаточно освежающий опыт, после которого начинаешь гораздо аккуратнее выбирать теги. Мне хотелось бы, чтобы это попробовал каждый, кто имеет дело с вёрсткой, но я подозреваю, что, хотя многие слышали о доступности и скринридерах, запускать читалку пробовали далеко не все — потому что надо не только найти где включается скринридер, но и разобраться в непривычном и достаточно неинтуитивном интерфейсе.
Единицы размеров в CSS
В CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например,
degиturn, единицы времени —sиms, единицы плотности экрана — например,dpiиdppxи другие.Здесь будут рассматриваться только единицы размеров, которыми мы пользуемся чаще всего. Подробное описание можно найти в спецификации W3C Distance Units: the <length> type.
Генератор цветовых тем
В конце марта я выпустила инструмент для генерации цветовых тем из CSS/SCSS/Less-переменных — Tema. Он может быть полезен для карманных проектов без фиксированного дизайна, когда цвета подбираются прямо в процессе разработки. Я немного расскажу про историю появления и покажу как его можно использовать.
Jekyll → Gatsby
Вариативные шрифты
Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8.
Размеры в SVG
Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
Адаптивный Pixel Perfect
Начну издалека. Не так давно я присоединилась к HTML Академии в качестве наставника. Помимо того, что наставничество помогает упорядочить свои знания, оно удивительным образом стимулирует разработку разных полезных штук, потому что в процессе появляются интересные задачи, решение которых можно удобно автоматизировать.
Логотип не отвечает или временно недоступен
Заинтересовалась вопросом: как лучше всего верстать логотипы на сайте? Как правильно и почему? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков?
SVG-паттерны
pattern— это элемент, который можно использовать в качеcтве заливки или обводки. Содержимое паттерна может быть самым разным: фигуры, символы, текст или растровые изображения — в любых сочетаниях.Мыльные пузыри на SVG
Честно говоря, пузыри у меня получились почти случайно, когда мне потребовалось как следует изучить градиенты и я экспериментировала с их возможностями. И я сама до сих пор не очень понимаю, как так получилось, используя только SVG — векторный формат, — сделать такой невесомый мыльный пузырь.
SVG-градиенты
В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы
linearGradientиradialGradient— линейный и радиальный градиенты соответственно.Весёлая консолька
Недавно мне пришлось отлаживать очень капризный скрипт, в котором, по ощущениям, происходили какие-то паранормальные явления. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации.
SVG-маски
SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это clip-path и mask. Clip-path для обрезки использует только контуры фигур, игнорируя заливки и обводки, с масками всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого.
Умная прокрутка со Scroll Snap Points
В Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента.
CSS-анимации для ротации изображений
В процессе экспериментов с анимированными SVG-масками, мне пришлось как следует разобраться с алгоритмами CSS-анимаций.
Анимированные SVG-маски
В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.
Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.
Странности обводки в SVG
Экспериментируя с SVG можно обнаружить много странных моментов. Получить странное при манипуляциях с масштабированием ещё как-то ожидаемо, но внезапно сюрпризы преподнесло свойство
stroke-width.SVG-прелоадеры
В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG.
Получилось здорово, хотя результат пока не сильно подходит для использования в реальной жизни.
Анимируем градиенты ещё раз
Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и
opacity.Background-blend-mode
На этой неделе в Firefox 30 было включено по умолчанию свойство
background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.Возможности оформления SVG
Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.
Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей.
CSS и SVG маски
Есть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст.
Nth-child и nth-of-type
:nth-child— один из моих самых любимых селекторов, потому что с помощью него можноделать клевые разноцветные штукисобирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.SVG-иконки
Адаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.
SVG: заливка и обводка
В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.
SVG-path
path— более сложный вариант линии. С его помощью можно нарисоватьline,polyline,polygon,circleиrect:В отличие от
polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.SVG: группировка и переиспользование элементов
SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов:
gdefsиsymbol. Элементы, группы элементов и символы можно использовать повторно.SVG-фигуры и трансформации
Писать SVG руками довольно просто. Используем фигуры:
rect,polygon,circle,ellipse, а такжеline,polylineиpath. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.SVG
SVG — это формат векторных изображений, основанный на XML.
Спецификация: w3.org/TR/SVG
SVG имеет массу преимуществ перед растровыми изображениями:
СSS-градиенты и 3D
Сочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно.
Рисовалка анимированных теней
В процессе изучения JS решила написать рисовалку CSS-анимаций на основе
box-shadow. Получила море удовольствия и узнала много нового.Свежие CSS-паттерны
Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых. Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.
CSS-паттерны
Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.
Радиальные градиенты
Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.
Спецификация: w3.org/TR/css3-images/#radial-gradients.
Линейные градиенты
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.
Спецификация: w3.org/TR/css3-images/#gradients.
Border-image
Border-image— свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.Спецификация: w3.org/TR/css3-background/#border-images.
Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.
Электронные часы на CSS и JS.
С познавательно-развлекательной целью сделала электронные часы.
Показывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера.
Сколько весят селекторы?
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
Символы юникода
Заинтересовалась юникодом, захотела посмотреть какие символы в нем есть, и как-то сама собой получилась страница, на которой можно увидеть большинство символов юникода: yoksel.github.io/unicode-table.
Свойство content
С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов
:beforeи:after, но не менее важную роль в этом играет свойствоcontent.Текстовые эффекты
В посте представлены некоторые эффекты на основе
text-shadow.text-shadow— это свойство, описывающее тень, отбрасываемую текстом.Древовидный список на CSS
Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.
Css-селекторы
В CSS есть достаточно способов обратиться к нужным элементам.
В каждой новой спецификацией CSS добавлялось что-то новое, и теперь у нас есть много самых разных селекторов.Контекст наложения
Если с помощью
z-indexизменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.Box-sizing
Свойство
box-sizingпозволяет указать как ведут себя размеры блока при наличии рамок и полей. Применяются к элементам, у которых заданы размеры.Два способа "прошить" элемент по краю
Есть два способа сделать эффект, как будто элемент прострочили на швейной машинке: используя псевдоэлементы и с помощью
outline.Цвета в CSS
Мне нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.
Спецификация тут: w3.org/TR/css3-color/.
Итак, способы:
Фон под строчками: добавляем поля
Проблема: если задать фон строчным элементам, получается вот так
Box-shadow
Свойство
box-shadowпозволяет добавить элементам одну или несколько теней.Css-фигуры: лепесток
Из одного
divс помощьюborder-radiusлегко можно сделать лепесток:3D-куб
Мне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про трансформы и про анимации).
Css Animation
Свойство animationпозволяет анимировать элементы страницы.Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Transform
CSS-свойство transformпозволяет трансформировать элементы, в том числе в трехмерном пространстве.Border-radius
Border-radius — это свойство, добавляющее элементам скругление углов.
Скругление можно задать для всего элемента сразу:
border-radius: 10px;или разным углам поотдельности, например:
border-top-left-radius: 25px; border-top-right-radius: 50%;Возможные значения: числа или проценты.
First letter
:first-letter— это псевдоэлемент, представляющий первый символ в тексте.Работает только для блочных элементов.
К
:first-letterприменяется ограниченное количество свойств:CSS-фигуры
Фигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами.
Стрелки с помощью свойства border
С помощью
borderможно легко делать стрелочки разного размера и в разных направлениях.Чтобы понять общий принцип, возьмем див нулевого размера, сделаем ему толстую рамку и раскрасим её в разные цвета:
Flexbox
Flexbox — это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.