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

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

ОБСУЖДЕНИЕ

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

Аккордеон изображений
Просмотров: 3152  Скачан: 153 раз  Комментариев в теме: 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" />
Материалы по теме:

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....
Интересные публикации:

In Admin PanelIn Admin Panel

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......

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

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....
  • Текущий 2.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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