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

Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2022 dengan nama sudarjurnalblogg.web.id

Berbagi :