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

10/10/2013

Пара интересных демо с Codepen.io.

Сайдбар

Статьи

Математические функции в CSS
Адаптивное видео с помощью встроенных математических функций CSS
Недоступность в картинках
Единицы размеров в CSS
Генератор цветовых тем
Jekyll → Gatsby
Вариативные шрифты
Размеры в SVG
Адаптивный Pixel Perfect
Логотип не отвечает или временно недоступен
SVG-паттерны
Мыльные пузыри на SVG
SVG-градиенты
Весёлая консолька
SVG-маски
Умная прокрутка со Scroll Snap Points
CSS-анимации для ротации изображений
Анимированные SVG-маски
Странности обводки в SVG
SVG-прелоадеры
Анимируем градиенты ещё раз
Background-blend-mode
Возможности оформления SVG
CSS и SVG маски
Nth-child и nth-of-type
SVG-иконки
SVG: заливка и обводка
SVG-path
SVG: группировка и переиспользование элементов
SVG-фигуры и трансформации
SVG
СSS-градиенты и 3D
Рисовалка анимированных теней
Свежие CSS-паттерны
CSS-паттерны
Радиальные градиенты
Линейные градиенты
Крестики-нолики на CSS
Border-image
Электронные часы на CSS и JS.
Сколько весят селекторы?
Символы юникода
Свойство content
Анимируем CSS-градиенты
Текстовые эффекты
Древовидный список на CSS
Css-селекторы, часть 2
Css-селекторы
Контекст наложения
Box-sizing
Два способа "прошить" элемент по краю
Цвета в CSS
Фон под строчками: добавляем поля
Box-shadow
Css-фигуры: лепесток
3D-куб
Css Animation
Transform
Border-radius
First letter
CSS-фигуры
Эти глаза напротив
Стрелки с помощью свойства border
Flexbox

Страницы

SVG: полезные ссылки
CSS-селекторы одной таблицей
Таблица именованных цветов
Функции Transform
Свойства Animation одной таблицей
Свойства Transform
Разный синтаксис Flexbox
Свойства Flexbox одной таблицей

Проекты

Grid CheatsheetЗвёзд на гитхабе:147
Шпаргалка по гридам
Flexbox CheatsheetЗвёзд на гитхабе:1298
Шпаргалка по флексбоксам
TemaЗвёзд на гитхабе:32
Генератор цветовых тем из CSS/SCSS/Less-переменных
SVG FiltersЗвёзд на гитхабе:270
Конструктор SVG-фильтров
SVG Gradient Map FilterЗвёзд на гитхабе:149
Конструктор фильтров c Gradient Map
url-encoder для SVGЗвёзд на гитхабе:1170
Common WordsЗвёзд на гитхабе:3073
Слова, часто используемые в CSS-классах
HTML TreeЗвёзд на гитхабе:220
Генератор структуры документа с проверкой БЭМ-классов
Pixel GlassЗвёзд на гитхабе:154
Небольшой скрипт для проверки разметки на соответствие макету
Handy ColorsЗвёзд на гитхабе:35
Список именованных цветов с готовыми палитрами
Relative Clip PathЗвёзд на гитхабе:171
Конвертер абсолютных координат пути в относительные
Emoji BrushЗвёзд на гитхабе:32
Кисточка с эмоджи
SnowflakeЗвёзд на гитхабе:37
Генератор снежинок
Таблица символов юникодаЗвёзд на гитхабе:16
Wave MakerЗвёзд на гитхабе:22
Конструктор волн с использованием SVG Arcs
Shadow PainterЗвёзд на гитхабе:17
Рисовалка пиксельных анимаций на основе box-shadow

Нижняя навигация

О сайте
Метки
Twitter
Github