
Октябрь 25, 2019 Запись была обновлена
Тетрадь в линейку на CSS3

Уже приелись стандартные страницы сайтов, хочется что-то новое, креативное и чтобы обязательно смотрелось на сайте. Все учились в школе, и тетрадь в линейку выглядит очень знакомо и привлекает внимание, потому что 11 лет школы.. Еще бы не запомнилась! И в этом уроке мы создадим красивый эффект тетради в линейку используя технологию CSS3.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
Используя тени, градиент, границы мы создадим потрясающий эффект тетради в клеточку.
HTML часть
HTML код очень простой. Весь текст находится в блоке <div> с классом page:
1 2 3 4 5 6 7 8 9 | <div class="page"> <p> Пример текста </p> <p> Еще один абзац </p> </div> |
CSS часть
И создадим интересный эффект тетради в линейку используя следующие свойства:
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 | .page { font-family: cursive, Arial; width: 700px; position: relative; margin: auto; padding: 15px 0; color: #212121; -webkit-border-bottom-left-radius: 20px 500px; -webkit-border-bottom-right-radius: 500px 30px; -webkit-border-top-right-radius: 5px 100px; -moz-border-radius-bottomleft: 20px 500px; -moz-border-radius-bottomright: 500px 30px; -moz-border-radius-topright: 5px 100px; border-radius-bottomleft: 20px 500px; border-radius-bottomright: 500px 30px; border-radius-topright: 5px 100px; background: #fcf59b; background: -webkit-gradient( linear, left top, left bottom, from(#81cbbc), color-stop(2%, #fcf59b) ); background: -moz-repeating-linear-gradient( top, #fcf59b, #fcf59b 38px, #81cbbc 40px ); background: repeating-linear-gradient( top, #fcf59b, #fcf59b 38px, #81cbbc 40px ); -webkit-background-size: 100% 40px; -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); box-shadow: 0 2px 10px 1px rgba(0,0,0,.2); } .page:before { content: ' '; background: url(tape.png) no-repeat; width: 129px; height: 38px; position: absolute; top: -15px; left: 40%; display: block; } p { padding: 0 100px; line-height: 40px; margin-bottom: 40px; font-size: 30px; } |
Вывод
На мой взгляд очень классный эффект. Конечно можно сделать не желтый фон, а белый, но это уже на ваше усмотрение.
Успехов!
Источник: net.tutsplus.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Интересная идея, наверное такими же путями можно и в клетку сделать? И не подскажите ещё как сделать так, чтобы было как у Вас на картинке в начале страницы под наклоном?
Это я в графическом редакторе повернул. Но можно повернуть весь блок с помощью свойств:
Chrome, Safari:
-webkit-transform: rotate(XXdeg);
Firefox:
-moz-transform: rotate(XXdeg);
IE:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=X);
Opera:
-o-transform: rotate(XXdeg);
где XX — это то значение в градусах, на которое необходимо повернуть.
Согласен, такое можно использовать в виджетах или блоках лендинга, но делать подобное для контента блога — это просто ад. IMO, конечно.
Вы правы, делать основным фоном это действительно плохо, но если это будет клеточка и прозрачность по минимуму, фон белый, а не желтый. Вот тогда это будет смотреться :).