Какие функции существуют и для чего они могут быть полезны
Как можно при ресайзе подогнать видео по высоте без дополнительных обёрток и JS?
Как скринридеры видят сайты и что они могут там не найти, если страница свёрстана плохо
Абсолютные и относительные единицы измерения в CSS: от пикселей до единиц вьюпорта
Инструмент расширяет палитры из CSS/SCSS/Less-переменных и может быть полезен для карманных проектов без фиксированного дизайна. Я немного расскажу про историю появления и покажу как его можно использовать.
На днях сайт обновил движок. Последний раз это случалось в 2013-м, и тогда сайт переехал с Wordpress на Jekyll, сейчас — с Jekyll на Gatsby. Мои вопросы про Gatsby вызвали довольно оживленную дискуссию в твиттере, поэтому я решила отдельно рассказать про смену движка и опыт с Gatsby.
Вариативные шрифты — это новая страница в веб-типографике. Они уже достаточно хорошо поддерживаются браузерами, так что можно заняться изучением их возможностей и подготовиться к использованию в реальной жизни.
Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
Инструмент для проверки адаптивных страниц на соответствие макетам
Как лучше всего верстать логотипы на сайте? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков?
pattern — это элемент, который можно использовать в качеcтве заливки или обводки. Содержимое паттерна может быть самым разным: фигуры, символы, текст или растровые изображения — в любых сочетаниях.
Пузыри у меня получились почти случайно, когда я экспериментировала с SVG-градиентами.
В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции. Для градиентов это элементы linearGradient и radialGradient — линейный и радиальный градиенты соответственно.
Недавно мне пришлось отлаживать капризный скрипт, в котором явно происходило что-то паранормальное. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации. Содержимое консоли превратилось в бесконечную колбасу однообразного текста, и с этим надо было что-то делать.
SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это clip-path и mask. Clip-path для обрезки использует только контуры фигур, с масками всё интереснее: в них учитываются и заливки, и обводки, и яркость содержимого.
В Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента.
В процессе создания демо с анимированными SVG-масками, мне пришлось как следует разобраться с алгоритмами CSS-анимаций. В таких демо используется две анимации: одна для маски, другая для последовательного показа изображений. Меня интересовали варианты алгоритмов для второй анимации.
В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски. Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.
Веселые приключения SVG-свойства stroke-width, а также несколько странный способ сделать кроссбраузерную анимацию масок.
В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG. Такие прелоадеры могут быть использованы на любом фоне. Элементы в них могут менять не только прозрачность, но и цвет, обводку или положение в пространстве. Можно придумать огромное количество разных вариантов оформления и анимации.
Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и opacity.
Режимы смешивания в Firefox 30 или новые приключения CSS-градиентов.
Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS. Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей
Есть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст. Используемые технологии — CSS, SVG + CSS, чистый SVG.
Nth-child — один из моих самых любимых селекторов, потому что с помощью него можно собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.
SVG-графику удобно использовать для иконок, при этом они не будут выглядеть мыльными на устройствах с ретиной и их можно растягивать без потери качества.
В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS. Например, можно нарисовать SVG-паттерн и использовать его не только в заливке, но и в обводке. Заливке и обводке можно указывать разную прозрачность, также можно управлять пунктирной обводкой, на чем можно построить интересные анимированные эффекты.
Path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect. В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.
SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.
Писать SVG довольно просто. Используются фигуры: rect, polygon, circle, ellipse, а также line, polyline и path.
SVG — это формат векторных изображений, основанный на XML. Имеет массу преимуществ перед растровыми изображениями: весит меньше, тянется без потери качества, а так же SVG-картинку можно не только нарисовать, но и написать её код руками
Сочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно.
Редактор позволяет рисовать разноцветные анимированные узоры из клеточек. Можно управлять скоростью анимации, размером поля, количеством клеточек и кадров.
Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых. Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.
Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.
Радиальные градиенты работают иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.
Довольно странный вариант игры, мне хотелось понять как ещё можно сымитировать игровую логику.
Border-image — свойство, которое задает фоновое изображение для рамки элемента. Оно позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.
С познавательно-развлекательной целью сделала электронные часы. Показывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера.
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
Полезные символы юникода с кодами для использования в Html и Css.
С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content. Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content.
Как анимировать градиенты если очень нужно.
CSS-эффекты на основе text-shadow.
Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.
Продолжение справочника по селекторам.
Справочник по селекторам.
Если с помощью z-index изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.
Есть два способа сделать эффект, как будто элемент прострочили на швейной машинке — используя псевдоэлементы и с помощью outline.
Свойство box-sizing позволяет указать как ведут себя размеры блока при наличии рамок и полей.
Мне нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.
Проблема: если задать фон строчным элементам, получается вот так...
Свойство box-shadow позволяет добавить элементам одну или несколько теней.
Из одного div с помощью border-radius легко можно сделать лепесток.
CSS-свойство позволяет трансформировать элементы, в том числе в трехмерном пространстве.
Анимация позволяет оживлять элементы страницы. Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Объёмный куб с анимацией на CSS
Border-radius — это свойство для скругления углов.
:first-letter — это псевдоэлемент, представляющий первый символ в тексте.
Рисование на CSS с использованием градиентов и border-radius
Фигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами.
С помощью border можно легко делать стрелочки разного размера и в разных направлениях.
Справочник по флексбоксу с живыми демо