Malam sobat blogger, sebelumnya saya mengucapkan selamat hari tahun baru...
kali syaa akan membahas tentang cara membuat lipatan kertas dengan CSS. Langsung
saja simak tutorialnya
Dibawah ini adalah kode CSS nya
/*
--------------------------
Standar tampilan
--------------------------
*/
.note {
position:relative;
width:30%;
padding:1em 1.5em;
margin:2em auto;
color:white;
background:#97C02F;
overflow:hidden;
}
.note:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:white white #658E15 #658E15;
background-color:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
display:block;
width:0; /* Firefox 3.0 damage limitation */
}
/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan kelas "rounded"
--------------------------
*/
.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:white white transparent transparent;
-webkit-border-radius:0 0 0 5px;
-moz-border-radius:0 0 0 5px;
border-radius:0 0 0 5px;
}
Dan dibawah ini HTML yang bisa diterapkan pada postingan
sobat
<div class='note'>
Konten di sini...
</div>
<div class='note rounded'>
Konten di sini...
</div>
Semoga bermanfaat.
Sumber: DTE
0 komentar