Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS

Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS
Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS
Pada kesempatan kali ini Saya akan memberikan tutorial lagi buat kalian, yaitu Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS. Dengan efek ini selain memperindah artikel juga enak di pandang.

Kali ini ada beberapa beberapa warna di blockquote ini, nah bagaimana caranya berikut ini tutorialnya!

Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS

Langkah pertama masuk ke akun Blogger Kalian setelah itu pilih Tema, Kemudian pilih Edit HTML. Masukkan Kode CSS ini di atas Kode ]]></b:skin> atau </style>
.note {
   position:relative;
   width:30%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}
.note:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#fff #fff #658E15 #658E15;
   background:#658E15;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0; /* Firefox 3.0 damage limitation */
}
.note.rounded {
   -webkit-border-radius:5px 0 5px 5px;
   -moz-border-radius:5px 0 5px 5px;
   border-radius:5px 0 5px 5px;
}
.note.rounded:before {
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
}
Untuk memanggilnya di dalam artikel kalian gunakan kode HTML ini, dengan pilih HTML saat bikin artikel
<div class="note"> ISI KONTENT KAMU </div> <div class="note red rounded"> ISI KONTENT KAMU </div> <div class="note blue"> ISI KONTENT KAMU </div> <div class="note taupe"> ISI KONTENT KAMU </div> <div class="container footer"> ISI KONTENT KAMU </div>
Nah itu adalah tutorial Cara Membuat Blockquote Efek Kertas Dengan CSS, Selamat Mencoba
Semoga bermanfaat
Internet SEO

Dapatkan Tips Menarik Setiap Harinya!

  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
  • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

Belum ada Komentar untuk "Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel