CSS Blockquote dengan Image Gradient

CSS kali ini kita akan belajar cara menggunakan properti :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.

untuk menggunakannya block teks/kalimat paragraf terlebih dahulu kemudian klik icon tersebut.. dan lihat hasilnya cukup tekan pratinjau(preview)..
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.

---

Post By : denzdii
reference: css-tricks.com