CSS3

Оригинал: css-tricks.com/staggered-css-transitions/
Перевод: Влад Мержевич

Допустим, вы хотите сдвинуть элемент при :hover для создания забавного визуального эффекта.

CSS

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

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

Обновил мобильное приложение для Андроида по основам CSS. Теперь оно стало ещё лучше, в нём больше уроков и заданий для закрепления материалов. Приложение по прежнему бесплатное и не содержит никакой рекламы.

Установить

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

Перейти к приложению

Наряду с «Основами HTML» сделал мобильное приложение для Андроида «Основы CSS» с уроками от Джереми Томаса. Каждый урок сопровождают разноплановые интерактивные задания для закрепления материала. Так что теперь учить HTML и CSS стало ещё проще.

На webref.ru появился новый учебный курс от Джереми Томаса, посвященный псевдоклассам, градиентам, анимации и переходам. Как обычно, после каждого урока идут интерактивные задания для закрепления материала.

Вот и всё. Книга Шэя Хоу полностью переведена и выложена для всеобщего обозрения. Это обзор веб-технологий, которые применяются при разработке сайтов и ориентированы они на тех, кто уже освоил HTML5 и CSS3.

Очередная глава из книги Шэя Хоу «Уроки по HTML и CSS». На этот раз речь идёт о том, как задавать цвет фона, устанавливать фоновые картинки и градиенты. Как обычно, всё показано на готовых примерах, которые вы можете посмотреть на JSFiddle и поиграть с кодом.

Начал переводить замечательную книгу Шэя Хоу Уроки по HTML и CSS. Книга довольно объёмная, состоит из 12 глав, так что решил выкладывать её постепенно, по мере перевода каждой главы, а не ждать завершения работы целиком.

Сейчас можно ознакомиться с первыми главами, в которых рассказывается что такое HTML и CSS на примере вёрстки сайта.

Появилось новое руководство по HTML5 и CSS3 от Дамиана Вельгошика. Ориентировано на новичков, которые вообще знать не знают ничего о вёрстке. Остальным рекомендую заглянуть в последнюю главу, где приведены полезные ссылки.

На сайте webreference.ru добавлено руководство HTML5 и CSS3 на примерах. Более 70 материалов охватывающих популярные темы по вёрстке. Кое-что из них уже публиковалось ранее, но часть написана специально для этого сайта, особенно это касается новых тем вроде анимации, переходов и трансформации. Из-за большого объёма пришлось выбросить ряд тем, они будут оформлены позже в виде отдельных руководств. Потому что под формат сайта больше подходят небольшие руководства охватывающие узкую тему.

Руководство ориентировано на тех, кто уже знаком с основами HTML и CSS и теперь хочет знать, что с этим делать дальше. Читать можно как последовательно, так и по отдельным интересующим темам.

Также вы можете купить руководство за 40 рублей в формате CHM. Удобно тем, что не требует выхода в сеть и всё хранится в одном файле. Заодно поддержите тем самым сайт.

Купить HTML5 и CSS3 на примерах