
Октябрь 25, 2019 Запись была обновлена
Создание эффекта записки с помощью CSS3

Из этой статьи вы узнаете как простые списки html можно преобразовать в симпатичные записки с помощью CSS3.
Данный эффект будет правильно работать в браузерах Chrome, Mozilla, Safari и Opera.
Вы можете посмотреть пример, а также скачать архив с примером:
Посмотреть примерСкачать
Пояснения по коду
В блоке <head> </head> есть такая строка:
1 | <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"> |
Здесь мы подключаем свой шрифт из fonts.googleapis.com, и указываем что он нежирный значением regular
Затем создаем записку(я не буду вставлять все записки как в примере, а только покажу на одной):
1 2 3 4 5 6 7 8 | <ul> <li> <a href="#"> <h2>Заголовок #1</h2> <p>Текст сообщения #1</p> </a> </li> </ul> |
Даем ей тень и эффект увеличения+поворот при наведении:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 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; } |
Вот так с помощью свойств CSS3 можно создать красивый эффект для блока, кнопки или списка.
Успехов!
Источник: net.tutsplus.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)