Статьи

  • Инлайновые стили в background-image

    Игралась с кодами, обнаружила удивительное: оказывается, внутри CSS-свойства background можно использовать другие CSS-свойства, например, box-shadow, outline, transform и даже ещё один background.

  • Мыльные пузыри на SVG

    Честно говоря, пузыри у меня получились почти случайно, когда мне потребовалось как следует изучить градиенты и я экспериментировала с их возможностями. И я сама до сих пор не очень понимаю, как так получилось, используя только SVG — векторный формат, — сделать такой невесомый мыльный пузырь.

  • SVG-градиенты

    В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы linearGradient и radialGradient — линейный и радиальный градиенты соответственно.

  • Весёлая консолька

    Недавно мне пришлось отлаживать очень капризный скрипт, в котором, по ощущениям, происходили какие-то паранормальные явления. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации.

  • SVG-маски

    SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это clip-path и mask. Clip-path для обрезки использует только контуры фигур, игнорируя заливки и обводки, с масками всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого.

  • Умная прокрутка со Scroll Snap Points

    В Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента.

  • SVG плюс Angular минус Firefox

    SVG удивительная технология, не в последнюю очередь благодаря своим оригинальным подводным камням. Если вы начали работать с SVG — скучно точно не будет.

    Парочка свежих проблем была обнаружена при взаимодействии SVG с Angular, причем они возникали только в Firefox. Я решила описать проблемы и их решения здесь: себе на память, другим на пользу.

  • Обновление плагина svg_fallback

    В прошлом посте всем было немного непонятно: почему бы не определять браузер существующими способами и зачем отказываться от JS-библиотек? Вопросы вполне закономерные, но у меня была причина искать способ сделать SVG-фолбек без внешних зависимостей: нужно было решение для grunt-плагина.

  • Трюк на CSS для поддержки SVG в старых браузерах

    Как-то у меня возник интересный вопрос. Есть решение для замены инлайнового SVG на фоновые картинки в браузерах, где инлайновый SVG не поддерживается. Оно построено на допущении, что на странице есть нужный нам класс .ie8, по которому SVG-элементам включаются фоновые изображения.

    Очевидный недостаток способа состоит в том, что мы должны отдельно позаботиться о том, чтобы нужный нам класс был — при генерации страницы на сервере или же определив браузер с помощью JS.

  • Режимы наложения и их фоллбеки

    Не так давно в Firefox 32 включили поддержку mix-blend-mode, a в Chrome 37CSS shapes, то есть возможность управлять формой, по которой текст будет обтекать элемент. Обе технологии выглядят очень интересно, так что я решила попробовать их в действии, заодно выяснив как будет выглядеть страница в браузерах, где они не поддерживаются.

  • Грабли на чистом SVG

    В очередной раз встретившись с теми же граблями, я всё-таки решила описать суть проблемы и пути её решения. Речь пойдет о том, как заставить старые браузеры понимать и отображать SVG-элементы — хотя бы пустой блок заданных размеров.

  • Зачем я написала плагин для Grunt

    В один прекрасный день перед нами (мной и моими коллегами) встала задача обработать большое количество SVG-иконок. Исходные данные: три десятка бесцветных SVG-изображений (их цвета задаются потом через CSS) и задача сделать из них PNG+CSS фолбек для старых браузеров.

  • CSS-анимации для ротации изображений

    В процессе экспериментов с анимированными SVG-масками, мне пришлось как следует разобраться с алгоритмами CSS-анимаций.

  • Анимированные SVG-маски

    В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.

    Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.

  • Странности обводки в SVG

    Экспериментируя с SVG можно обнаружить много странных моментов. Получить странное при манипуляциях с масштабированием ещё как-то ожидаемо, но внезапно сюрпризы преподнесло свойство stroke-width.

  • You Don't Know SVG

    Вдохновляющая презентация от Дмитрия Барановского: You Don’t Know SVG.

  • SVG-прелоадеры

    В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG.

    Получилось здорово, хотя результат пока не сильно подходит для использования в реальной жизни.

  • Анимируем градиенты ещё раз

    Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и opacity.

  • Background-blend-mode

    На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

  • Поддержка @font-face

    Продолжая интересоваться разными способами сделать иконки, решила поискать что-нибудь про поддержку @font-face на мобильных устройствах.

    Известно, что кастомные шрифты могут работать неожиданным образом. Если они не поддерживаются браузером или устройством, вместо символов может появиться всё что угодно. В идеале — не будет ничего, но могут быть и другие варианты, вплоть до цветных иконок непредсказуемого содержания.

  • Впечатления недели

    Пока нет времени на полноценные статьи, просто поделюсь интересными ссылками.

  • Возможности оформления SVG

    Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.

    Стили и скрипты можно задавать внутри SVG-файла, но если мы хотим, чтобы одно и то же изображение в разных условиях выглядело по-разному — стили внутри файла не годятся — нужно, чтобы векторное содержимое было доступно для внешних стилей.

  • CSS и SVG маски

    Есть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст.

  • Nth-child и nth-of-type

    :nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

  • SVG-стеки

    Стеки — это ещё один способ организации SVG. Как спрайт, только лучше — как если бы мы могли использовать use в CSS.

    К сожалению, способ очень неравномерно поддерживается современными браузерами.

  • SVG-иконки

    Адаптивный дизайн — популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.

  • SVG: заливка и обводка

    В SVG заливка и обводка имеют много разных интересных опций, которые предоставляют возможности гораздо шире того, что есть в CSS.

  • SVG-path

    path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect, пруфлинк.

    В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.

  • SVG: группировка и переиспользование элементов

    SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.

  • SVG-фигуры и трансформации

    ← Начало про SVG

    Писать SVG довольно просто. Используются фигуры: rect, polygon, circle, ellipse, а также line, polyline и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

  • SVG

    SVG — это формат векторных изображений, основанный на XML.

    Спецификация: w3.org/TR/SVG

    SVG имеет массу преимуществ перед растровыми изображениями.

  • Звездопад на CSS

    Как-то стало интересно можно ли сделать анимированный звездопад используя CSS (если быть точнее — Sass). Оказалось, что можно, причем в зависимости от настроек результат также может быть похож на заставку Windows “Сквозь вселенную”.

  • СSS-градиенты и 3D

    Сочетание CSS-анимации, трансформаций и градиентов может дать совершенно удивительные результаты. Не уверена, что подобное можно использовать в реальных проектах, но выглядит довольно эффектно.

  • Рисовалка анимированных теней

    В процессе изучения JS решила написать рисовалку CSS-анимаций на основе box-shadow. Получила море удовольствия и узнала много нового.

  • Свежие CSS-паттерны

    Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых. Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.

  • JsBin или Codepen?

    Я долгое время использовала для своих демо jsbin.com. Похоже, слишком активно использовала. В какой-то момент в процессе редактирования кода Jsbin вообще переставал открываться.

  • CSS-паттерны

    Возможности управления фонами через CSS в cочетании с градиентами дают совершенно невероятные возможности. Градиентами можно нарисовать почти всё что угодно от простых клеточек, полосочек и кружочков до достаточно сложных узоров. Играться можно до бесконечности.

  • Радиальные градиенты

    Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.

    Спецификация: w3.org/TR/css3-images/#radial-gradients.

  • CSS-градиенты: линейные градиенты

    CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

    Спецификация: w3.org/TR/css3-images/#gradients.

  • Простые волшебные вещи

    Мне хотелось сделать эффект расходящихся лучей на чистом CSS, без картинок.

  • Крестики-нолики на CSS

    Довольно странный вариант игры.

  • Border-image

    Border-image — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.

    Спецификация: w3.org/TR/css3-background/#border-images.

    Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

  • Электронные часы. Css + Js.

    С познавательно-развлекательной целью сделала электронные часы.

    Показывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера.

  • Полезное про анимацию и эффекты

    Видео от Lea Verou и пост от Сss-tricks.

  • Игра Го на CSS: ещё одна попытка

    Кажется, мне удалось сделать более удачное решение задачи про игру Го.

    По сравнению с предыдущей версией, цвета камней меняются по очереди, а вверху доски показывается цвет следующего камня.

  • Сколько весят селекторы?

    Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

  • Символы юникода

    Заинтересовалась юникодом, захотела посмотреть какие символы в нем есть, и как-то сама собой получилась страница, на которой можно увидеть большинство символов юникода: yoksel.github.io/unicode-table.

  • Свойство content

    С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content.

  • Анимируем CSS-градиенты

    Как известно, градиенты не любят анимироваться.

  • Текстовые эффекты

    В посте представлены некоторые эффекты на основе text-shadow.

    text-shadow — это свойство, описывающее тень, отбрасываемую текстом.

  • Попытка сделать игру Го на CSS

    Вдохновившись одним из примеров с выступления Ромы на Fronteers 2013, решила попробовать сделать игру Го.

  • Древовидный список на CSS

    Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран Css.

  • Css-селекторы, часть 2

    Начало тут: Css-селекторы.

  • Css-селекторы

    В CSS есть достаточно способов обратиться к нужным элементам.
    В каждой новой спецификацией CSS добавлялось что-то новое, и теперь у нас есть много самых разных селекторов.

  • Jekyll, Vagrant и все-все-все

    В эти выходные сайт сменил не только дизайн, но и движок. Теперь это Jekyll — генератор статических страниц.

  • Контекст наложения

    Если с помощью z-index изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.

  • Responsive Web Design: Clever Tips and Techniques

    Искала выступление Виталия Фридмана на Яке2013, нашла вот это

  • Вдохновляющие штуки

    Пара прекрасных штук с Codepen.io.

  • Цветовой круг на Css

    На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css: css-tricks.com/conical-gradients-css.

    В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов.

  • Два способа "прошить" элемент по краю

    Есть два способа сделать эффект, как будто элемент прострочили на швейной машинке: используя псевдоэлементы и с помощью outline.

  • Box-sizing

    Свойство box-sizing позволяет указать как ведут себя размеры блока при наличии рамок и полей. Применяются к элементам, у которых заданы размеры.

  • Цвета в Css

    Мне очень нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.

    Спецификация тут: w3.org/TR/css3-color/.

    Итак, способы.

  • Скоростное обучение или поход на YAC2013

    2 октября прошла конференция Yet another Conference 2013 от Яндекса. Было много интересного, но самое яркое впечатление оставил конкурс по ускорению отрисовки страницы.

  • Фон под строчками: добавляем поля

    Проблема: если задать фон строчным элементам, получается вот так

  • Клеточки на CSS

    Когда возникает необходимость сделать клеточки как в школьной тетради не используя при этом изображения, первым делом в голову приходят градиенты.

  • Box-shadow

    Свойство box-shadow позволяет добавить элементам одну или несколько теней.

  • Односторонние отступы как средство от головной боли

    Прекрасная статья от Harry Roberts csswizardry.com/2012/06/single-direction-margin-declarations/.

    Суть идеи состоит в использовании односторонних вертикальных марджинов.

  • Css-фигуры: лепесток

    Из одного div с помощью border-radius легко можно сделать лепесток.

  • Transform

    Css transform позволяет трансформировать элементы, в том числе в трехмерном пространстве.

  • Маски и эффекты

    Имитация масок с помощью теней.

  • Css Animation

    Свойство animation позволяет анимировать элементы страницы.

    Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

  • 3D cube

    Мне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про трансформы и про анимации).

  • Css-hacks

    Когда возникла необходимость отделить селекторами стили для 8-го IE, я выяснила, что он игнорирует селекторы, содержащие :root и :not, потому что они из Css3.

  • 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 можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.