Як зробити блоки зі слайдер ефектом на чистому css3.

Всім привіт! У цій статті я покажу, як зробити блоки зі слайдер ефектом на чистому CSS3.

Для початку створимо структуру:

 
 
 
charset=`UTF-8`gt; 
Блоки з слайдер ефектом 
rel=`Stylesheet`href=`Css / style.css`gt; 
 
 
id="Page-wrap"gt; 
 
 Використовуються css3 переходи і трансформації 
class="Slide-up-boxes"gt; 
href="#"gt; 
  Де я працюю? 
  Я працюю в чудовій компанії, яка робить дуже цікаві проекти. 
 
href="#"gt; 
  Книги, в яких я був співавтором 
  На жаль, я поки не був ні автором, ні співавтором ніяких книжок, але все попереду! :) 
 
href="#"gt; 
  Чи подобається мені бути програмістом? 
  Звичайно ж да! Бути програмістом - дуже захоплююче, і я дуже люблю цю роботу!

Тепер відкриємо файл style.css, який ми підключаємо в шапці сторінки, і пропишемо наступне:

Відео: Як зробити слайдер для сайту на HTML + CSS

*{ margin:0- padding:0-} 
body { font:14pxGeorgia, serif-} 
article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block-} 
# Page-wrap {width: 370px; margin: 60px auto-} 
h1 { font:32pxHelvetica,Arial,Sans-Serif- margin:0020px0-} 
p { margin:0020px0-} 
a { text-decoration: none-}

Тепер в тезі head відразу після підключення файлу стилів пропишемо тег style і помістимо наступний код там:

Відео: Простий Parallax ефект на чистому CSS

.slide-up-boxes a { 
 display: block-
 height:130px-
 margin:0020px0-
 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/65pxGeorgia,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/15pxGeorgia,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-}