Cara Membuat Efek Tepi pada Kertas dengan CSS3
Ada beragam jenis efek yang dapat kita bikin dengan CSS3 salah satunya ialah efek tepian di kertas, biasanya dapat kita lihat efek ini di sebuah mading atau yang lain nya. untuk kalian yang ingin merancang efek tepian di kertas diwebsite tak ada salah nya bagi mengikuti panduan berikut yakni Cara Membuat Efek Tepi pada Kertas dengan CSS3.
Efek kertas yang akan dicontohkan dibawah ini ialah efek tepian seolah-olah kertas terselip diantara tepian, penasaran seperti apa cara membuatnya ? Seketika saja kita praktekan, silahkan kalian ketikan sintak HTML berikut ini.
<body>
<div>the best !</div>
</body>
Bagi teks nya silahkan kalian isikan bebas selaku objek, berikutnya ialah kita akan desain efek tepi di kertas dengan sintak CSS3 berikut.
@import url('https://fonts.googleapis.com/css?family=Pacifico');
div {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #ddd;
background-size: cover;
background-clip: content-box;
background-color: #0EA4EA;
box-sizing: border-box;
position: relative;
margin: auto;
top: 30px;
font: 400 2em/180px 'Pacifico', cursive;
color: #fbfbfb;
text-indent: 20px;
}
div:after {
content: ;
display: block;
position: absolute;
border: 50px solid transparent;
border-bottom: 50px solid #fefefe;
bottom: -60px;
right: -65px;
box-shadow: 0px 7px 6px -9px black;
transform: rotate(135deg);
}
div:before {
content: ;
display: block;
position: absolute;
border: 50px solid transparent;
border-top: 50px solid #fefefe;
top: -60px;
left: -65px;
box-shadow: 0px -7px 6px -9px black;
transform: rotate(135deg);
}Di sintak diatas kita dapat lihat ada properti CSS3 yakni after dan before ialah selaku sintak bagi merancang efek tepi di kertas. Setelah seluruh sintak diatas kalian ketikan, simpan file dengan format .html kemudian silahkan buka di browser masing-masing dan lihat hasilnya. Karenanya akan terlihat seperti efek tepi di sebuah kertas.
Baiklah demikianlah panduan mengenai bagaimana Cara Membuat Efek Tepi pada Kertas dengan CSS3. semoga bermanfaat. Share artikel ini kepada rekan-rekan dan teman kalian supaya lebih bermanfaat untuk orang banyak, tetap semangat dan selamat mencoba 🙂
Bagi lebih jelas nya, kalian pun dapat lihat contoh demo dibawah ini.
Sumber https://kursuswebsite.org
