CSS Blockquote dengan Image Gradient
:before dan :after yang akan di terapkan pada style blockquote ,sebelumnya kalian bisa memahami properti css lainnya pada artikel saya sebelumnya di Belajar Pseudo. setelah mengerti maka css berikut tidak akan sulit lagi untuk anda pahami. tutorial kali ini kita akan membuat garis(border/line) atas dan bawah dengan css image gradient color. rasanya saya tidak akan terlalu banyak menjelaskan panjang lebar. langsung saja ke cara memasangnya.Langkah pertama kita masuk ke editor CSS (edit HTML/Edit Template)dan masukan style css berikut di atas code
]]></skin>.Catatan: jika pada template sudah ada css blockquote. lebih baik di hapus dulu sebelum menyimpan css blockquote yang baru.
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "201C""201D""2018""2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
blockquote {
font-family: "Arial","Verdana",Serif;
font-size: 16px;
padding: 50px 5px;
position: relative;
text-align: center;
}
blockquote p {
margin: 0 0 20px;
display: inline;
}
blockquote:before {
top: 25px;
}
blockquote:after {
bottom: 25px;
}
blockquote:before, blockquote:after {
background-image: -webkit-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
background-image: -moz-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
background-image: -ms-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
background-image: -o-linear-gradient(left,#eee,#eee 35%,#f3a01e 35%,#f3a01e 45%,#d05d2a 45%,#d05d2a 55%,#9dc425 55%,#9dc425 65%,#eee 65%,#eee);
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
}Simpan template.Langkah ke-2 HTML
pada dasarnya attribut HTML seperti ini
<blockquote>Catatan dan teks pada kolom blockquote di sini </blockquote>pada blogger sangat mudah sekali. kita hanya perlu masuk pada halaman post baru(new entry),atau membuat postingan baru.
pada bar ada icon seperti ini.
Atau hasilnya pada live demo di bawah ini.
Eu mei solum oporteat eleifend, libris nominavi maiestatis duo at, quod dissentiet vel te. Legere prompta impedit id eum. Te soleat vocibus luptatum sed, augue dicta populo est ad, et consul diceret officiis duo. Et duo primis nostrum
Mudah bukan.. semoga bisa menampilkan blog anda lebih menarik.
reference: css-tricks.com
0 komentar:
Posting Komentar