Створення ефекту записки за допомогою css3

Створення ефекту записки за допомогою CSS3

Із цієї статті ви дізнаєтеся як прості списки html можна перетворити в симпатичні записки за допомогою CSS3.

Відео: Як зробити паралакс за допомогою JQuery і CSS

Даний ефект буде правильно працювати в браузерах Chrome, Mozilla, Safari і Opera.

Ви можете подивитися приклад а також завантажити архів з прикладом:

Подивитися прімерСкачать

Пояснення за кодом

У блоці є такий рядок:

1


lt;linkhref="Http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="Stylesheet" type="Text / css"gt;

Тут ми підключаємо свій шрифт з fonts.googleapis.com, і вказуємо що він нежирний значенням regular

Потім створюємо записку (я не буду вставляти все записки як в прикладі, а тільки покажу на одній):

12345678
lt;ulgt;lt;ligt;lt;a href="#"gt;lt;h2gt; Тема # 1lt;/h2gt;lt;pgt; Текст повідомлення # 1lt;/pgt;lt;/agt;lt;/ligt;lt;/ulgt;

Даємо їй тінь і ефект збільшення + поворот при наведенні:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
ul,li{list-style:none-}ul{overflow:hidden-padding:3em-}ul li a{text-decoration:none-color:# 000-background:#ffc-display:block-height:10em-width:10em-padding:1em--moz-box-shadow:5px 5px 7px rgba(33,33,33,1)--webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7)-box-shadow: 5px 5px 7px rgba(33,33,33,.7)--moz-transition:-moz-transform .15s linear--o-transition:-o-transform .15s linear--webkit-transition:-webkit-transform .15s linear-}ul li{margin:1em-float:left-}ul li h2{font-size:140%-font-weight:bold-padding-bottom:10px-}ul li p{font-family:"Reenie Beanie",arial,sans-serif-font-size:180%-}ul li a{-webkit-transform: rotate(-6deg)--o-transform: rotate(-6deg)--moz-transform:rotate(-6deg)-}ul li: nth-child(even) a{-o-transform:rotate(4deg)--webkit-transform:rotate(4deg)--moz-transform:rotate(4deg)-position:relative-top:5px-background:#cfc-}ul li: nth-child(3n) a{-o-transform:rotate(-3deg)--webkit-transform:rotate(-3deg)--moz-transform:rotate(-3deg)-position:relative-top:-5px-background:#ccf-}ul li: nth-child(5n) a{-o-transform:rotate(5deg)--webkit-transform:rotate(5deg)--moz-transform:rotate(5deg)-position:relative-top:-10px-}ul li a: hover,ul li a: focus{box-shadow:10px 10px 7px rgba(0,0,0,.7)--moz-box-shadow:10px 10px 7px rgba(0,0,0,.7)--webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)--webkit-transform: scale(1.25)--moz-transform: scale(1.25)--o-transform: scale(1.25)-position:relative-z-index:5-}

Відео: GoToWeb - Відеокурс Html і Css, урок 26, Спрайт CSS

Ось так за допомогою властивостей CSS3 можна створити гарний ефект для блоку, кнопки або списку.

Успіхів!

джерело: net.tutsplus.com

Відео: Різні фішки для сайту

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!