Веб-дизайн и верстка. 3 курс. Лабораторное занятие 8. Bootstrap-верстка flip-карт
Вам нужно создать две flip-карты с
фото на фронтальной панели и описанием на задней панели и разместить их
горизонтально с помощью bootstrap-верстки.
Вам потребуются:
I) Bootstrap-библиотека стилей и
Font Awesome;
II) Параметры стилей в CSS;
III) JavaScript-библиотека;
IV) Динамический сценарий
JavaScript;
V) HTML.
Оба фото для flip-карт сохраните в нужном размере
и загрузите в репозиторий
I) Bootstrap-библиотека стилей и
Font Awesome
1) Библиотеку можно взять здесь и
подключить:
https://sites.google.com/site/konoplevmedia/bootstrapmin.css
2) Font Awesome необходимо встроить
используя
ссылку: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
II) Параметры стилей в CSS
3) В универсальном селекторе
указываем общие параметры блока:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
4) В селекторе body указываем
отступы. Также здесь необходимо указать фон страницы, на котором будут располагаться
flip-карты:
body {
padding-top: 50px;
padding-bottom: 20px;
}
5) Теперь задаем классы навигации
по кнопкам flip-карт:
.btn-flip-extend, .btn-flip:hover, .btn-flip:focus {
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
opacity: 1;
}
.btn-flip {
opacity: 0.8;
color: #666666;
background-color: transparent;
}
6) Создаем класс контейнера карты.
Обратите внимание, что его высота равна высоте всей вашей карты:
.card-container {
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 30px;
width: 100%;
height: 320px;
}
7) Добавляем классы движения
flip-карт:
.card-container:not(.manual-flip):hover .front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container:not(.manual-flip):hover .back {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card-container.hover.manual-flip .front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container.hover.manual-flip .back {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
8) Создаем класс самой карты с
параметрами перехода:
.card {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885,
0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32,
1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175,
0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
background: none repeat scroll 0 0 #fff;
color: #444444;
max-width: 412px;
margin: 0 auto;
}
9) Теперь создаем класс класса для
обложки flip-карт:
.card .cover {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
height: 320px;
overflow: hidden;
z-index: -2;
}
10) Поскольку обложка у нас будет в
виде фото, нужно создать класс класса селектора, ориентируясь на пункт 9, с
параметрами ширины и высоты. Ширину можно указать в 100%, высоту в пикселях -
она совпадает с указанной в пункте 6. Имя селектора можно использовать
стандартное для фото: img
11) Создаем класс класса для
контента:
.card .content {
background-color: transparent;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 10px 20px 20px;
}
12) Для основного блока:
.card .content .main {
min-height: 140px;
}
13) Для названия карты:
.card .name {
font-size: 32px;
text-align: center;
}
14) Для заголовка в названии карты.
Здесь укажите цвет шрифта заголовка:
.card h3 {
margin-top: -180px;
font-weight: 300;
line-height: 20px;
}
15) Футер flip-карт:
.card .footer {
margin-top: -80px;
text-align: center;
}
16) Кнопка футера flip-карт с
фронтальной и с обратной стороны:
.card .footer .btn-simple {
margin-top: -6px;
}
.back .btn-simple {
position: absolute;
left: 0;
bottom: 4px;
}
17) Текст с обратной стороны. В
качестве фона можно применить линейный градиент. Используйте свои цвета:
.card .header {
padding: 55px 20px;
background: linear-gradient(to top, #FF9314, #FF69B4, #FFC0CB);
color: black;
font-size: 11pt;
}
18) Пространство для текста с
обратной стороны:
.card .back .content .main {
height: 165px;
}
19) Класс фронтальной части
flip-карт с трансформацией и размерами:
.front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885,
0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32,
1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175,
0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
background-color: #fff;
width: 100%;
height: 320px;
top: 0;
left: 0;
z-index: 2;
}
20) То же самое для обратной
стороны flip-карт:
.back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885,
0.32, 1.275);
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32,
1.275);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175,
0.885, 0.32, 1.275);
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
background-color: #fff;
width: 100%;
height: 320px;
top: 0;
left: 0;
}
III) JavaScript-библиотека
21) Библиотеку можно взять здесь и
встроить через
репозиторий: https://sites.google.com/site/konoplevmedia/jquery213.js
IV) Динамический сценарий
JavaScript
22) Мы используем функцию
"вращать карту", совмещая ее с классом контейнера карты и класса кнопки:
function rotateCard(btn) {
var $card = $(btn).closest('.card-container');
console.log($card);
if ($card.hasClass('hover')) {
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
V) HTML
23) Указываем стандартные
параметры:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
24) В теге <title> пишем условный заголовок, затем встраиваем bootstrap-библиотеку, Font Awesome и CSS.
25) Закрываем </head> и
внутри <body> разворачиваем классы bootstrap-верстки:
<div class="container">
<div class="row">
26) Теперь создаем класс секции, в
котором у нас будут располагаться flip-карты:
<section
class="card-holder">
Обратите внимания, что эти классы
будут закрыты после всех flip-карт.
27) Flip-карта начинается с класса
верстки макета bootstrap:
<div class="col-md-4 col-sm-6">
28) Далее мы разворачиваем все
классы, использовавшиеся в CSS, то есть:
<div class="card-container
manual-flip">
<div class="card">
<div
class="front">
<div
class="cover">
29) Теперь встраиваем фото
фронтальной части карты:
<img
src="https://sites.google.com/site/konoplevmedia/lagoonfront.jpg">
30) Закрываем класс обложки.
31) Открываем классы контента,
основного содержимого и имени заголовка:
<div
class="content">
<div
class="main">
<h3
class="name">Венеция</h3>
32) Закрываем класс основного
содержимого.
33) Открываем класс футера и в нем
класс кнопки с атрибутом клика и параметром переворачивания карты:
<div
class="footer">
<button class="btn btn-flip btn-qr"
onclick="rotateCard(this)">
34) Теперь встраиваем стрелку
кнопки через Font Awesome, задаем цвет надписи на кнопке (используйте свой) и
закрываем все соответствующие классы:
<font color="black"><i class="fa
fa-mail-forward"></i>подробнее</font></button>
</div>
</div>
</div>
35) Открываем классы обратной
стороны карты и ее текстовой части:
<div
class="back">
<div
class="header">
36) В теге абзаца указываем нужный
текст:
<p>Венеция – столица одноименной области на севере
Италии. Город расположен на более чем 100 небольших островах в лагуне
Адриатического моря. Здесь совсем нет дорог, движение происходит только по
каналам. Самый оживленный – Гранд-канал. Площадь Святого Марка – главная в
городе. Здесь находится собор Святого Марка, украшенный мозаикой, а также
колокольня - кампанила.</p>
37) Закрываем класс текстовой
части.
38) Класс контента у нас пуст:
<div class="content"> </div>
39) В классе футера разворачиваем
класс обратной кнопки:
<div
class="footer">
<button
class="btn btn-flip" onclick="rotateCard(this)"><font
color="black">
<i
class="fa fa-reply"></i>назад</font>
</button>
40) Закрываем все оставшиеся
классы:
</div>
</div>
</div>
</div>
</div>
41) Повторяем пункты, начиная с 27
для второй flip-карты.
42) Закрываем теги секции,
контейнера и ряда:
</section>
</div>
</div>
43) Встраиваем
JavaScript-библиотеку и сам JavaScript
44) Закрываем </body> и
</html>
Если все верно, то ваши flip-карты
будут выглядеть как в примере ниже:
Ссылки на выполненное задание принимаются в
комментариях к данному посту до 12:00 12 мая.
Венеция
Венеция – столица одноименной области на севере Италии. Город расположен на более чем 100 небольших островах в лагуне Адриатического моря. Здесь совсем нет дорог, движение происходит только по каналам. Самый оживленный – Гранд-канал. Площадь Святого Марка – главная в городе. Здесь находится собор Святого Марка, украшенный мозаикой, а также колокольня - кампанила.
Флоренция
Флоренция, столица итальянского региона Тоскана, славится произведениями искусства и архитектурой эпохи Возрождения. Одна из главных достопримечательностей города – кафедральный собор Дуомо. Его покрытый черепицей купол был создан по проекту Брунеллески, а колокольню проектировал Джотто. В галерее Уффици хранится "Благовещение" Леонардо да Винчи.
Дмитрий Эдуардович, здравствуйте. Отправляю задание: https://valeriyakhisamutdinova.blogspot.com/2022/05/blog-post.html Остался, к сожалению, неясный момент: карточки работают, но не отображается название карточки, хотя тут же надпись рядом с кнопкой видна.
ОтветитьУдалитьОценка "хорошо". Проблема с отображением названия связана с некорректным встраиванием JavaScript
Удалить