Membuat Text 3 Dimensi Menggunakan Text Shadow

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Text 3 Dimensi Menggunakan Text Shadow yang ada di property css. Dimana text 3 Dimensi yang akan saya buat menggunakan salah satu property di css yaitu text-shadow. Langsung saja teman-teman siapkan struktur htmlnya yang berisi satu div class dengan nama animasi yang didalamnya berisi text seperti pada script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Membuat Text 3 Dimensi Menggunakan Text Shadow</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animasi">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero pariatur eum fugit, delectus vero dignissimos. Aperiam tempore totam repellat dicta. Nisi facere eius suscipit, ipsa, architecto necessitatibus laboriosam repudiandae autem.
    </div>
</body>
</html>

Jika sudah maka tahap selanjutnya teman-teman buat file baru dengan nama file style.css untuk dapat membuat animasi text 3 dimensi. Didalam file ini teman-teman buat text yang ada di dalam div class animasi menjadi posisi absolute terlebih dahulu, lalu atur tata letaknya, warnanya dan sebagainya, kemudian berikan property text-shadow seperti di bawah ini untuk membuat 3 dimensinya.

text-shadow: 0 1px 0 rgba(215,215,215),
                0 2px 0 rgba(210,210,210),
                0 3px 0 rgba(205,205,205),
                0 4px 0 rgba(200,200,200),
                0 5px 0 rgba(190,190,190),
                0 6px 0 rgba(185,185,185),
                0 7px 0 rgba(180,180,180);

Berikut ini isi file style.css versi lengkapnya.

body{
    margin:0;
    padding: 0;
    background-color: salmon;
}
.animasi{
    color:blue;
    position: absolute;
    text-transform: uppercase;
    font-size: 50px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 0 rgba(215,215,215),
                0 2px 0 rgba(210,210,210),
                0 3px 0 rgba(205,205,205),
                0 4px 0 rgba(200,200,200),
                0 5px 0 rgba(190,190,190),
                0 6px 0 rgba(185,185,185),
                0 7px 0 rgba(180,180,180);
    text-align: center;            
}

Dan jika teman-teman buka di halaman browser maka tampilannya akan seperti pada gambar di bawah ini.

Membuat Text 3 Dimensi Menggunakan Text Shadow

Demikian artikel tentang cara Membuat Text 3 Dimensi Menggunakan Text Shadow pada property css. Semoga dapat bermanfaat untuk teman-teman dan buat kalian bisa langsung mencobanya. Selamat mencoba.

27 Oktober 2019

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