CSS Blockquote dengan Image Gradient

CSS Blockquote With 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.

license by under 88 blogspot.com
Post By : denzdii
reference: css-tricks.com

9 comments:

  1. mas apakah kode background-image bisa diganti sama background saja?? :)
    soalnya saya pake background saja untuk linear sama aja.

    ReplyDelete
    Replies
    1. bisa saja.. yang penting penggunaan webkit dan moz tergantung browser. tapi sebaiknya jangan background saja.. karena akan bentrok dengan background dasar. dan akan menambah banyak css lagi. seperti repeat,clip,position,origin dll

      Delete
    2. Sebenarnya nggak juga. Cuma memang, background-image + background-color akan jadi jauh lebih pendek penulisannya dibandingkan background kalau mau menuliskan dengan benar. (kalau nggak salah hehe):

      Contoh dengan background (lebih panjang):
      background:black -webkit-linear-gradient(top,black,white) no-repeat scroll 0 0;
      background:black -moz-linear-gradient(top,black,white) no-repeat scroll 0 0;
      background:black -o-linear-gradient(top,black,white) no-repeat scroll 0 0;
      background:black -ms-linear-gradient(top,black,white) no-repeat scroll 0 0;
      background:black linear-gradient(top,black,white) no-repeat scroll 0 0;


      Contoh dengan background-color dan background-image (lebih pendek):
      background-color:black;
      background-image:-webkit-linear-gradient(top,black,white);
      background-image:-moz-linear-gradient(top,black,white);
      background-image:-ms-linear-gradient(top,black,white);
      background-image:-o-linear-gradient(top,black,white);
      background-image:linear-gradient(top,black,white);


      NB: Bukannya nggak pernah mampir, kadang mampir juga, tapi karena nggak ada penjelasan yang salah di posting yang Saya baca jadi nggak Saya komentari :p

      Delete
    3. hehe.. di perjelas lagi.. thnk mas taufik.. banyak belajar juga saya pada blog DTE .. apalagi tentang javascript ... keren tutorialnya..
      ouh.. maklum masih baru ini blognya.. makanya tutorialnya masih yang dasar-dasar dulu..

      Delete
  2. mantep semua kang tutor na...

    ReplyDelete
  3. om, maaf sekalian nanya,,,,
    kalo cara memindahkan sidebar misalnya dari sebelah kiri ke kanan itu bagaimana yaa?

    coba om lihat templet blog saya, saya pengen sidebar nya pindah ke kanan, tengkyuu..

    ReplyDelete
    Replies
    1. edit float css :
      1.jika id widget sidebar seperti ini.
      #sidebar-wrapper{float:left;}
      Rubah menjadi
      #sidebar-wrapper{float:right;}
      2. jika id widget main posting seperti ini.
      #main-wrapper{float:right;}
      Rubah menjadi
      #main-wrapper{float:left;}

      NB: tiap template akan berbeda. jadi sesuaikan id widget nya

      Delete
  4. sudah saya coba keren mas \o/

    tapi kayaknya ada kode yang kurang tuh mas :Ozz

    ReplyDelete
    Replies
    1. iya sob.. border-right nya kelewat... hehehe.. biarin lah biar pada pasang sendiri aja.. :D

      Delete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top