#1 FORM in CSS / Предварительная разметка
Исходный код с урока - http://bit.ly/2FowlsY
Продолжение уроков: ►#2 FORMA / Вкладки на CSS и JS - • #2 FORM / Вкладки на CSS и JS ►#3 FORMA / Переключение tabs на CSS и JS - • #3 FORM / Переключение tabs на CSS и JS ►#4 FORM / Эффект плавающего текста на CSS - • #4 FORM / Эффект плавающего текста на CSS ►#5 FORM / ::before ::after (Практика) - • #5 FORM / ::before ::after (Практика) ►#6 FORM / Чекбокс (АНИМАЦИЯ) - • #6 FORM / Чекбокс (АНИМАЦИЯ) ►#7 FORM / Анимация ::before и ::after на transform - • #7 FORM / Анимация ::before и ::after на t... Это первое видео из серии уроков по созданию привлекательной #формы на CSS. За несколько уроков создадим #форму #авторизации и #регистрации с переключателями в виде табов и различными эффектами. В данных уроках разберем рад фишки как на #CSS так и на #JS, к тому же, вы сами сможете эти два инструмента сравнить, и выбрать оптимальный вариант который вам по душе. Вкратце что будем в уроках: Верстку сделаем с использованием FlexBox. Пробежимся, как вставлять шрифтовые иконки Научимся делать вкладки, к тому же не просто научимся, а по этап но разберем, как этот механизм работает на CSS и на JS. Реализуем с вами плавающий текст. До этого в одном из уроков я показывал, как это делать при помощи JS, а тут рассмотрим как это сделать при помощи CSS. Познакомимся по ближе с псевдоэелемтами ::before и ::after, и на базе этих знаний сделаем анимацию у кнопки, далее создадим свой анимированный чекбокс. В заключительном уроке создадим круговую анимированную обводку у социальных иконок. По истечению этих уроков вы определенно приобретете знания, которые в дальнейшем вам пригодятся. Обязательно практикуйтесь и внедряйте то что узнали, ведь теория это просто слова, подкрепляйте это все своими действиями и вы научитесь понимать как CSS так и JS. Поддержи канала материально: WMR - R165181087249 WMZ - Z138569415925 PayPal - paypal.me/dwstv Яндекс - 410011610186118 Сбербанк - 4276-3000-2291-1211 Во время урока я использую: Документацию по #CSS3, HTML5 Редактор #PhpStorm *Видео метки*: [02:17] - Предварительная подготовка файлов [04:16] - Выравнивание элементов на странице [04:48] - Описываем общую структуру форм [07:00] - Отбираем и вставляем иконки [11:06] - Оформление в CSS [16:30] - Логика переключателей (Таб) Обсуждение видео: • #1 FORM in CSS / Предварительная разметка Скачать изображение - https://goo.gl/K4FmGc
Скачать архив с урока - https://goo.gl/LMNkAq
Шпаргалка по #EMMET - http://bit.ly/2zwDk1p
Шпаргалка по #Иконкам - http://bit.ly/2nHR4lt
Подписка на канал: https://dwstroy.ru/~dwstv
Видео сборник: https://dwstroy.ru/~S126H
*Другие видео на канале DWSTV*: JavaScript Основы - http://bit.ly/2udeTq3
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ
Добавляйтесь к нам в друзья: Сайт видео-уроков: http://dwstv.ru/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28
Мы очень рады если видео "#1 FORMA на CSS / Предварительная разметка" Вам понравилось, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по #CSS, так и другим #WEB разработкам.
