Cara Membuat Efek Teks Mengelupas
Cara Membuat Efek Teks Mengelupas - Dengan memanfaatkan properti - properti yang terdapat didalam CSS kita dapat membuat berbagai macam efek terhadap objek maupun elemen pada halaman web. Salah satu contoh nya adalah yang akan saya bagikan berikut yakni bagaimana Cara Membuat Efek Teks Mengelupas. Buat kalian yang ingin membuat efek pada teks tidak ada salahnya untuk menyimak dan mengikuti langkah - langkahnya berikut ini.
Langkah 1 : Cara Membuat Efek Teks Mengelupas
Untuk membuat suatu efek, kita harus terlebih dahhulu menentukan objek yang akan dikenai efek, dalam kasus ini yang akan kita jadikan adalah objek berupa teks yang nantinya akan dibuat seperti teksnya mengelupas. Untuk itu silahkan buat file index.html kemudian ketikan struktur HTML sederhana untuk membuat rangkaian teks seperti berikut.
<div id="wrapper">
<h1 id="text">
<span data-letter="D">D</span>
<span data-letter="U">U</span>
<span data-letter="M">M</span>
<span data-letter="E">E</span>
<span data-letter="T">T</span>
<span data-letter="S">S</span>
<span data-letter="C">C</span>
<span data-letter="H">H</span>
<span data-letter="O">O</span>
<span data-letter="O">O</span>
<span data-letter="L">L</span>
<span data-letter=".">.</span>
</h1>
</div>
</body>
Langkah 2 : Cara Membuat Efek Teks Mengelupas
Langkah berikutnya, setelah merangkai teks seperti diatas barulah kita desain tampilan teks menjadi suatu efek yang sangat menarik yaitu menjadikan teks seperti mengelupas, silahkan kalian ketikan sintak CSS untuk membuat efek teks nya.
@import url('https://fonts.googleapis.com/css?family=Fugaz+One');
html, body {
background-color: #E2E5EE;
height: 100%; width: 100%;
margin: 0; padding: 0;
font-family: 'Fugaz One', cursive;
}
#wrapper {
width: 100%;
}
#text {
margin-top: 6em;
text-align: center;
}
#text span {
position: relative;
color: #32A8E0;
font-size: 7rem;
font-weight: bold;
line-height: 1em;
}
#text span:before,
#text span:after {
content: attr(data-letter);
position: absolute;
left: 0;
color: transparent;
}
#text span:before {
transform-style:preserve-3d;
transform: skew(0deg, 3deg);
transform-origin:0 100% ;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
text-shadow:0px 3px 5px 1px rgba(0,0,0,0.25);
}
#text span:after {
color: #E2E5EE;
transform-style:preserve-3d;
transform: rotateY(11deg)translate3d(-4px,-2px,-20px) skew(-2deg, -6deg);;
transform-origin:0 100% ;
z-index: 100;
}
Setelah semua sintak diatas telah kalian ketikan semua, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Selesai
Bagaiamana, menarik buka efek teks yang ditampilkan ? baiklah, cukup sekian tutorial sederhana mengenai bagiamana Cara Membuat Efek Teks Mengelupas, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
