Выпадающее МЕНЮ на чистом CSS / HTML

author Денис Горелов   2 год. назад
82,887 views

2,860 Like   43 Dislike

Формы CSS / Как создать форму в CSS3

Исходный код - http://bit.ly/2pvLBjL В рамках данного видео покажу как сделать красивую #форму входа на сайт при помощи #css . Задействуем #анимацию элементов при наведении (transition), подключим #шрифтовые иконки css, узнаете как задавать прозрачность элементам при помощи (rgba), о всем этом смотрите в видео уроке "Форма CSS". Подписка на канал - https://dwstroy.ru/~dwstv Обсуждение видео: https://youtu.be/INb7QmuKmTc #Видео сборник- https://dwstroy.ru/~S126H *Видео метки*: [00:25] - Описываем каркас в html [01:10] - Стилизация формы CSS3 [04:25] - Прозрачный фон (rgba) [05:07] - Добавляем шрифтовые иконки *Другие видео на канале DWSTV*: Сайт с нуля - https://dwstroy.ru/~7KNnM Уроки по CSS - https://dwstroy.ru/~paoBU 1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q Управление системой Битрикс - https://dwstroy.ru/~Zdt4K Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ Во время урока я использую: Документацию по #CSS3 Редактор PhpStorm Ссылки из урока: Архив каркаса и шрифтов - https://dwstroy.ru/~WNpGP Сервис цветов - https://www.w3schools.com Шрифтовые иконки - http://fontawesome.io Использую музыку: Elektronomia - Limitless [NCS Release] Tobu - Life [NCS Release] https://www.youtube.com/user/NoCopyrightSounds http://soundcloud.com/nocopyrightsounds Добавляйтесь к нам в друзья: Сайт видео-уроков: https://dwstroy.ru/video/ Канал в VK автора уроков: https://vk.com/dwstv Канал группы в VK: https://dwstroy.ru/~MJM28 Мы очень рады если видео по CSS было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки по #1С битрикс.

How to Create Transparent Drop Down Navigation Menu with CSS and HTML

Hey guys, I'm now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :) Download this video's files here: https://www.patreon.com/posts/inserting-data-20819049 ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! ) `````````````````````````````````````````````````````````````````````````````````````````````` ( Website ) https://clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams. ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube ( Google Plus ) https://goo.gl/J71p6f - clever techie video tutorials. ( Facebook ) https://www.facebook.com/CleverTechie/ ( Twitter ) https://twitter.com/theclevertechie

#2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства)

Исходный код с урока - http://bit.ly/2qXFcxG (#Часть_1) #Выпадающее #МЕНЮ на #чистом #CSS / #HTML - http://bit.ly/2oVnIzd Этот урок продолжение первой части "#Выпадающее #МЕНЮ на чистом #CSS / #HTML". В первой части видео показывал, как можно реализовать горизонтальное меню при помощи #display:flex; а в данном уроке, мы адаптируем его под мобильные устройства. В уроке мы опишем #медиа стили в отдельном файле, задействуем #input и #label для отслеживания щелчка, а при помощи @media запроса будем адаптировать горизонтальное меню под мобильные расширения. Весь код реализован на чистом #CSS3 / #HTML5. Объяснять стараюсь доступным языком, что будет понятно как для начинающих #Веб-разработчиков, так тем кто в данной сфере работает. Обсуждение видео: https://youtu.be/tRoszGUp5Sg В уроке задействуем: • дополним верстку мета тегом (meta name="viewport") • задействуем input с атрибутом #type="checkbox" • используем #label с атрибутом #for="….." для отслеживания клика • воспользуемся медиа запросом #@media all and (max-width: 800px) • и для анимации применим #transition Более подробное описание тут - http://bit.ly/2qXFcxG Подписка на канал: http://bit.ly/2oR3EfT Видео сборник: https://dwstroy.ru/~S126H FAQ - Ответы на Ваши вопросы: http://bit.ly/2rHZvR1 *Видео метки*: [01:47] - Что используем в данном уроке [03:14] - Скачиваем и подготавливаем код [04:49] - Обзор мета тега #viewport [06:10] - CSS стили под мобильное устройство [07:55] - Описываем #input и #label [08:55] - Оформляем медиа стили [12:03] - Описываем вложенные пункты [16:24] - Вложенные подпункты [19:35] - #Анимируем меню #transition *Другие видео на канале DWSTV*: Сайт с нуля - https://dwstroy.ru/~7KNnM Уроки по #CSS - https://dwstroy.ru/~paoBU 1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q Управление системой Битрикс - https://dwstroy.ru/~Zdt4K Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ Во время урока я использую: Документацию по #CSS3 Редактор #PhpStorm Ссылки из урока: Media queries CSS - http://bit.ly/2oQ5JtZ Архив кода на сайте - http://bit.ly/2qXFcxG Шрифтовые иконки - http://bit.ly/2nXKJk3 Добавляйтесь к нам в друзья: Сайт видео-уроков: https://dwstroy.ru/video/ Страничка в VK автора уроков: https://vk.com/dwstv Канал группы в VK: https://dwstroy.ru/~MJM28 Мы очень рады если видео по #CSS3 #адаптация #горизонтального #меню под #мобильные #устройства было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по #CSS, так и другим #WEB разработкам.

Как стать Front-End разработчиком? ► Самый Верный Путь!

Узнайте, как стать Front-End разработчиком правильно, что учить, где учить, а самое главное - в какой последовательности учить! ►►► Второй канал Хауди, подпишись ;) http://vk.cc/5lPADD Человеческие цены на игры Steam и рандомы только тут - http://bit.ly/SteamAlmostFreeGames Хочешь зарабатывать на своих видео в YouTube? Подключайся! - https://youpartnerwsp.com/join?23195 ► Жми красную кнопку "Подписаться" под видео :) ► Есть вопрос? - Задай его лично мне в наших группах! === ► Наша группа ВКОНТАКТЕ - www.vk.com/howdyho_net ► Наш Twitter - www.twitter.com/howdyho_net #Реквизиты для донатства | Поддержи канал! Z252920168434 R250434217196 Музыкальный трек предоставлен YouTube Audio Library.

Обзор CMS. ТОП-5 лучших движков рунета 2017г.

Видеокурс по программированию - https://dwstroy.ru/disc01/ Видео уроки по 1С Битрикс - https://dwstroy.ru/~Zdt4K В видео проведем #обзор лучших #CMS движков за 2017г. Эти системы управление контентом входят в #ТОП_5 по всему миру, на них разрабатывают огромное количество сайтов от визиток до огромных порталов и сервисов. Мы проведем сравнительные характеристики их функционала, определим сильные и слабые стороны каждой CMS и подведем общий их рейтинг. Видео по обзору CMS #движков затронет следующие системы управление контентом - #wordpress, #joomla, #modx, #1с_битрикс, #drupal. Данный обзор движков поможет определиться начинающему программисту или заказчику, какая система идеально подходит именно под его задачи, а также понимать их отличия будет не лишним. Вы себе сможете ответить на следующие вопросы, какая cms лучше, какая cms лучше для интернет магазина, какая cms лучше для seo, обо всем этом смотрите в видео по ТОП-5 лучших CMS движков. Подписка на канал - https://dwstroy.ru/~dwstv Обсуждение видео: https://youtu.be/2dR_3uY47DY #Видео сборник- https://dwstroy.ru/~S126H *Видео метки*: [01:20] - Рейтинг CMSmagazine [02:20] - Рейтинг Рунета [02:27] - Рейтинг iTracl [03:59] - Рейтинг SEO Auditor [04:19] - Обзор MODx [07:25] - Обзор Drupal [09:30] - Обзор Joomla [11:52] - Обзор 1С-Битрикс [14:34] - Обзор WordPress [17:42] - Характеристики ТОП-5 CMS *Другие видео на канале DWSTV*: Сайт с нуля - https://dwstroy.ru/~7KNnM Уроки по CSS - https://dwstroy.ru/~paoBU 1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q Управление системой Битрикс - https://dwstroy.ru/~Zdt4K Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ *Рейтинг CMS (систем управления сайтами)*: http://www.gs.seo-auditor.com.ru/cms/pie https://www.itrack.ru/research/cmsrate/ http://www.cmsmagazine.ru/catalogue/ *Хостинг* - https://dwstroy.ru/~GR2Un Использую музыку: Aero Chord - Time Leap [NCS Release] Laszlo - Imaginary Friends [NCS Release] Tobu - Seven [NCS Release] Elektronomia - Sky High [NCS Release] https://www.youtube.com/channel/UC_aEa8K-EOJ3D6gOs7HcyNg https://soundcloud.com/nocopyrightsounds Добавляйтесь к нам в друзья: Сайт видео-уроков: https://dwstroy.ru/video/ Канал в VK автора: https://vk.com/dwstv Канал группы в VK: https://dwstroy.ru/~MJM28 Мы очень рады если видео было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки по #1С битрикс.

(2 часть) Адаптация под мобильные устройства - https://youtu.be/tRoszGUp5Sg
Исходный код - http://bit.ly/2oVnIzd

В этом уроке мы сделаем, #выпадающее #горизонтальное #меню. Оно будет имеет #шрифтовые #иконки которые при наведении на меню меняют цвет.
Посмотреть и скачать код - http://bit.ly/2oVnIzd , а тут вторая часть - https://youtu.be/tRoszGUp5Sg

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

Обсуждение видео: https://youtu.be/K3C4NdzFHg0

В уроке задействуем:
• #display: #flex;
• используем #transition;
• позиционировать элементы при помощи #position

Подписка на канал: https://dwstroy.ru/~dwstv
Видео сборник: https://dwstroy.ru/~S126H

*Видео метки*:
[01:13] - Структура разметки в #html
[02:22] - Подключаем шрифтовые иконки
[04:10] - Описываем #стили в #CSS
[04:29] - Подключаем шрифт Cuprum
[04:29] - Анмируем при наведении #hover
[08:10] - Выпадающее меню
[11:56] - CSS генератор #background

*Другие видео на канале DWSTV*:
Сайт с нуля - https://dwstroy.ru/~7KNnM
Уроки по #CSS - https://dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - https://dwstroy.ru/~dEG4q
Управление системой Битрикс - https://dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - https://dwstroy.ru/~t0UVZ

Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm

Ссылки из урока:
Архив кода на сайте - http://bit.ly/2oVnIzd
Шрифт Cuprum - http://bit.ly/2nulfPh
Шрифтовые иконки - http://bit.ly/2nXKJk3
Генератор Градиентов - http://bit.ly/2omhCtB

Использую музыку:
Love Me Like You Do (Violin Cover by Robert Mendoza) [from FIFTY SHADES OF GREY soundtrack]
https://www.youtube.com/watch?v=VZRVou4cyic

Добавляйтесь к нам в друзья:
Сайт видео-уроков: https://dwstroy.ru/video/
Канал в VK автора уроков: https://vk.com/dwstv
Канал группы в VK: https://dwstroy.ru/~MJM28

Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.

Comments for video: