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.

<body>
    <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 :)

17 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat