background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Аккордеон изображений с помощью css3

Аккордеон изображений
Просмотров: 2914  Скачан: 135 раз  Комментариев в теме: 0

Красивый горизонтальный аккордеон для вывода картинок (изображений) на сайте. Идея заключается в том, что бы собрать изображения воедино и вывести их на сайте с эффектной анимацией, в данном примере аккордеон справляется с этой задачей на отлично, такой подход вывода картинок всегда оправдывает себя.

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

В данном примере аккордеон изображений реализован на CSS3, это значит, что во всех современных браузерах аккордеон будет отображается отлично, в тех браузерах которые не поддерживают CSS3, 100% работать аккордеон не будет.

Шаг 1 - создание разметки

 

HTML

<div class="ia-container">				
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <input type="radio" name="radio-set" checked="checked"/>
        <figcaption><span>True Colors</span></figcaption>						
        <figure>
            <img src="images/2.jpg" alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>Honest Light</span></figcaption>							
            <figure>
                <img src="images/3.jpg" alt="image03" />
                <input type="radio" name="radio-set" />
                <figcaption><span>Silent Serenity</span></figcaption>								
                <figure>
                    <img src="images/4.jpg" alt="image04" />
                    <input type="radio" name="radio-set" />
                    <figcaption><span>Warm Welcome</span></figcaption>									
                    <figure>
                        <img src="images/5.jpg" alt="image05" />
                        <input type="radio" name="radio-set" />
                        <figcaption><span>Sensible Magic</span></figcaption>										
                        <figure>
                            <img src="images/6.jpg" alt="image06" />
                            <input type="radio" name="radio-set" />
                            <figcaption><span>Lovely Midnight</span></figcaption>								
                            <figure>
                                <img src="images/7.jpg" alt="image07" />
                                <input type="radio" name="radio-set" />
                                <figcaption><span>Illuminated Darkness</span></figcaption>											
                                <figure>
                                    <img src="images/8.jpg" alt="image08" />
                                    <input id="ia-selector-last" type="radio" name="radio-set" />
                                    <figcaption><span>Happy Child</span></figcaption>
                                </figure>												
                            </figure>
                        </figure>	
                     </figure>	
                </figure>
            </figure>
        </figure>
    </figure>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
Материалы по теме:

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...
Интересные публикации:

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....
  • Текущий 2.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.4/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить