CSS - Видеоуроки, курсы, туториалы

Эффекты Parallax

 

Термин «параллакс» в первую очередь исходил из визуального эффекта двумерных видеоигр, которые использовали разные скорости движения фонового изображения, чтобы создать иллюзию глубины во время игрового процесса. Как правило, это делалось путем того, что фон игры двигался медленнее, чем передний план, чтобы заставить его казаться подальше. Эта же концепция применяется к дизайну сайта parallax, в котором фон веб-сайта движется с другой

3 ч 42 мин 54 сек

Русский

webformyself

Премиум

Посмотреть

Изучаем CSS GRID

Learn CSS GRID

CSS Grid (Сетки) - это новая система компоновки элементов в CSS! Это не фреймворк или библиотека - это дополнение к языку, которое позволяет нам быстро создавать гибкие двухмерные макеты.Мы можем использовать ее для размещения, выравнивания и дизайна верстки так, как ранее было просто невозможно с помощью флоатов или flexbox.CSS-сетка может показаться немного сложной с новыми идеями синтаксиса и макета, но она довольно проста и может быть разбита

3 ч 54 мин 4 сек

English

wesbos

Бесплатно

Посмотреть

CSS генераторы кода

 

Вы наверное знаете, что в CSS 3 заложено очень много мощных методов для работы с графикой. Смотря на сайты где есть CSS анимация, или куча всего красивого сделано только им, мы увидим в коде кучу раздутого кода, который ручками вводить просто нереально. Их очень много, становится очень легко допустить ошибку. Очень хорошо что писать все это самому нам не нужно. Для этого существуют CSS генераторы, с их помощью мы формируем CSS код автоматически,

0 ч 24 мин 35 сек

Русский

webformyself

Премиум

Посмотреть

Повторное использование стилей Flexbox с помощью миксинов Sass

Reuse Flexbox Styles With A Sass Mixin

Этот урок охватывает flexbox, который должен охватывать большинство ситуаций размещения на вашем сайте. С переменными и стандартными значениями по умолчанию этот mixin будет охватывать большинство проблем выравнивания и заменять необходимость в таблицах на все время. Нужна колонка с каждым элементом, равномерно распределенным, но начинающим выравнивание сверху? Нет проблем! Как насчет строки с элементами, равномерно распределенными, а также равны

0 ч 4 мин 55 сек

English

egghead

Премиум

Посмотреть

Создайте анимированный Hamburger, используя HTML5 и CSS3

Create an Animated Hamburger using HTML5 and CSS3

Мы создадим интересный анимированный гамбургер, который можно будет использовать на веб-сайтах. В этом процессе мы рассмотрим transitions и transformations в CSS3.

0 ч 3 мин 2 сек

English

egghead

Премиум

Посмотреть

Все лучшее и самое полезное о SCSS

Learn the Best and Most Useful SCSS

Вы когда-нибудь хотели получить доступ к условностям или итерации при написании стилей? Как здорово было бы использовать функции для написания стилей? SCSS имеет это и многое другое! SCSS - это надстройка CSS. Любой допустимый CSS - это SCSS, они даже имеют одинаковый синтаксис. SCSS заимствует функции с других языков для написания умных, многоразовых и более читаемых стилей. Этот курс будет посвящен тому, как использовать более полезные функции

0 ч 39 мин 56 сек

English

egghead

Премиум

Посмотреть

CSS в глубине - v2

CSS In-Depth, v2

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

10 ч 38 мин 1 сек

English

frontendmasters

Удален по просьбе правообладателя

Посмотреть

Skrollr Workshop

 

Узнайте как создать сайт с  элегантной анимацией прокрутки SVG. Вы хотите освоить Skrollr и SVG анимацию? Этот курс Skrollr является прекрасным дополнением к мастер-классу по скроллинг Parallax. Позвольте мне провести вас через мой рабочий процесс и научить вас, как построить современный, прокручиваемый сайт, на одной странице без каких-либо головных болей.

3 ч 9 мин 15 сек

English

ihatetomatoes

Премиум

Посмотреть

Parallax скроллинг. Мастер Класс

Parallax Scrolling Master Class

Узнайте как создать сайт со скроллом parallax с нуля. Вы устали копировать код со случайных сайтов или обучающих курсов ? Вы смущены атрибутами данных Skrollr? Узнайте, как создавать анимацию прокрутки без каких-либо головных болей.

2 ч 51 мин 59 сек

English

ihatetomatoes

Премиум

Посмотреть

ScrollMagic Workshop

 

ScrollMagic - самая популярная библиотека анимации прокрутки, используемая на лучших удостоенных наград веб-сайтах. Я использую ScrollMagic и GreenSock в своих интерактивных проектах уже несколько лет, чтобы сосредоточиться на креативном написании кода, вместо кросс-браузерных проблем, это бесценно.

5 ч 2 мин 42 сек

English

ihatetomatoes

Премиум

Посмотреть