Зошит в лінійку на css3

Уже приїлися стандартні сторінки сайтів, хочеться щось нове, креативне і щоб обов`язково виглядало на сайті. Усі вчилися у школі, і зошит в лінійку виглядає дуже знайоме і привертає увагу, тому що 11 років школи .. Ще б пак не запам`яталася! І в цьому уроці ми створимо гарний ефект зошити в лінійку використовуючи технологію CSS3.

Реальний приклад можна побачити тут:

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

Використовуючи затінку, градієнт, кордону ми створимо приголомшливий ефект зошити в клітинку.

HTML частина

HTML код дуже простий. Весь текст знаходиться в блок з класом page:

123456789101112131415

lt;div class="Page"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.lt;/pgt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.lt;/pgt;lt;/divgt;

CSS частина

І створимо цікавий ефект зошити в лінійку використовуючи такі властивості:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869

.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.jpg) 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-}