Створення ефекту записки за допомогою 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
Відео: Різні фішки для сайту
Поділися в соц мережах: