Проект 3: Текст с анимацией без JavaScript

Первая часть: HTML

Рассмотрим подробнее процесс работы с анимационным текстом в HTML.

Это довольно простая задача: достаточно объявить нужный тег, например <p> (или любой другой заголовочный тег, такой как h1, h2 и так далее).

Затем мы можем добавить к этому тегу класс и заполнить его содержимым. В данном примере внутри тега будет находиться название нашего канала.

Made in HTML/CSS

Проект 3: Текст с анимацией без JavaScript

Вторая часть: css

Рассмотрим подробнее:

Данный CSS-код применяет стиль к элементам с классом .text, создавая анимированный текст с эффектом вращающегося фона. Основные характеристики:

- Жирный шрифт, размер 5vw, цвет текста с обводкой.
- Использование background-clip: text для отображения фона только в области текста.
- Псевдоэлементы :before и :after создают яркий фон с радиусами закругления и смешанным режимом.
- Анимация вращения (360 градусов) придаёт динамичность.

В результате получается стильный текст с эффектом вращающегося фона.

Made in HTML/CSS

Проект 4: Поисковая панель

Первая часть: html

Рассмотрим подробнее:

1. Контейнер (<div class="wrap">): Оборачивает весь элемент для стилизации.

2. Поисковая панель (<div class="search">): Содержит поле ввода и кнопку.
- Поле ввода (<input class="searchTerm">): Позволяет пользователю ввести запрос с текстом-подсказкой.
- Кнопка (<button class="searchButton">): Отправляет запрос, содержит иконку лупы из Font Awesome.

Made in HTML/CSS

Проект 4: Поисковая панель

Вторая часть: css

Рассмотрим подробнее:

1. Импорт шрифта: Подключает шрифт Open Sans из Google Fonts.
2. Общее оформление: Устанавливает светло-серый фон для страницы и применяет шрифт к тексту.
3. Поисковая панель:
- .search: Задает размеры и флекс-выравнивание.
- .searchTerm: Стили для поля ввода (рамка, padding, цвет текста при фокусе).
- .searchButton: Стили для кнопки (размер, цвет фона, закругленные углы).
4. Центрирование: .wrap ограничивает ширину и размещает элемент по центру экрана.


Made in HTML/CSS

Проект 5: Форма авторизации

HTML - 1 часть

1. Основной контейнер:
- Вся форма обернута в главный контейнер, который служит основным каркасом интерфейса.

2. Форма входа:
- Включает приветственный заголовок с текстом "С возвращением".
- Содержит два поля для ввода: одно для ввода почты, другое — для пароля. Каждое поле имеет соответствующий текстовый ярлык.
- Есть текст для пользователей, которые забыли пароль, предлагающий восстановление.
- Включает две кнопки: одна для входа с введенными данными, другая — для входа через Telegram.

3. Субконтейнер:
- Этот раздел позволяет пользователям переключаться между формами входа и регистрации.
- Содержит текстовые блоки с подсказками для тех, кто впервые на сайте, и для тех, у кого уже есть аккаунт.

Made in HTML/CSS

Проект 5: Форма авторизации

HTML - 2 часть

1. Форма регистрации:
- Включает заголовок с просьбой заполнить необходимые данные.
- Содержит три поля для ввода: имя, почта и пароль, каждое с соответствующим текстовым ярлыком.
- Также есть две кнопки: одна для регистрации с введенными данными, другая — для регистрации через Telegram.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 1 часть

Описание:

Эта часть включает общие стили для всех элементов, тела документа и входных элементов (input, button). Это базовые стили, для дальнейшего украшения.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 2 часть

Описание:

Эта часть содержит стили для основного контейнера .cont, который имеет фиксированную ширину и высоту, а также центрированное расположение.

Также включает стили для формы .form и подконтейнера .sub-cont, которые имеют анимации перехода и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 3 часть

Описание:

Эта часть содержит стили для кнопок, которые имеют закругленные углы и анимации перехода.

Также эта часть включает стили для изображений, которые имеют анимации и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 4 часть

Описание:

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

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 5 часть

Описание:

Эта часть включает стили для кнопок внутри изображений, которые имеют анимации и используют миксин signUpActive для изменения положения при активном состоянии регистрации.


Made in HTML/CSS