CSS фичи #7 ➤ Выезжающее меню | Moving Burger menu CSS3
HTML-код
- Опубликовано: 16 июн 2018
- Мы продолжаем серию CSS фичи. Вы просили меня показать, как можно сделать выезжающее меню с CSS анимацией. Вы просили - я делаю. Мы опять это сделаем на примере Burger menu. Исходник тут: codepen.io/Aislam23/pen/WyOQZJ
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
#Верстка #Html #Css #Css3 #CssAnimations #CssАнимация #BurgerMenu #HamburgerMenu #MenuCss #NavCss #Icons #FontAwesome #CssAnimation #Flex #УрокиCss #УчимCss #ФлексбоксЦсс #Ксс #Css3Уроки #ВыучитьCssЗаЧас #CssЗа1Час #ХаудиХо #FlexBox #УрокиЦсс #Цсс #Wayup #Loftschool #Loftblog #Css3ДляНачинающих #ZIndexCss #CssFlexbox #FlexCss #CssУроки #CssФичи
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork 
Развлечения
![PADDINGTON IN PERU - Official Trailer [4K] - Paddington Bear is back!](http://i.ytimg.com/vi/lKgitu25ZAg/mqdefault.jpg)
Лет 6 не занимался версткой, некоторое время назад решил вернуться. Ни когда не смотрел на это как на работу, это больше должно быть что-то типа получение удовольствия. Любой проект это твое детище, истинное наслаждение это когда загружаешь готовый проект на сервер.
За эти 6 лет многое что поменялось, благодарю таких людей, как Артем за хорошие обучающие видосы. Из своей практики могу сказать, что если хотите чему-то научиться, создайте себе проблему и начните ее решать (разумеется под проблемой подразумевается проект, который нужно решить, как можно интересней)
На данный момент в CSS3 много разных свойств и селекторов, последние так вообще много что позволяют. Чтоб это всё изучить и понять, попробуйте начать верстать проект, без использования class и id, ну или с их крайне минимальным использованием, CSS3 это прекрасно позволяет делать с помощью селекторов. Не забывайте, что в HTML5 достаточно тегов, которыми можно красиво оперировать в
коде.
Возможно со мной не согласятся, но также, касаемо JS, рекомендовал бы на начальном этапе минимально задействовать различные фреймворки и библиотеки, т.к. порой на чистом JS можно решить вопрос в пару строк кода, но вот по какой-то причине подключают библиотеки, чтоб это же самое написать на jQ и др.
Я 10 лет не занимался версткой. Вообще офигел как все поменялось )
Хочу фичи для препроцессоров и js-фичи больше, чем 1 видео))
Лучший канал о верстке
Ваше уроки очень интересные, спасибо вам за эти уроки и вашего голоса.
Как всегда отличная работа Артём! Так держать!!! Ждем to be continued!
Ну, конечно хочется рассмотреть сасс-фичи!
Артём, не бросай нас. Реально круто, я много чего открыл для себя нового. Большое спасибо.
Крутяк! Продолжение ждём однозначно) Спасибо огромное за урок!
Спасибо!
Топлю за SASS!!!)
+
Супер, спасибо за не заурядные уроки, ты явно выделяешься от серой массы посредственных блогеров,речь подача все супер, ждем новые уроки
Спасибо. Конечно будет интересно и на препроцессорах посмотреть различные фичи.
Спасибо за урок, круто *))👍👍👍
Вообще ништяк, давай больше фичи!
Классные уроки, Артем! Давай Sass фичи, будет полезно!
Очень круто! Спасибо, что делишься)
Тоже за scss фичи
Классное видео!
Очень круто
Нужно руководство SCSS для самых маленьких ))) Актуальная установка и настройка. Работа с ним далее более-менее понятна. Хотя их фичи тоже нужны!! )
Воу.... очень много понимания приходит видя такой код!!!
Лайк однозначно!
Да, давай LESS и SASS. Я сейчас на React Js работаю; отлично на него ложаться. Было бы интересно послушать, может новенького чего узнаю))
как всегда, царский лайк за прикольные css3 фичи с анимацией. Было бы очень круто, если была бы еще отдельная ссылочка на музыкальный плэйсет, уж очень запал в душу мне))) и еще было бы классно сделать подборочку с применением sass.
Давай scss Фичи и jQuery фичи
scss/sass фичи -- отличная идея)
было бы интересно увидеть sass-фичи!)
Супер!
Даёшь CSS фичи))
Все как всегда, в лучшем виде)))
Присоединяюсь к ребятам, Параллакс в студию)))
Даешь SASS в массы!
Спасибо давай еще
Тёма заходят фичи бодро! Спасибо за контент, годнятина зачетная! Давай по чекбоксам =)
круто такой контент смотреть!!1
Круто, еще!!!
Спасибо огромное. Артем запили видосик, с твоим личным мнением как backend разработчику правильно входить в мир фронтенда. Что я имею в виду. Был случай в офисе, подхожу коллеге(frontend разработчики), спрашиваю: "Как ты этому всему научился, книжки, курсы, опыт может что-то еще". В ответ я услышал: "Это искусство". Может запишешь свои мысли, на этот счет.
Плюс, ты очень классно показываешь ccs trics. Но что будет происходить на мобилках при этом. Может дашь пару историй, когда стоит или не стоит делать анимированное меню для заказчика.
дада scss фичи ждём!)
Конечно хотим SASS! О чём речь...
да sass, будет интересно!
Безусловно делай видео про sass!!! Хотелось бы использовать препроцессоры по максимуму.
Thanks a lot!)
Круто, спасибо! Я тоже за Sass
Ты моой кумир!!!!
Давай SCSS и урок по модальным окнам, очень помогаешь)
Слушай, вот сколько не пытался, сам не могу порой понять, как правильно работать с Sass/Less. Если у тебя появится несколько роликов, то это будет очень круто!)
Спасибо! Less фичи хотелочь бы. Как и jQuery. Да как и собственно css. В общем говоря, больше контента бы хотелось, очень годно поясняешь, всё понятно проходит.
Спасибо!)
Хорошая фича, спасибо
sass, less - да, было бы интересно посмотреть
Даешь плейлист по фишкам scss!
Артем, давай про радиобаттоны, селекты и прочий треш, с ними вечный затык)
да, вот parallax effect было бы очень неплохо разобрать)
Спасибо за урок. Реквестирую урок по препроцессору CSS. Особенно интересно было бы увидеть, как обработать токое меню с динамичным кол-ом элементов, полученных из какого не будь бэкенда в JSON виде (для урока подойдёт и файлик).
Спасибо, давай sass, очень интересно
Хотелось бы глянуть sass фичи)
Спасибо за интересные фичи...
Давай фичи с препроцессором sass... Жду с не терпением
Артем. Очень хочется увидеть цикл на SASS
Автолайк!)
красава!!!
У меня получилось!!!💪🏽💪🏽💪🏽✊
БОльше Фич!!! :)
Интересно по SASS уроки бы посмотреть)
Агонь
Очень круто!
Если есть возможность, то хотелось бы посмотреть как это можно сделать с помощью препроцессора sass.
Спасибо, да! LESS
Заебись!
PHP ФИЧИ!!!!✋🔥
спс бро и топи еще и препроцессорные фичи )
а на счет самостоятельности так просто банально мы можем быть не в курсе что есть что то интересное
We need SASS! 🤟🔥
Красавчик! Да SaSS тоже было бы хорошо.
можно еще выровнить text-align и line-height
sass+scss+jQuery фичи,давай все фичи что есть)))))
css хитман.
Круто!) А когда jQuery-фичи?
Да sass будет хорошей идеей
Привет, отличный урок, спасибо!
подскажи как ты в редакторе набираешь сокращенные выражения, или как это настроить?
например a*3>i
Сделай пожалуйста видео где ты все рассказываешь про пополнение счета на сайте !
Если действительно будет возможность сделать небольшой урок по фичам с sass - будет нереально круто!
scss было бы интересно
расскажи про reactjs. вроде вещь для фронтэнда очень модная, но лично я столкнулся с трудностями при освоении, особенно с тем что не нашел руководства что мне бы подошло. везде требуется либо понимание nodejs либо еще много чего. вроде все говорят что это по сути библиотека, но почему эту бибилиотеку так трудно просто добавить по ссылке и работать с ней как с бибилиотекой.
Артем , пожалуйста SASS фичи , очень интересно .
ждём sass фичи)
Запиши серию, где навигационное меню будет выезжать справа/слева и двигать контент страницы, типа как mmenu
Хотим Sass и less!
А будет видео по теме создания jquery плагина ?
Неплохо бы postcss
Sсss фичи!!
Ув. Артем, есть ли у Вас видео как составлять html архитектуру с правильным присвоением классов. Судя по Вашей верстке есть какое то негласное правило как правильно верстать. Хотелось бы поподробнее изучить. Спасибо.
Привет.
Что по поводу красивого размытия с помощью css, как у панельки на ios устройствах
backdrop-filter: blur()
Попробуй это. Поддержки пока практически нет, но эффект красивый
Да я знаю, думал может быть есть другие какие-то решения, более правильные и красивые
Сделайте видео по теме адаптивной вёрстки(ИМЕННО ИЗМЕНЕНИЯ CSS КОДА ПРИ ЭТОЙ ВЁРСТКЕ). Буду благодарен
За тобой уже выехали
Нужен видосик про стилизацию чекбоксов!
Заинтересовало расположение иконок по радиусу, не прописывая для каждой отдельный стиль позиционирования.
Нашел часы на чистом сss: habr.com/ru/post/171015/ там упоминаются часы на чистом css, 2009 года. Часы на css3 2013 - codepen.io/rassadin/pen/cvJmb
Сейчас все намного проще.
Лысый!
Даёшь сасс!!!!
Артем как делать перенос строки с помощью флекс бокс или без флексов как это?Спасибо.
Я за SASS)))
Очень хочу фичи по SCSS)
Еще было бы интересно как по данному меню эффект желе (аналог jelly effect в after effects) создать? )
Спасибо за урок)))Можешь пожалуйста показать как делается выезжающий слева сайдбар, при нажатии на кнопку? Буду очень благодарен. Я его сделал,но что-то топорно получилось! Проблема была в том,что я не смог при появлении сайдбара затемнить фон body,чтобы фокусировка была именно на сайдбар. Заранее спасибо
интересно было бы если фичи были на чистом css, а потом с добавлением препроцессоров и js для улучшения.
SASS фичи в СТУДИЮ!!
Не плохо бы пару видел по transition глянуть:S
Жду видео, где ты так же со своей вебкой сделаешь