Полезная информация Адаптивные эффекты Адаптивные вёрстки Адаптивные кнопки Адаптивные меню Бесплатные иконки Адаптивные формы Адаптивное видео Адаптивное аудио Адаптивные таблицы Адаптивные слайдеры Бесплатные текстуры Адаптивные панели Модальные окна Адаптивные галереи Разделители CSS Адаптивные часы Новогодний сайт Градиенты CSS Эффекты CSS Тени текста CSS Адаптивные элементы Scroll эффекты Веб инструменты Стили для элементов Индикаторы и прелоадеры Стили для bootstrap Скрипты для сайта Скрипты для uCoz CSS3 Скрипты Canvas Микроразметка Плагины для Bootstrap

Адаптивная книжная полка · Bootstrap

Адаптивный элемент дизайна в виде книжной полки работающий при подключенном плагине bootstrap, сделано основное описание подкреплённое живыми примерами.

Книжная полка из 6 книг для вёрстки bootstrap

Можно установить неограниченное количество полок, при переходе на малое разрешение полка разделяется на 3 книги.

► Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

<style>
.book {
padding: 15px 0 0 0;
margin:auto;
}
.book-img>.book-link:before {
content: '';
display: block;
width: 80%;
height: 1em;
background: rgba(0,0,0,.85);
border-radius: 50%;
position: absolute;
bottom:-10px;
-webkit-filter: blur(5px);
filter: blur(5px);
z-index:-5;
}
.shelf {
border-bottom: 30px solid #a5a5a5;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -15px;
z-index: -10;
}
.shelf:after {
content: '';
background: #333333;
height: 20px;
width: calc(100% + 40px);
position: absolute;
top: 30px;
left: 0;
right: 0;
z-index: 1;
margin: 0 -20px;
}
</style>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf"></div>

После каждой 3 книги в коде идёт разделение кодом для дисплеев с малыми размерами.

<div class="col-xs-12 shelf hidden-md hidden-lg"></div>

Каждая 6 книга имеет разделяющий код в конце.

<div class="col-xs-12 shelf"></div>

Действующий пример из 2 полок, при желании можно вносить свои изменения в код.

► Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

<style>
.book {
padding: 15px 0 0 0;
margin:auto;
}
.book-img>.book-link:before {
content: '';
display: block;
width: 80%;
height: 1em;
background: rgba(0,0,0,.85);
border-radius: 50%;
position: absolute;
bottom:-10px;
-webkit-filter: blur(5px);
filter: blur(5px);
z-index:-5;
}
.shelf {
border-bottom: 30px solid #a5a5a5;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -15px;
z-index: -10;
}
.shelf:after {
content: '';
background: #333333;
height: 20px;
width: calc(100% + 40px);
position: absolute;
top: 30px;
left: 0;
right: 0;
z-index: 1;
margin: 0 -20px;
}
</style>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf"></div>

<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf hidden-md hidden-lg"></div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-4 col-md-2 book-img">
<a href="" class="book-link"><img src="http://atmpl.ru/design/elements/2015/bookshelf/bookshelf-bootstrap.jpg" class="img-responsive book"></a>
</div>
<div class="col-xs-12 shelf"></div>

Цвет самой полки можно изменить на своё усмотрение.

a:before {: background: rgba(0,0,0,.85); - Верхняя часть полки
.shelf:after {: height: 500px; - Тарцевая часть полки

Демонстрация примера на внешнем ресурсе.

CODEPEN

1
2
3
4
5

Рейтинг: 5.0/5 из 2

Добавлено	Автор	Ник	Источник	Просмотров	Комментариев	Теги
29-08-2015	Михаил Меренков	aTmpl	©	1921	0	для bootstrap, адаптивный элемент