Cara Membuat Blockquote Efek Kertas Lipat Menggunakan CSS - Ivhaa Network
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

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

Subscribe Our Newsletter