uwebdesign

подкаст «Суровый веб» про веб разработку, IT и ux дизайн

warcraft_rus
  • «Суровый веб»
  • Полезные ссылки
  • Книги
  • Обзоры
  • О проекте
  • Контакты
  • Поддержать проект
uWebDesign » Метка: CSS3

CSS3

Весь контент про CSS3 — каскадные таблицы стилей третьего поколения, активно разрабатываемая спецификация CSS. Самая масштабная редакция.

CSS Shapes — огибаем сложные формы

CSS Shapes — огибаем сложные формы

13.01.2017 — нет комментариев

Не забыли ещё как использовать CSS Shapes? Этот модуль стилей позволяет ограничивать контейнер сложными кривыми и добиться гибких решений.

→ Прямая ссылка ←

Рубрика: Обучающие статьи, Полезные ссылки Метки: CSS, CSS3

Производительный parallax — это реально

Производительный parallax — это реально

12.01.2017 — 4 комментария

Наверняка вы уже смотрели много методик для создания производительного параллакса на любых устройствах. Сегодня по ссылке вас ждёт гениальная инструкция от Пола Льюиса (Paul Lewis) из команды Google Chrome.

→ Прямая ссылка ←

Рубрика: Обучающие статьи, Полезные ссылки Метки: CSS, CSS3, Front End, JavaScript, Производительность

Предрождественский календарь с 3D анимациями

Предрождественский календарь с 3D анимациями

17.12.2016 — нет комментариев

Посмотрите отличную демку предрождественского календаря, в котором каждый день — это 3D куб, который анимируется при наведении и клике. Можно приспособить под любой календарь, не обязательно рождественский.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS3, JavaScript, Анимация

Wait! Animate — управляем задержками анимаций

Wait! Animate — управляем задержками анимаций

15.12.2016 — нет комментариев

Библиотека Wait! Animate позволит вам легко управлять задержками в CSS анимациях, в наличии даже удобный SCSS миксин.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS, CSS3, Sass, Анимация

Как работают CSS псевдоклассы, с примерами

Как работают CSS псевдоклассы, с примерами

15.12.2016 — нет комментариев

Почитайте очень подробную статью на freeCodeCamp о том, как работают CSS псевдоклассы, с примерами кода и диаграммами.

→ Прямая ссылка ←

Рубрика: Обучающие статьи, Полезные ссылки Метки: CSS, CSS3

SVG прогресс бар своими руками

SVG прогресс бар своими руками

15.12.2016 — нет комментариев

Robin Rendle на CSS-Tricks рассказывает и показывает как с помощью SVG и нехитрых CSS3 переходов можно сделать отличный «доступный» прогресс бар.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS, CSS3, SVG

Анимированный куб на чистом CSS

Анимированный куб на чистом CSS

18.11.2016 — нет комментариев

Тема CSS кубов плотно засела в комьюнити, поэтому спешим поделиться очередной демкой. Здесь даже HTML элементов никаких нету, только псевдо-элементы для <body> и чистые, кристаллизованные и неразбавленные CSS анимации.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CodePen, CSS, CSS3, Анимация

Методы управления отступами в типографике

Методы управления отступами в типографике

01.11.2016 — нет комментариев

Geoff Graham на блоге CSS-Tricks написал отличную статью о том, как управлять различными отступами при работе с веб-типографикой. Кроме стандартных свойств вроде font-kerning и letter-spacing автор также рассмотрел все виды текстового сглаживания, их поддержку в современных браузерах и влияние на производительность.

Нам на uwebdesign.ru ещё только предстоит поработать со шрифтами, но ролик на эту тему был снят уже довольно-таки давно: Web-шрифты — использование Typekit и Google Fonts.

→ Прямая ссылка ←

Рубрика: Обучающие статьи, Полезные ссылки Метки: CSS, CSS3, Типографика

Сегментированные фоновые изображения

Сегментированные фоновые изображения

01.11.2016 — нет комментариев

Посмотрите набор шикарных демок сегментированных фоновых изображений с разной тематикой. Некоторые реагируют на положение курсора, а некоторые просто красиво распадаются на части.

Основной «фокус» реализован с помощью CSS свойства clip-path, про которое мы снимали отличный ролик: CSS Clipping & Masking (свойства clip-path и mask-image).

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS, CSS3, JavaScript, Анимация

SpinThatShit — набор прелоадеров из Sass миксинов

SpinThatShit — набор прелоадеров из Sass миксинов

28.10.2016 — нет комментариев

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

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS, CSS3, Sass, Анимация

Radiobox.css — анимированные CSS3 радио инпуты

Radiobox.css — анимированные CSS3 радио инпуты

19.10.2016 — нет комментариев

Сегодня делимся с вами отличным ресурсом Radiobox.css, который позволяет вам реализовать дюжину красивых CSS3 анимаций для радио кнопок. С точки зрения UX очень круто!

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS3, HTML, Анимация

Эффект помех с помощью CSS3 анимации

Эффект помех с помощью CSS3 анимации

10.10.2016 — нет комментариев

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

→ Прямая ссылка ←

Рубрика: Обучающие статьи, Полезные ссылки Метки: CSS3, Анимация

Интересные варианты для навигационных индикаторов

Интересные варианты для навигационных индикаторов

09.10.2016 — нет комментариев

На Codrops нам предлагают около 18 вариантов реализации различных навигационных индикаторов (справа от слайдшоу обычно). Почти все варианты предполагают ещё и надписи.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS, CSS3

Scrollanim — создание анимаций при скроллинге

Scrollanim — создание анимаций при скроллинге

28.09.2016 — 4 комментария

Библиотека Scrollanim позволяет создавать простые, но красивые анимации при скроллинге для конкретных элементов. Ничего нового, просто ещё одна имплементация такого решения.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS3, JavaScript, Анимация

Скошенные углы на Sass и SVG

Скошенные углы на Sass и SVG

21.09.2016 — нет комментариев

Посмотрите отличный пример реализации контейнеров со скошенными углами с помощью Sass миксина. «Под капотом» в миксине — динамическая генерация SVG, довольно-таки изящно.

→ Прямая ссылка ←

Рубрика: Инструменты, Полезные ссылки Метки: CSS3, Sass, SVG

  • « Пред.
  • Страница1
  • …
  • Страница6
  • Страница7
  • Страница8
  • Страница9
  • След. »
Поиск

uWebDesign настоятельно рекомендует!

  • Войти на сайт
  • Зарегистрироваться
Подписаться на рассылку

warcraft_rus
warcraft_rus
Полезные ссылки
  • О проекте
  • Часто задаваемые вопросы
  • Реклама
  • Поддержи проект!
  • Контакты
Пожертвуй на развитие проекта
Наш подкаст
в iTunes в Android в RSS
Все права защищены © 2014-2025 uWebDesign. Сделано с ♥ в Челябинске.
Пользовательское соглашение. Сайт работает на хостинге SmartApe.