Как сделать блоки со слайдер эффектом на чистом CSS3.
Всем привет! В этой статье я покажу, как сделать блоки со слайдер эффектом на чистом CSS3.
Для начала создадим структуру:
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<title>Блоки со слайдер эффектом</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<h1>Блоки со слайдер эффектом</h1>
<p>Используются css3 переходы и трансформации</p>
<section class="slide-up-boxes">
<a href="#">
<h5>Где я работаю?</h5>
<div>Я работаю в замечательной компании, которая делает очень интересные проекты.</div>
</a>
<a href="#">
<h5>Книги, в которых я был соавтором</h5>
<div>К сожалению, я пока не был ни автором, ни соавтором никаких книжек, но все впереди! :)</div>
</a>
<a href="#">
<h5>Нравится ли мне быть программистом?</h5>
<div>Конечно же, да! Быть программистом - очень увлекательно, и я очень люблю эту работу!</div>
</a>
</section>
</div>
</body>
</html>
Теперь откроем файл style.css, который мы подключаем в шапке страницы, и пропишем следующее:
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { width: 370px; margin: 60px auto; }
h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 20px 0; }
p { margin: 0 0 20px 0; }
a { text-decoration: none; }
Теперь в теге head сразу после подключения файла стилей пропишем тег style и поместим следующий код там:
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}
.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px/65px Georgia, Serif;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url() 17px 17px no
-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url() 21px 10px no-
repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url() 14px 16px no-
repeat; padding-left: 133px; }
В url выше вы можете вставить картинки на фон для ваших блоков, если захотите.
Все! Наши блоки готовы! Спасибо за внимание и удачи!
-
Создано 27.09.2014 20:40:25
-
Михаил Русаков
Комментарии (1):
А почему при переносе стилей в style.css всё рушится?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.