Membuat Text 3 Dimensi Menggunakan Text Shadow

27/10/2019    Shelli Ripati    38     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More