Содержание

Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут

В данном уроке разберем аккордеон СЛАЙДЕР на чистом CSS. Наводя на картинку, она раскрывается, а предыдущая сжимается. Ко всему этому блок у нас резиновый, сжимая и растягивая он центруется на страничке, что дает его простату внедрения на любой сайт.

See the Pen yPRJmr by Denis (@Dwstroy) on CodePen.

В уроке задействуем:

  • display: flex;
  • используем transition;
  • и скроем картинки за пределами блока при помощи overflow:hidden;

Делаем основной каркас, где будет размещаться картинки. Как всегда к уроку прилагаю архив с текущими данными. Скачиваете к себе, переносите в среду разработки, открываем Index файл и приступаем к описанию каркаса.

Создаем блок DIV с классом .dws-wrapper, который будет являться нашей оберткой.

В нутрии его размещаем UL с классом .accordion, далее списки LI в количестве 7 штук и в нутрии них располагаем картинки.

div.dws-wrapper>ul.accordion>li*7>img[src=img/bg1.jpg]

Прописываем путь к разным картинкам, как видим, они отобразились на страничке и теперь можно переходить к описанию стилей.


CSS стили

Открываем styles.css, верхней строкой задает задний фон к странице. Cделаем отступ, и разберем, какие есть варианты реализации данного аккордеона. Как вариант можно отфлотить списки LI, но не всегда такой вариант нам подойдет. Давайте лучше покажу на примере по чему. 

Для этого отбираем ul.accordion li и пропишем им float:left;, зададим ширину в 80px, и при помощи overflow: hidden; скроем все лишнее. Данный способ хорош если страничка фиксированной ширины или адаптированная медиа запросами, так как если сейчас будем ее сжимать, то блоки с картинками будут съезжать в низ. 

ul.accordion li{
 float:left;
 width: 80px;
 overflow: hidden;
}

Для того что бы это избежать можно задать фиксированную ширину блоку UL в 600пик.

ul.accordion {
 width: 600px;
}

Теперь списки у нас  не съезжают, но и появляется полоса прокрутки. Можно конечно этого избежать при помощи дополнительного описания кода, но зачем ломать голову и утруждать себя лишней писаниной, когда у нас есть замечательное свойство display: flex;.

Удалим все и напишем повторно с помощью этого свойства.

Для начала присвоим обертке максимальный размер в 650 пик. и отцентруем блок по середине.

.dws-wrapper {
 max-width: 650px;
 margin: 0 auto;
}

Затем в место ширины которую мы до этого задавали блоку UL пропишем display: flex;.

Спискам LI устанавливаем ширину в свернутом виде width: 50px; и скрываем элементы, которые выходят за пределы блока при помощи overflow: hidden; . Теперь сжимая экран, они у нас ужимаются и растягиваются. Списки стали резиновыми, и теперь отцентруем их посередине экрана при помощи justify-content: center; , а сверху сделаем небольшой отступ и уберем padding в ноль.

ul.accordion{
 display: flex;
 justify-content: center;
 margin-top: 150px;
 padding: 0;
}

Установим ширину картинок в 300 пик.

ul.accordion img{
 width: 300px;
}

Перейдем к спискам, и пропишем им стили.

Зададим отступы padding: 1px 1px 0;, при наведении отобразим курсор cursor:pointer;, сделаем списки блочными элементами display:block; и добавим тени при помощи box-shadow:1px 3px 15px #7e807e;.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 }

Анимируем отображение блоков

Далее опишем стили при наведении, для этого устанавливаем ширину картинки в 300 пик., изменяем тень. Задаем, анимирование растяжения при помощи transition в  одну секунду.

ul. accordion li:hover{
 width:300px;
 -moz-box-shadow:1px 3px 15px #36c5fa;
 -webkit-box-shadow:1px 3px 15px #36c5fa;
 box-shadow:1px 5px 15px #36c5fa;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}

Что бы не схлопывалась картинка, когда убираем курсор, присвоим списку transition, но теперь зададим продолжительность в 1.5 секунды, что бы картинка сживалась немного медленнее.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 -webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -ms-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;
}

Зафиксируем в развернутом состоянии изображение посередине, для этого отбираем центральный элемент списка при помощи :nth-child(4) и назначаем ему ширину в 300 пик. 

ul.accordion li:nth-child(4){
 width: 300px;
}

Далее нужно сделать так, что бы при наведении на другие элементы, данная картинка сворачивалась. Для этого просто указываем текущему списку при наведении 50 пик.

ul.accordion:hover li:nth-child(4){
 width: 50px;
}

И за тем, нужно полностью разворачивать центральную картинку если она была свернутой при наведении на нее. Отбираем картинку и задаем ей ширину в 300 пик.

ul.accordion li:nth-child(4):hover{
 width:300px;
}

В принципе и все, получилась довольно простой и симпатичный Аккордеон СЛАЙДЕР на чистом CSS. Как видите код простой, всего несколько строк и мы получаем интересный эффект при наведении. К тому же блоки резиновая и легко вписывается в страничку сайта. 


Кому понравилось видео, пиши комментарий, делитесь видео с друзьями в социальных сетях.

Оставить комментарий:

Слайдер на CSS3 (без JS*), подстраивающийся под разрешение — CSS-LIVE

Великолепнейший слайдер на чистом CSS сделал Йэн Хансон. Уникальность этого слайдера в том, что, во-первых, такие вещи, ранее делались только на JavaScript, а во-вторых, для чистого CSS, он чрезмерно функционален. В частности он может менять свои размеры, при разных разрешений экрана, ну и конечно же соответствет настоящему слайдеру, плавно меняя свои кадры, при нажатии на кнопочки или нажатию на специальные стрелочки по бокам самого слайдера.

В общем что говорить, это нужно увидеть!

Создан Йэном Ханссоном (@teapoted)

Рисунки Брендана Забараускаса (@bjzaba_).

Иконки из набора iconSweets.

Поддержка браузеров:

Лучшая по тестам: Firefox (производительность плавных переходов)
Полная поддержка: Chrome, Firefox, Opera, Safari (последние версии)
Частичная поддержка: IE9 (работает, но не поддерживает плавные переходы)

*JS не нужен для функциональности самого слайдера, но есть 1 фикс для совместимости с его использованием

Устройства на iOS не обрабатывают label-ы как надо. В смысле когда кликаешь на label, он должен активировать объект, на который указывает его атрибут for. Я добавил яваскриптовый фикс для этого. Я мог бы переделать всё решение с использованием :target вместо :checked, что тоже должно было бы «починить» проблему, но это значило бы, что я мог бы использовать лишь 1 слайдер на странице. Я еще покопаюсь с этим.

Страничку без JS-фикса для iOS можно посмотреть здесь.

Как это работает?

Слайдер во многом похож на все JS-слайдеры. Его контентные области (статьи) «плавают» рядом друг с другом. Излишки скрываются с помощью overflow. Потом мы можем анимировать margin внутреннего дива, так, если у нас 5 статей, левый маргин -100% покажет нам вторую статью.

Чтобы сохранить наш выбор, мы используем радиокнопки. Как отмечено выше, можно использовать :target и ссылки с якорями, но это не дает полной замены яваскрипту, т.к. можно обработать лишь одно действие за раз, клики запоминаются в истории браузера и загаживают ее (кнопка «назад» браузера будет долго перематывать слайдер обратно), к тому же такое уже делали раньше.

Мы ставим радиокнопки в самом верху, так что, когда они в состоянии :checked, мы можем использовать обобщенный соседский селектор (~) для переключения слайдера.

 #slide1:checked ~ #slides .inner { margin-left:0; }

 #slide2:checked ~ #slides .inner { margin-left:-100%; }

 #slide3:checked ~ #slides .inner { margin-left:-200%; }

 #slide4:checked ~ #slides .inner { margin-left:-300%; }

 #slide5:checked ~ #slides .inner { margin-left:-400%; }

Это вся функциональная часть CSS, остальное служит лишь для украшения и анимации.

Создано Йэном Ханссоном (@teapoted), февраль 2012.

Ссылка на оригинал

Скачать архив

P.S. Это тоже может быть интересно:
  • CSS

слайдер без jQuery, слайдер изображений на чистом CSS

Создавайте красивые слайдеры изображений полностью на CSS. Никакого jQuery, никакого JavaScript, никаких значков изображений, никакого кода! Он невероятно быстрый, легкий, отзывчивый и готов к работе с сетчаткой. Работает на всех устройствах и браузерах. Доступны эффекты KenBurns, Slide, Fade, Zoom и некоторые плоские скины (скоро будет больше). Загрузите бесплатный генератор слайдеров для Windows и Mac прямо сейчас!

Скачать для Win Загрузить для Mac

Живые демонстрации

Забудьте об использовании JavaScript — этот слайдер изображений создан только с помощью CSS и HTML

Работает на всех устройствах и в современных браузерах, включая старые IE (с необязательным резервным js)

Плавная анимация с аппаратным ускорением работает намного лучше, чем jQuery, особенно на мобильных устройствах

Все ползунки имеют векторный шрифт значков, и они идеально подходят для дисплеев с высоким разрешением

Больше никаких тяжелых и медленных jQuery, содержащих тонны неиспользуемого кода

cssSlider не использует изображения для стилизации, поэтому цвет кожи можно легко изменить

Адаптивный слайдер изображений идеально вписывается в вашу страницу, независимо от размера экрана

Создайте свой слайдер за считанные секунды с помощью визуального конструктора

Не-jQuery Слайд-шоу?

Кажется, ползунки есть везде. И, конечно, вы можете найти множество слайдеров изображений, которые позволяют вам показывать фотографии и изображения на вашем простом конструкторе веб-сайтов, но все они довольно просты, с теми же требованиями jQuery и Javascript. Зачем таскать с собой тяжелые и перегруженные библиотеки, когда все можно сделать с помощью понятного и легкого CSS? cssSlider — это единственный слайдер на чистом CSS, который предлагает сочетание потрясающих эффектов CSS3, готовых скинов, иконочных шрифтов, полнофункциональных элементов управления навигацией и создания слайдера без программирования.

Впечатляющие переходы

В cssSlider реализованы удивительные переходы с аппаратным ускорением на чистом CSS3, которые впечатлят ваших пользователей и помогут сосредоточить их внимание на вашем сайте.

Красивые темы

Выберите скины, цвета и эффекты из удивительной коллекции, которая входит в комплект и готова к работе.

Чистый CSS

cssSlider полностью основан на CSS (не Flash, не jQuery, не Javascript), поэтому он будет работать в любом браузере без каких-либо дополнительных плагинов.

Mobile

cssSlider полностью совместим со всеми мобильными устройствами и будет работать так же хорошо на вашем iPhone, iPad, Android, как и на вашем домашнем компьютере.

Live Preview

Мгновенно просматривайте слайдер и любые изменения, которые вы делаете в области предварительного просмотра. Прежде чем выйти в эфир, убедитесь, что все идет именно так, как вы хотите!

Retina-ready

Стрелки ползунка назад/вперед и другие элементы управления имеют векторный шрифт значков, что делает их независимыми от разрешения и идеально подходят для дисплеев Retina.

Простота в использовании

Простота в использовании: вы просто назначаете различные скины, цвета и эффекты из библиотеки на свою карусель начальной загрузки. Абсолютно никаких знаний в области программирования не требуется. Вам не придется писать ни строчки кода!

Адаптивный дизайн

Пользователи не всегда посещают ваш сайт, не выходя из рабочего стола своего домашнего офиса. Многие используют смартфоны, планшеты, ноутбуки или одно из других бесчисленных устройств. Этот мощный, отзывчивый слайдер галереи прекрасно масштабируется под любой размер экрана, гарантируя, что ваш сайт будет отлично выглядеть на любом устройстве!

Широкие возможности настройки

Запустите cssSlider maker в двух разных режимах конфигурации: базовом и расширенном. Выберите один из нескольких встроенных стилей макета, чтобы все было по-настоящему просто, или погрузитесь в редактирование конфигурации любым удобным для вас способом для полного контроля.

Автоматическая обрезка и изменение размера

Нет необходимости в отдельных программах для редактирования фотографий. cssSlider автоматически обрезает ваши изображения и изменяет их размер в соответствии с указанным вами размером!

Комбинации цветов

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

Перетаскивание

Благодаря конструктору веб-сайтов с функцией перетаскивания cssSlider не может быть проще в использовании! Добавляйте и удаляйте изображения, изменяйте порядок, встраивайте ползунки за считанные секунды.

Оптимизация для SEO

cssSlider создан с использованием простого HTML5. Он выглядит фантастически, и поисковые системы все еще могут эффективно его сканировать. Это позволяет вам одновременно радовать своих посетителей и поисковые системы!

Дополнительные функции слайд-шоу

Существует множество настроек, которые вы можете настроить, включая красивые эффекты перехода и красочные плоские скины, предыдущую/следующую навигацию, маркеры с миниатюрами, автовоспроизведение, паузу/стоп, полную ширину и другие параметры.

Легкий и совместимый

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

Бесплатная загрузка для Windows и Mac

© 2019 cssSlider — Все права защищены.

10 Слайдер/слайд-шоу на чистом CSS — Thecuriouscorp

Есть удивительные дизайны для слайд-шоу на CSS. Многие слайдеры CSS созданы вместе с JavaScript для улучшения его функций. Но иногда вам может понадобиться простой и легкий слайдер, созданный с использованием чистого HTML и CSS. Без JavaScript он становится очень легким и быстрее загружается в браузерах.

Имея в виду, что мы ищем легкий слайдер или слайд-шоу на чистом CSS, я создал список удивительных дизайнов слайдеров на чистом CSS, найденных в Интернете.

Вы можете использовать любой слайдер в своих проектах веб-разработки. Вы также можете вдохновиться ниже и создать свой собственный слайдер, используя HTML и CSS.

1. Простой слайдер Pure CSS

См. слайдер Pen Pure CSS от Damian Drygiel (@drygiel) на CodePen.

Автор

Дамиан Драйгель

Ссылка

Демо | Загрузить

Сделано с

Мопс / Меньше

О коде

Это очень простой CSS-слайдер с эффектом упругой анимации при переходе к следующему слайду. Вы можете перейти на следующую страницу, используя следующую стрелку или маркеры страниц в нижней части самого ползунка.

2. Автоматический слайдер следующей страницы

См. содержимое слайдера Pen Pure CSS от John Louie Biñas (@johnlouie04) на CodePen.

Автор

John Louie Biñas

Ссылка

Демонстрация и загрузка

Сделано с

HTML / CSS

О коде

Это простой CSS-слайдер с автоматической сменой слайдов без участия пользователя.

3. Слайдер с текстовой анимацией

См. слайдер Pen Pure CSS3 от Aladin Bensassi (@Eliteware) на CodePen.

Автор

Аладин Бенсасси

Ссылка

Демо | Скачать

Сделано с

HTML / CSS

О коде

Этот слайдер имеет анимацию для текстов при переходе к следующему слайду. Он работает автоматически без каких-либо щелчков.

4. Слайд-шоу с эффектом затухания

См. слайдер Pen Minimal pure css от Элтона Камами (@eltonkamami) на CodePen.

Автор

Элтон Камами

Ссылка

Демо и загрузка

Сделано с

HTML / SCSS

О коде

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

5. Горизонтальный слайдер CSS с вкладками

См. Горизонтальный слайд Pen Pure CSS от Дэвида Коннера (@davidicus) на CodePen.

Автор

Дэвид Коннер

Ссылка

Демонстрация и загрузка

Сделано с

HTML/SCSS

О коде

Слайдер можно создать с помощью вкладок . В этом слайд-шоу есть вкладки для каждого слайда и текстовая анимация для заголовков.

6. Простой слайдер изображений

См. CSS-слайдер Pen Pure от Камила (@KamilDyrek) на CodePen.

Автор

Камиль

Ссылка

Демонстрация и загрузка

Сделано с помощью

HTML / CSS

О коде

Это очень простое слайд-шоу изображений, которое переходит к следующий слайд при нажатии на позиции маркеров.

7. Слайдер Pure CSS с пользовательскими эффектами

См. слайдер Pen Pure css с пользовательскими эффектами Николая Таланова (@suez) на CodePen.

Автор

Николай Таланов

Ссылка

Демонстрация и загрузка

Сделано с

HTML/SCSS

О коде

Несколько пользовательских анимаций доступны для каждый слайд в этом слайдере.

8. Ползунок с кнопками «Далее»/«Назад»

См. Pen CSS Fadeshow Александра Эрландссона (@alexerlandsson) на CodePen.

Автор

Александр Эрландссон

Ссылка

Демо и загрузка

Сделано с помощью

HTML / SCSS

О коде

Кнопки перехода к следующему и предыдущему слайдам доступны в этом слайд-шоу на чистом CSS. Кнопки автоматически скрываются, когда в области нет курсора.

9. Галерея слайд-шоу

См. галерею слайд-шоу Pen Pure CSS от Roko C. Buljan (@rokobuljan) на CodePen.

Author

Roko C. Buljan

Ссылка

Демонстрация и загрузка

Сделано с

HTML / CSS

О коде

Это простое слайд-шоу с кнопками «Далее» и «Назад» с анимацией слайдов.

No related posts.