Автор

05 04.2013
Стильный аккордеон с контентом на CSS3

Стильный аккордеон с контентом на CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

Данный пример основан на Futurico UI Pro от Владимира Кудинова. Он будет работать во всех браузерах и устройствах, которые поддерживают селектор :target. Для начала мы рассмотрим структуру HTML.


<div class="accordion">
<div id="tab-1"><a class="tab" href="#tab-1">Первая вкладка</a>
<div class="content">Содержание</div>
</div>
<div id="tab-2"><a class="tab" href="#tab-2">Вторая вкладка</a>
<div class="content">Содержание</div>
</div>
<div id="tab-3"><a class="tab" href="#tab-3">Третья вкладка</a>
<div class="content">Содержание</div>
</div>
</div>

 

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

 

 

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

.accordion,.accordion div,.accordion h1,.accordion p,.accordion a,.accordionimg,.accordion span,.accordion em,.accordion ul,.accordion li {
margin: 0;
padding: 0;
border: none;
}

 


Затем мы зададим фиксированную ширину равную 300px (290px + 5px левый отступ + правый padding 5px), цвет фона, закругленные углы и тени.

.accordion {
width: 290px;
padding: 1px 5px 5px 5px;
background: #141517;

-webkit-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
box-shadow: 0px 1px 0px rgba(255,255,255, .05);

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

 

Теперь давайте зададим стили для заголовка вкладки, по умолчанию, с некоторыми CSS3 градиентами, тенями, закругленными углами и некоторыми базовами свойствами CSS:

.accordion .tab {
display: block;
height: 35px;
margin-top: 4px;
padding-left: 20px;
font: bold 12px/35px Arial, sans-serif;
text-decoration: none;
color: #eee;

text-shadow: 1px 1px 0px rgba(0,0,0, .2);

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

background: #6c6e74;
background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74),color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);

-webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255,.1);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
}

 

Затем нам нужно добавить стили для hover и active. Мы изменим текст и цвета градиент на зеленый.

.accordion .tab:hover,
 .accordion div:target .tab {
 color: #2b3b06;

text-shadow: 0px 1px 0px rgba(255,255,255, .15);

background: #a5cd4e;
 background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e),color-stop(100%,#6b8f1a));
 background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255,.45);
 -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
 box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
 }

 

Вначале мы будем скрывать все содержание и показывать его только тогда, когда вы нажимаете на вкладку. Чтобы скрыть его мы будем использовать свойство display:none и display:block; для открытого блока.

 

 

Мы также добавим анимацию при раскрытии, чтобы он выглядел лучше, и высоту 100px для открытого блока.

.accordion div .content {
display: none;
margin: 5px 0;
}

.accordion div:target .content {
display: block;
}

.accordion > div {
height: 40px;
overflow: hidden;

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.accordion > div:target {
height: 100px;
}

 

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

<div class="content"><img src="img/post-img-1.png" alt="" />
<h1>Большой слон в городе</h1>
<span>5 дней назад</span> <em class="bullet"></em> <span>17 комментариев</span>

Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts cutting-edge restaurants and boutiques.
<ul>
	<li><img src="img/thumb-1.png" alt="" /></li>
	<li><img src="img/thumb-2.png" alt="" /></li>
	<li><img src="img/thumb-3.png" alt="" /></li>
	<li><img src="img/thumb-3.png" alt="" /></li>
</ul>
</div>

 

Стили самые простые и мы не будем останавливаться подробно на их описании.

.accordion .content h1 {
color: white;
font: 18px/32px Arial, sans-serif;
}

.accordion .content p {
margin: 10px 0;
color: white;
font: 11px/16px Arial, sans-serif;
}

.accordion .content span {
font: italic 11px/12px Georgia, Arial, sans-serif;
color: #4f4f4f;
}

.accordion .content em.bullet {
width: 5px;
height: 5px;
margin: 0 5px;
background: #6b8f1a;
display: inline-block;

-webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
-moz-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.accordion .content ul li {
list-style: none;
float: left;
margin: 5px 10px 5px 0;
}

.accordion .content img {
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
-moz-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
box-shadow: 2px 2px 6px rgba(0,0,0, .5);
}

 

Изменим высоту div-а на 360px.

.accordion > div:target {
height: 360px;
}

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

23 04.2013
Стильный аккордеон с контентом на CSS3

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


19 03.2013
Стильный аккордеон с контентом на CSS3

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


06 06.2017
Стильный аккордеон с контентом на CSS3

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


21 04.2013
Стильный аккордеон с контентом на CSS3

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close