Cara Membuat Efek Inset Shadow pada Teks

Cara Membuat Efek Inset Shadow pada Teks - Pada Artikel DUMET School sebelum nya telah di bahas tutorial tentang bagaimana Cara Menambahkan Background Gambar pada Text. Pada artikel ini saya akan bagikan lagi tutorial yang akan manipulasi teks sederhana yaitu Cara Membuat Efek Inset Shadow pada Teks, biasanya efek ini bisa kita temukan pada photoshop, namun kita tidak akan bermain dengan photoshop tetapi kita akan membuat efek ini dengan CSS. Buat kalian yang sedang belajar HTML & CSS wajib tahu cara membuat efek inset shadow ini. 

Efek inset shadow ini adalah kebalikan dari efek shadow yang biasa nya efek shadow nya terlihat di bagian tepi luar elemen, namun pada efek inset shadow ini efek nya akan terlihat pada bagian dalam elemen, dalam kasus ini adalah teks. Baik, kita akan mulai cara membuat efek inset shadow berikut ini.

Kode HTML

Biasa nya efek inset ini digunakan pada elemen teks, maka dari itu kita akan membuat elemen nya dengan kode HTML seperti berikut.

<body>
    <div>
        <h1>DUMET School.</h1>
    </div>
</body>

Kode CSS

Setelah membuat elemen nya seperti di atas, selanjutnya kita akan buat efek inset shadow dengan kode CSS, silahkan kalian ketikan kode CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #dfe4ea;
}
h1 {
    font-family: 'Righteous', cursive;
    background-color: #636e72;
    color: transparent;
    text-align: center;
    font-weight: bold;
    font-size: 8em;
    text-shadow: 0px 5px 5px rgba(241, 242, 246, 0.5);
    background-clip: text;
}

Setelah kode HTML dan CSS telah diketikan semua, simpan filenya kemudian buka pada browser masing - masing dan kalian bisa melihat hasil akhir nya. 

Cukup mudah dan sederhana kode nya, jadi ini bisa menjadi bahan pembelajaran buat kalian yang sedang belajar CSS. Baik, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Efek Inset Shadow pada Teks, semoga bermanfaat dan sampai jumpa di artikel DUMET School selanjutnya :)

27 Juni 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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat