Css3 Lined Paper

Published by Concept Phone Senin, 14 Januari 2019

Kertas Kuning

.paper1 {   width:60%;   padding:0px 20px;   margin:10px auto 10px;   font:normal 11px Georgia,Serif;   line-height:30px !important;   background-color:#F2EA7E;   background-image:-webkit-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);   background-image:-moz-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);   background-image:-ms-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);   background-image:-o-repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);   background-image:repeating-linear-gradient(top, #F2EA7E 30px, #F2EA7E 30px, #F6D5AD 31px, #F2EA7E 31px, #F2EA7E 60px);   border-top:40px solid #F2EA7E;   border-bottom:40px solid #F2EA7E;   -webkit-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);   -moz-box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);   box-shadow:inset 0px -1px 0px #F6D5AD, 0px 1px 4px rgba(0,0,0,0.3);   color:#666;   -webkit-border-radius:7px;   -moz-border-radius:7px;   border-radius:7px; }

Kertas Putih

.paper2 {   width:60%;   padding:0px 20px;   margin:10px auto 10px;   font:normal 12px Georgia,Serif;   line-height:30px !important;   background-color:#E9E7ED;   background-image:-webkit-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);   background-image:-moz-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);   background-image:-ms-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);   background-image:-o-repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);   background-image:repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);   border-top:40px solid #E9E7ED;   border-bottom:40px solid #E9E7ED;   -webkit-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);   -moz-box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);   box-shadow:inset 0px -1px 0px #B0BECF, 0px 1px 4px rgba(0,0,0,0.3);   color:#222;   -webkit-border-radius:7px;   -moz-border-radius:7px;   border-radius:7px; }

Lihat Demo

Catatan Tambahan

Selalu pastikan bahwa setiap elemen di dalamnya mempunyai tinggi, padding dan margin pada kelipatan 30 piksel. Ukuran aksara tidak terlalu besar lengan berkuasa sebab line-height jauh lebih berperan terhadap posisi dan jarak tiap baris elemen. Sebagai contoh, bila Anda menerapkan elemen heading level 2, maka setidaknya aturlah ukurannya supaya tetap berada pada kelipatan 30 piksel sesuai dengan tinggi masing-masing garis untuk memastikan bahwa semuanya tampak teratur:

.paper1 h2 {   font-size:20px;   line-height:30px !important;   margin:0px 0px 30px;   padding:0px 0px; }

Sumber https://www.dte.web.id/