Membuat 3D Teks dengan HTML dan CSS

Membuat 3D Teks dengan HTML dan CSS - Membuat Efek 3D teks didalam sebuah website tidaklah sulit, apalagi buat kalian yang sudah familiar menggunakan HTML dan CSS. Efek 3D pada teks memang memberikan kesan menarik untuk dilihat oleh kita sebagai pengguna. Apalagi sekarang seorang developer web dituntut untuk lebih kreatif dalam mendesain tampilan web, baik dari segi layout, efek, animasi dan lain sebagainya. Nah, pada kesemapatan kali ini akan saya share referensi dan tutorial sederhana yakni Membuat 3D Teks dengan HTML dan CSS.

Langkah 1 : Membuat 3D Teks dengan HTML dan CSS

Untuk membuat 3D teks, langkah pertama adalah dengan membuat struktur dan membuat teks dengan sintak HTML berikut ini.

<html>
<head>
    <title>Membuat 3D Teks dengan HTML dan CSS</title>
</head>
<body>
    <div id="wrapper">
        <h1 class="text">Dumetschool.</h1>
    </div>
</body>
</html>

Langkah 2 : Membuat 3D Teks dengan HTML dan CSS

Setelah membuat struktur dan teks seperti diatas, langkah selanjutnya untuk membuat efek 3D teks adalah mendesain tampilan teks yang awalnya normal menjadi efek 3D dengan bantuan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Supermercado+One');
* {margin: 0; padding: 0}
#wrapper {
    width: 900px;
    margin: auto;
    padding: 10px;
}
body {
    background: #D7DACC;
    font-family: 'Supermercado One', cursive;
}

h1 {
    text-align: center;
}

.text {
    position: relative;
    display: inline-block;
    font-size: 9rem;
    text-transform: uppercase;
    color: #244D49;
    text-shadow: 3px 3px 0px #D7DACC, 8px 8px 0px rgba(0, 0, 0, 0.1);
}

Dengan sintak CSS yakni properti text-shadow kita telah berhasil membuat efek 3D pada teks seperti diatas. Setelah semua sintak HTML dan CSS diketikan, silahkan simpan filenya kemudian buka pada browser dan lihat hasilnya. Maka akan terlihat tampilan efek 3D teks seperti gambar dibawah ini.

Membuat 3D Teks dengan HTML dan CSS

Bagaimana, mudah bukan untuk membuat efek 3D teksnya ? Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Membuat 3D Teks dengan HTML dan CSS, semoga tutorial ini bisa bermanfaat, selamat mencoba dan sampai jumpa ditutorial selanjutnya.

21 Januari 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