Пошаговые CSS-переходы

Оригинал: 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);
  }
}

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

Акселератор для верстальщиков от HTML Academy

Реклама

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

Вы будете работать в команде с менеджером и тестировщиком над проектом, получать консультации и код-ревью от опытного разработчика-наставника.

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

Проекты акселератора вы сможете использовать в портфолио, как образец работы на коммерческом проекте.

Выбирайте проект и начинайте прокачиваться.

Бесплатное место на курсе по PHP

Реклама

Хотите освоить бэкенд-разработку? Есть шанс это сделать бесплатно.

В инстаграме HTML Academy разыгрываем бесплатное участие в курсе «PHP, уровень 1», который пройдёт с 6 августа по 6 октября.

Курс рассчитан на новичков в программировании. Вы научитесь с нуля писать серверную логику для проектов.

В программе: изучение синтаксиса PHP и SQL, настройки веб-сервера и сервера баз данных, решение типовых задач бэкенд-программиста — аутентификация, авторизация и работа с формами. Подробнее автор курса рассказывает в записи лайва.

Подробнее об условиях участия в конкурсе читайте здесь. Испытайте свою удачу! Итоги подведём 16 июля.

Освоить профессию «React-разработчик» с нуля

Реклама

Ближайший поток профессии «React-разработчик» пройдёт со 2 сентября 2019 года по 10 августа 2020. Это одиннадцать месяцев насыщенной работы над пятью проектами: от вёрстки простого макета до SPA.

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

После прохождения профессии вы станете сильным специалистом, который понимает, что он делает, и знает, как использовать инструменты правильно. А успешные выпускники смогут пройти стажировку в «Лиге А.» и получить опыт работы с реальными заказами.

До встречи 2 сентября, а по промокоду htmlbook вас ждёт небольшая скидка на обучение.

6 новых вызова в HTML Academy

Реклама

Интерактивные курсы в Академии — это освоение вёрстки в игровой форме с живым кодом. Вас ждут интересные задачи, приближенные к реальным.

В курсах встретятся простые задания, испытания, принцип которых — «сверстай, как показано в образце» и специальные вызовы — для тех, кто хочет больше практиковаться.

На прошлой неделе как раз вышло четыре вызова начального уровня и два средней сложности в курсе «Знакомство с HTML и CSS».

Они доступны при активной подписке. Принимайте вызов, прокачивайте свои знания и помогите Кексу справиться с заданиями!

Освоить бэкенд-разработку с нуля

Реклама

6 августа стартует профессиональный курс «PHP, уровень 1». Вас ждёт девять недель практической работы и защита личного проекта в конце.

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

В программе:

• изучение синтаксиса PHP и SQL;
• настройки веб-сервера и сервера баз данных;
• решение типовых задач бэкенд-программиста: аутентификация, авторизация и работа с формами.

Обучение проходит под руководством наставника — опытного разработчика, которому вы сможете задавать вопросы по ходу обучения.

Чтобы узнать больше об интенсиве — посмотрите запись трансляции с автором курса Кириллом Сенкевичем и обзоры личных проектов.

До 11 июня стоимость участия 15 400 рублей, а по промокоду htmlbook скидка 1000 рублей.

До встречи на курсе!

Новые вызовы в HTML Academy

Реклама

Двенадцать новых вызовов появились в курсе «Знакомство с HTML и CSS». Вызовы — практические задания для тренировки, доступные по подписке.

Кекс подготовил для вас задачки разной сложности: один простой вызов, два — средних, и один продвинутого уровня.

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