онлайн-курс
Pseudo Pro:
Искусство создания магии в дизайне
Погрузитесь в мир творческой магии дизайна.
Откройте перед собой безграничные возможности псевдоэлементов
Кому будет полезен
курс точно для вас, если вы:
Начинающий специалист
cобираете лендинги на GetCourse, уже знакомы с CSS и HTML, но хотите большего
Опытный специалист
но вы замечаете пробелы в знаниях, либо не хватает системы
Ищете новые идеи
чтобы сделать ваши работы ещё более профессиональными и привлекательными
для чего же нужны псевдоэлементы,
что могут псевдоэлементы
Псевдоэлементы — это мощное орудие в арсенале веб-дизайнера, позволяющее добавить волшебства к вашим веб-страницам и открывает перед вами безграничные творческие горизонты.
Они предоставляют вам возможность выбирать и стилизовать определенные части элементов, не добавляя дополнительный HTML в ваш документ. Вы можете использовать их для:
- Создания декоративных элементов:
Псевдоэлементы позволяют добавлять украшения, линии, стрелки и другие декоративные элементы без лишнего кода. - Изменения расположения текста:
Вы можете использовать псевдоэлементы для создания уникальных эффектов, изменяя положение и выравнивание текста. - Создания анимаций:
Используйте псевдоэлементы для анимаций, это придаст вашим элементам интерактивность и привлекательность. - Управления макетом:
Псевдоэлементы позволяют создавать сложные макеты, управляя размерами и расположением элементов.
ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ
псевдоэлементов очень широки (от лендингов до оформления аккаунтов): декоративные элементы в качестве фона, фото эксперта, тексты и маркеры
что входит в программу
12 уроков в записи
Контейнер для мобильной версиии, блок 1
Контейнер для мобильной версиии, блок 2
Контейнер для мобильной версиии, блок 3
Контейнер для мобильной версиии, блок 4
Контейнер для мобильной версиии, блок 5
Контейнер для мобильной версиии, блок 6
Контейнер для мобильной версиии, блок 7
Контейнер для мобильной версиии, блок 8
Контейнер для мобильной версиии, блок 9
Что такое псевдоэлементы, примеры
- Разберём виды псевдоэлементов и примеры использования
- ::before и ::after
- ::first-letter
- ::first-line
- ::selection
Результат:
Познакомитесь с пседоэлементами, видами псевдоэлементов.
Узнаете, как использовать псевдоэлементы ::first-letter, ::first-line.
Добавление текста через псевдоэлемент
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Узнаете, как использовать псевдоэлемент ::before
- Получите пошаговую видео-инструкцию
- Получите готовый код для использования в работе
Результат:
Научитесь добавлять тексты через псевдоэлемент.
заливка фона через псевдоэлемент
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Узнаете, как использовать псевдоэлемент ::before для добавления фона
- Получите пошаговую видео-инструкцию
- Получите готовый код для использования в работе
Результат:
Научитесь добавлять фоновую заливку через псевдоэлемент.
Добавление иконок Font Awesome
- Познакомитесь с новыми возможностями псевдоэлементов
- Узнаете, как использовать псевдоэлемент ::before для добавления иконок
- Получите пошаговую видео-инструкцию
- Получите готовый код для использования в работе
Результат:
Научитесь добавлять иконки Font Awesome через псевдоэлемент.
Добавление изображений через псевдоэлемент
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Узнаете, как использовать одновременно псевдоэлементы ::before и ::after
- Узнаете, как добавлять изображения в любое место страницы
- Узнаете, как добавлять «волны» с помощью псевдоэлементов
- Получите две пошаговые видео-инструкции
- Получите готовый код для использования в работе
Результат:
Научитесь добавлять изображения в любое место страницы
ОДНОВРЕМЕННОЕ ОТОБРАЖЕНИ ТЕКСТА И ИЗОБРАЖЕНИЯ
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Узнаете, как использовать одновременно псевдоэлементы ::before и ::after
- Узнаете, как одновременно отображать текст и изображение
- Получите две пошаговые видео-инструкции
- Получите готовый код для использования в работе
Результат:
Научитесь отображать одновременно текст и изображения
Hover-эффекты и псевдоэлементы
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Узнаете, как изменять внешний вид псевдоэлементов при наведении
- Получите пошаговую видео-инструкцию
Результат:
Научитесь менять отображение пседоэлементов в разных состояниях
добавление декоративных элементов к фону
- Научитесь добавлять декоративные элементы - изображения
- Научитесь добавлять декоративные элементы - границы
- 3 примера с подробной иструкцией и кодами
Результат:
Научитесь делать ваши лендинги стильными
за счёт добавления различных декоративных элементов
Выделение текста на сайтах или в уроках
- Познакомитесь с новыми возможностями использования псевдоэлементов
- Научитесь изменять фон выделяемого текст под цветовую палитру сайта
- Получите пошаговую видео-инструкцию
Результат:
Научитесь стилизовать сайт до мелочей — даже выделение текста
СКОЛЬКО
пвесдоэлементов вы насчитали на этой странице? ))
Хотите и вы овладеть искусством создания удивительных дизайнов,
способных оставить вас и ваших клиентов в восторге?
Начните обучение сегодня и откройте двери
в мир творческой магии дизайна с курсом
Pseudo Pro:
Искусство создания
магии в дизайне
сразу после оплаты вам будут доступны:
- 12 уроков в записи
- доступ к материалам 90 дней
- прохождение в удобном темпе