Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут | display flex, transition, overflow

814 ratings | 12580 views


Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут | display flex, transition, overflow

Код аккордеона: Красивый аккордеон слайдер на чистом CSS CSS3 за 8 минут. Картинки раскрываются при наведении, сам блок имеет эластичный вид что в свою очередь легко внедряется на любую страницу сайта и довольно эффектно смотрится. Задействуем в CSS: • display flex; • используем transition; • и скроем картинки за пределами блока при помощи overflow hidden; Как это делается смотрите в видео уроке. Обсуждение видео: Подписка на канал: Видео сборник: *Видео метки*: [01:02] - Делаем разметку в html [02:22] - Описываем стили в CSS3 [05:43] - Анимация при помощи transition *Другие видео на канале DWSTV*: Сайт с нуля - Уроки по CSS - 1С Битрикс работа с сайтом - Управление системой Битрикс - Настройки сайта 1С Битрикс - Во время урока я использую: Документацию по CSS3 Редактор PhpStorm Ссылки из урока: Архив с урока - Использую музыку: Maestro Chives feat. Royal Blue - Sleeping Pill Добавляйтесь к нам в друзья: Сайт видео-уроков: Канал в VK автора уроков: Канал группы в VK: Мы очень рады если видео по CSS3 aслайдеру было Вам полезно, хотите поблагодарить жмите кнопку нравится и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим WEB разработкам.

Comments to the video: Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут | display flex, transition, overflow

Денис Горелов 1 year ago
На примере данного слайдера отлично видать будто работает display:flex; напишите в комментах используете ли вы его в собственных проектах. Если видео было полезным, поделитесь им в соц сетях ).
Андрей Богдан 2 months ago
Как вечно, попросту, прекрасно и понятно. Интересно было бы поглядеть на waterfall carousel. Принцип похож, однако там деятельный элемент вечно центрируется по средине, другие в карусели сокрытые за ним и кушать навигация. Кароч, без JS не стать, ну-ка и будто логическое продолжение этого урока зашло бы на 100%. Спасибо)
AK 2 months ago
Бомба!! Давай новые видосы!
Uner 3 months ago
Как сделать автоматическое изменение содержимого в браузере, будто у вас? Просто надоело повсевременно обновлять страничку, что узреть итог, а у вас прям все верно)
Сергей Смирнов 4 months ago
у кого нибудь слайдер вышел? все норм работает?
Веселый Мангуст 4 months ago
будто я вообщем не додумался -_-
Алексей Цветков 5 months ago
Топовый
Nafis Sharifullin 5 months ago
Спасибо за этот задание)
Aliaksei S. 5 months ago
крутой задание! Спасибо огромное!!!
Андрей Марсин 6 months ago
Урок превосходный. А, будто насчет аккордеона с анонсами статей?
Андрей Марсин 6 months ago
Интересно бы поглядеть видео про анимационный аккордеон, навроде того что на главной страничке вашего веб-сайта макхост рекламирует.
Денис Горелов 6 months ago
В принципе по таковой же аналогии, лишь дополнительно вставляем блок с текстом. Возможно в предстоящем покажу.
MONSTER Clash 6 months ago
Просто благодарю богу что кушать таковой канал. Вечная подписка Лайк под каждым видосом
Dgsg Wy3y 7 months ago
какие уникальные размеры картинок? вышина и ширина? я использовала свои рисунки, однако не выходит?
Денис Горелов 6 months ago
Посмотри исходники, ссылка в описании.
Dgsg Wy3y 7 months ago
Огромное благодарю за понятное и доступное разъяснение!!!
Orest Borovets 7 months ago
Как же я рад что попал к вам. Огромное благодарю)
Dmitriy Movchan 7 months ago
Мне вечно было любопытно каким образом работает такое выравнивание по центру. Мы же сдвинули блок на 50% от верха и левого края с помощью параметров top и left, а потом потом команды translate(-50%,-50%) он по идее обязан возвратиться на исходную позицию. Почему он по центру?
Dmitriy Movchan 6 months ago
Теперь все понятно. Большое благодарю за таковой ответ.
Даниил Беседный 6 months ago
translate берёт значения от размера блока, к которому он применён. А top и left сдвигают координату верхнего левого угла блока в обозначенную точку, за размер берётся размер viewport'a(либо родительского контейнера), вот и вся мистика.
Serioga Romanchykov 7 months ago
Большое благодарю за видео ты крут!!
Паша Бабков 7 months ago
Этому видео РОВНО ГОД !!! ОНО ТООП
Роман Литвиненко 8 months ago
Отлично. Вопрос не немало не по теме, однако. а что за мотив на заднем фоне? Больно приглянулась
Денис Горелов 8 months ago
Музыка в описании под роликом + ссылка с источников где она бралась.
Галина Прокофьева 8 months ago
СПАСИБО за ответ. Урок отыскала. Все вышла. Это супер! Стала осознавать - что к чему. Сама написала иной слайдер, истина покамест весьма простой, НО. фуррор окрыляет. Еще один благодарю. Ссылка супер, там немало чего можно почитать, реально начинаешь осознавать, чего и будто.
Денис Горелов 8 months ago
Рад что сумел посодействовать.
Богдан Нікітчук 9 months ago
Крутой УРОК!!!
Денис Горелов 8 months ago
Спасибо, я рад что приглянулся.
Галина Прокофьева 9 months ago
Жаль, что код аккордеона скачать уже невозможно, не удается получить доступ к веб-сайту. На экране весьма нехорошо видать. Но все-равно благодарю за пять сработанный слайдер. Печалька, придется понимать с экрана. Бедные мои очи.
Денис Горелов 9 months ago
Перейди по ссылке там полный код.
Gennadiy Romanov 9 months ago
Спасиьо. Очень любопытно.
Yuri 9 months ago
Спасибо, Денис! Подписался на ваш канал!
A A 9 months ago
Салам Алейкум Дорогой Денис а какой интернет-текстовый редактор вы используете в этой видео?
Денис Горелов 9 months ago
Привет, редактор PhpStorm
Валерия Ширинова 10 months ago
Все описано весьма доступно и просто!)
Ксения Соколовская 10 months ago
будто сделать, чтоб блок в котором рисунки не скакал при наведении снутри?
Кофе_без_сахара 10 months ago
у меня тот же проблема. Если мастерить этак же. будто и в видео. то всё ОК, а если прибавлять на страничку веб-сайта, то скачет и неактивные фото слайдера не в полную высоту.Как один на данный момент работаю над этой неувязкой.
azizbek pinjebaev 10 months ago
Сфасифааа
iBroke yourSoul 11 months ago
Привет всем. помогите осознать, отчего при изменении width изменяются и свойство height ?
Денис Горелов 11 months ago
Так работают изображения, по умолчанию у нее кушать ширина и вышина, задав одну из их, 2-ая автоматом подстроится.
Алексей Ковалев 11 months ago
Огромное благодарю, весьма посодействовало видео. Мне необходимо безотлагательно запилить веб-сайт, а времени на исследование Java нету вообщем. Третий один меня выручаешь.
Денис Горелов 11 months ago
😉 весьма рад что уроки посодействовали.
Apple iPad 11 months ago
Молодец круто
Роман Филиппенко 11 months ago
Может разберёте кроссбраузерность ? в Opera и Safari примеры смотрятся мягко говоря удивительно. На что можно поменять display? Спасибо.
Денис Горелов 11 months ago
При разработке таких видео уроков я не преследую написания безупречного кода, сами осознаете, на это уйдет еще больше времени и код будет намного больше, по этому ограничиваюсь лишь самой мыслью. Разбирать этот образец крестообразности не вижу смысла по причине того что сводится все к одному, прописывания дополнительных префиксов и запросов под определенный браузер. В принципе вы это сможете и сами сделать.
# SMOKE 1 year ago
Ты крутой. Спасибо за хороший и ооочень информативный гайд!)
Zor Zohrabyan 1 year ago
Очень полезные видеоуроки благодарю создателю,класс
Андрей Отдельный 1 year ago
Ребят будто сделать аккордеон фиксированной ширины, чтоб он не скакал, вдуплить не могу. Вот будто тут к примеру
Денис Горелов 1 year ago
Для этого задайте фиксированную ширину основному родителю и его элементам.
Умид Мавлонов 1 year ago
А будто можно мастерить этак чтоб картина раскрывалась и показывалась с центра
Денис Горелов 1 year ago
По карусели, поглядите данное видео , по слайдеру, может быть сниму.
Умид Мавлонов 1 year ago
DWS TV - Уроки по WEB разработкам плюс можеш ли ты сбросить видео про то будто можно сделать карусель с помощью css либо jquery?
Умид Мавлонов 1 year ago
DWS TV - Уроки по WEB разработкам может тогда снимеш 2 доля уверен многим будет любопытно
Денис Горелов 1 year ago
Это дописывать стили необходимо, в 2-ух словах не разъяснить.
Alex Eller 1 year ago
Как то всё чрез жопу /:
Алексей Кошевой 1 year ago
Даешь больше видосов! Урок на славу.
Роман Филиппенко 1 year ago
ЭТО _ ПРОСТО _ БОМБА ! Как видите код простой. здесь я нервно закурил.
Someone's Channel 1 year ago
по больше бы конкретики здесь попросту и чайники тоже глядят конечно по медлительнее
Елена Саркисова 1 year ago
Очень здорово, откуда берутся такие красивые идеи )
Денис Горелов 1 year ago
Большую доля мыслях вы сами формируете в комментах либо в сообщениях в VK. Как образец служит данное видео, юзер в личку обратился с просьбой посодействовать, а мы проявили это для всех будто воплотить схожий вариант.
Михайло Дулиба 1 year ago
Отличные уроки, благодарю для тебя, продолжай в том же духе, еще один благодарю))
Bussines For 1 year ago
Здравствуй! Если ты используешь phpstorm наверняка ты знаешь php и если конечно весьма желаю уроки по нему от тебя. Отличные уроки, фортуны! Подписка, лайк.
Bussines For 1 year ago
))
Денис Горелов 1 year ago
Была ранее мысль записать такового рода серию уроков, однако будто то это все не подержалось подписчиками, решили покамест ее бросить. Возможно в будущем создадим уроки в этой теме. Отдельно благодарю за лайк!
Ilya Karabanov 1 year ago
С Хауди пришел=) Неплохая инфа)
AllStudio designerwagon 1 year ago
Почему пустоты меж картинами и в самих рамках?
Денис Горелов 1 year ago
Присутствует излишний перечень LI он и дает меж картинами излишний отступ -
FilatovAleksey 1 year ago
Очень высококачественный материал. Спасибо большущее!
Emin Mammadov 1 year ago
весьма классно вышло даже не нужно использовать javascript
Uner 3 months ago
Есть ли разность в производительности в этом случае если мастерить на css и на js. Если конечно, то что будет резвее?
Денис Горелов 1 year ago
Да, соглашусь, на данный момент на CSS можно создавать крутые вещи не то что ранее.
Fantazy Eliott 1 year ago
Спасибо большущее!
MULTY Boy 1 year ago
еще! еще! еще!! еще!!!!!
Аристарх Літвак 1 year ago
DWS TV, желал справиться, будто сделать анимационный поле из фото, то-кушать фото должны сменять товарищ друга спустя нескольких секунд(которые можно будет выставить)
MULTY Boy 1 year ago
DWS TV изволь, сэр! Помогите новеньким достигнуть мечту! изволь сделайте видео!👨
Денис Горелов 1 year ago
В принципе это все реализуется при помощи JavaScript, однако этак же может быть и на чистом CSS воплотить. При помощи анимации CSS можно мастерить чуток ли не ролики. Алгоритм прост, для каждого изображения сделайте свою анимацию главных кадров, потом сделайте временной промежуток прозрачности перехода каждого кадра.
Сергей Ильченко 1 year ago
на данный момент уже хоть какой браузер поддерживает flex) я пользую уже храбро по всему веб-сайту) аккордеон неплох))
Денис Горелов 1 year ago
Классно, рад что задание понадобился.
Anastasiya Slyusar 1 year ago
Действительно здорово!
funny Pafee 1 year ago
это точно не для новичков.жалк
Alisher Top Secret 1 year ago
ты попросту молодчина. я изучаю интернет разработку и всюду ищу информацию к примеру в ютубе и самое увлекательное, информативное и в конце концов приятные уроки у тебя. благодарю для тебя. больше таких уроков благодарю
Александр Недев 1 year ago
Круто, благодарю
Денис Горелов 1 year ago
С радостью, однако кушать текущие проекты, труд, семейство, сами осознаете. По способности возникновения времени записываю видео, на данный момент в планах по JS сбросить серию уроков будто с нуля его освоить. Это будет намного интересней чем CSS, ну-ка в принципе увидите сами ).
Александр Недев 1 year ago
Делайте больше видео по css. Я уже не нехорошо знаю материал css и охото выучиться сочетать его в такие итересные проекты, жду нового видео
covboy men 1 year ago
Нравится ваше творчество, продолжайте!!! Сделал все по аннотации, однако что если размеры рисунки не совпадают товарищ с другом, будто совпадают у вас аккордеоне?
Александр Недев 1 year ago
Зайдите в фотошоп и подгоните их под однообразный размер
Денис Горелов 1 year ago
Большое благодарю за комментарий. Под различные рисунки необходимо дописывать стили, однако все рекомендую для слайдеров заливать рисунки 1-го размера, этак будто в любом случае необходимо блюсти пропорциональность.
Алексей Петров 1 year ago
Вообще огнь.
sea-lucky 7 1 year ago
привет. видос зачетный. продолжай в том же духе! Подскажи при моментальном отображении в браузере конфигураций, это плагин для браузера либо шторма стоит? Или ты какой-то собиратель используешь?
sea-lucky 7 1 year ago
DWS TV благодарю! фурроров!
Денис Горелов 1 year ago
В PhpStorm стоит LiveEdit, а в браузере JetBrains.
sea-lucky 7 1 year ago
DWS TV а подскажите какие конкретно плагины стоят?
Денис Горелов 1 year ago
Здравствуйте, благодарю за комментарий. Плагин стоит и в браузере, и в PhpStorm.
Микола КАмошенков 1 year ago
Очень крутые и достойные внимания видео уроки!Свежая и весьма нужная иформация!Продолжай в том же духе фурроров і благоденствия для тебя)))
Вадим Аюрзанаев 1 year ago
ты наилучший!)
Хофиз Хабибов 1 year ago
Пожалуйста если сможете сделайте видео задание на псевдаклассов весьма прощу!!!
Дима Артюхов 4 months ago
Также хотелось бы побольше выяснить про box-sizing ))
Денис Горелов 1 year ago
ок, непременно включу в план уроков.
Хофиз Хабибов 1 year ago
Спасибо огромное за потрясающее видео)) ты супер
вова Губарев 1 year ago
Отличные уроки, благодарю для тебя, благоденствие каналу, подписка)))))
Iskandar Mukhitdinov 1 year ago
Каким текстовым редактором вы пользуетесь? Отдельно желаю поблагодарить вас за ваши недлинные, однако весьма информативные видео.
Денис Горелов 1 year ago
Спасибо за признательность, IDE редактор PhpStorm.
Sergio ™ 1 year ago
Спасибо весьма круто,однако сделай изволь его адаптивним чтобы на телефоне картина откривалась стопроцентно На компьютере все нормально а вот лишь сдвинаеш окно где то на 600px при наведении на картину она стопроцентно не откривается
Sergio ™ 1 year ago
Спасибо,буду ожидать
Денис Горелов 1 year ago
Ок, будто вариант позже запишу добавочный задание по данному видео.
Sergio ™ 1 year ago
Просто сделай доля 2 к етому уроку,буду признателен
Улар Искаков 1 year ago
благодарю. Буду советовать друзьям твой канал.
Улар Искаков 1 year ago
а что если не закачивать архив, а самому сверстать?
Денис Горелов 1 year ago
Так это было бы совершенно, многие не желают заморачиваться и закачивают уже готовое.
Степан Павликівський 1 year ago
класно виглядає буду пробувати !!!
albert nyshanbaev 1 year ago
всё весьма круто братан!!!
Cindorqw 1 year ago
благодарю
Ashot Hovhannisyan 1 year ago
Respect!!
Алесандр Сысоев 1 year ago
Красавчек,я не знаю сделаешь ты либо дудки если я попрошу,однако думаю многим бы хотелось такое увидить ,применение Toggle в javascript (jQuery) Я раскрывающееся меню сделал,однако многоступенчатое не выходит чего то
Диванный Эксперт 1 year ago
может уже и сделали видео ответ. однако, наверняка, необходимо тоглу более точно указывать селектор. аля отдельного класса либо вложенности. так как не далековато от основы, другого варианта ещё не вижу)
Денис Горелов 1 year ago
Так это новейшую рубрику необходимо обнаруживать по JS. Такая мысля кушать, может быть в скором будущем 1-ый задание по твоей просьбе.
Luckymvm 1 year ago
Зачем -webkit, -moz, -o и т.д. ? ведь эти строчки же ненужны
Денис Горелов 1 year ago
Эти строчки не неотклонимы и можно их не использовать. Предназначены для старенькых версий браузеров чтоб показать текущий манера. -webkit /* Для Chrome и Safari */ -moz /* Для старенькых Fx (3.6 -15) */ -o /* Для Opera (11.1 - 12.0) */ -ms /* Для IE 10*/
Andrew Vlasoff 1 year ago
После слов что это типо тривиально , понимаешь будто ещё мне далековато.((( Отличное видео. Спасибо!
REE AKT 1 year ago
а кнопка применить это какая кнопка?
Олег Рыбчен 1 year ago
что то,что это платное.шторм функциональнее.
Mick Buyanovsky 1 year ago
Мне больше Sublime нравится, PhpStorm массивный 😏 ИМХО
Денис Горелов 1 year ago
В PhpStorm кнопка (TAB), там в принципе можно и другую назначить.
Ivan Shiryaev 1 year ago
Интересная информация. Лайкосик!!! Ждем новое.
Yura Sachenko 1 year ago
Отличный контент! Бомба!
Денис Горелов 1 year ago
Спасибо, рад что понравилось.
ART Creative 1 year ago
Познавательное виде)