Про CSS

Эти глаза напротив

06/09/2013

Тени, градиенты, скругленные углы.

Метки:
эксперименты, 
анимация, 
рисование на CSS
←CSS-фигурыFirst letter→
Наверх

Сайдбар

Статьи

  • Математические функции в 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-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

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

Проекты

  • Grid CheatsheetЗвёзд на гитхабе:64
    Шпаргалка по гридам
  • Flexbox CheatsheetЗвёзд на гитхабе:808
    Шпаргалка по флексбоксам
  • TemaЗвёзд на гитхабе:26
    Генератор цветовых тем из CSS/SCSS/Less-переменных
  • SVG FiltersЗвёзд на гитхабе:181
    Конструктор SVG-фильтров
  • SVG Gradient Map FilterЗвёзд на гитхабе:121
    Конструктор фильтров c Gradient Map
  • URL-encoder для SVGЗвёзд на гитхабе:531
  • Common WordsЗвёзд на гитхабе:1460
    Слова, часто используемые в CSS-классах
  • HTML TreeЗвёзд на гитхабе:115
    Генератор структуры документа с проверкой БЭМ-классов
  • Pixel GlassЗвёзд на гитхабе:131
    Небольшой скрипт для проверки разметки на соответствие макету
  • Handy ColorsЗвёзд на гитхабе:30
    Список именованных цветов с готовыми палитрами
  • Relative Clip PathЗвёзд на гитхабе:57
    Конвертер абсолютных координат пути в относительные
  • Emoji BrushЗвёзд на гитхабе:28
    Кисточка с эмоджи
  • SnowflakeЗвёзд на гитхабе:32
    Генератор снежинок
  • Таблица символов юникодаЗвёзд на гитхабе:10
  • Wave MakerЗвёзд на гитхабе:18
    Конструктор волн с использованием SVG Arcs
  • Shadow PainterЗвёзд на гитхабе:12
    Рисовалка пиксельных анимаций на основе box-shadow

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

Про CSS
  • О сайте
  • Метки
  • yoksel
  • yoksel
  • RSS