Membuat Efek Bayangan Stroke pada Teks dengan CSS

Membuat Efek Bayangan Stroke pada Teks - CSS bukan hanya sekedar mengatur layout akan tetapi banyak kreasi yang bisa kita lakukan, misalnya membuat efek dan animasi sederhana dengan properti - properti yang disediakan oleh CSS. Seperti tutorial berikut yang akan saya bagikan yaitu Membuat Efek Bayangan Stroke pada Teks. Buat kalian yang ingin mencoba membuatnya silahkan ikuti langkah - langkahnya berikut ini.

Langkah pertama untuk membuat efek bayangan stroke adalah membuat elemen teksnya terlebih dahulu, silahkan kalian buat file index.html kemudian ketikan sintak HTML seperti berikut.

<body>
    <span class="stroke">DUMETSchool.</span>
</body>

Setelah menentukan elemen yanga akan dikenai efek bayangan strokenya selanjutnya adalah mendesain dan tentunya membuat efek bayangan stroke pada teks, silahkan kalian bisa ketikan sintaks CSS berikut ini.

<style>
    @import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
    body{
        background: #DAD9DE;
        font-family: 'Fredoka One', cursive;
    }
    span.stroke{
        position: absolute;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 125px;
        letter-spacing: 0.2em;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 4px;
        -webkit-text-stroke-color: #92AE01;
        text-shadow: 8px 8px #0988A9;
    }
</style>

Pada sintak CSS diatas telah diatur penggunaan properti -webkit-text-stroke-width dan -webkit-text-stroke-color sebagai efek stroke pada teksnya. Setelah mengetikan sintaks HTML dan CSS langkah terakhir pastikan simpan kembali filenya kemudian kalian bisa buka pada browser masing - masing untuk melihat hasil akhirnya.

Baik, itulah tadi tutorial sederhana CSS tentang bagaimana Membuat Efek Bayangan Stroke pada Teks, semoga tutorial CSS ini bermanfaat selamat mencoba dan sampai jumpa ditutorial dumetschool selanjutnya.

3 Desember 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