Pada kesempatan kali ini akan membahas Cara Membuat Teks Bayangan dengan CSS3, Untuk sanggup menciptakan text atau goresan pena berbayang sanggup memakai propery text-shadow, property ini ialah property gres yang di bawa oleh CSS3, dimana property ini berfungsi untuk membuat goresan pena berbayang, untuk lebih lanjut mari kita berkenalan lebih dalam dengan property yang satu ini.
Mengenal Property Text-Shadow
Property text-shadow ialah modul gres yang dibawa oleh CSS3 yang berfungsi untuk menghasilkan teks berbayang (text shadow). Cara penulisan property ini sangat mudah, dimana teman-teman tinggal menentukan selector yang teman-teman inginkan lalu berikan property text-shadow. untuk lebih terperinci silahkan teman-teman perhatikan gambar dibawah ini.
Jika teman-teman perhatikan pada gambar tersebut telah diberi keterangan untuk setiap value dari property text-shadow, namun untuk lebih terperinci aku akan menjelaskan sedikit, pada value property text-shadow diatas sanggup dilihat mempunyai empat nilai.Yang pertama 2px, 3px,5px dan blue, dari setiap value tersebut mempunyai fungsi masing-masing, value pertama yaitu 2px berfungsi untuk menciptakan posisi bayangan ke kiri atau ke kanan, sedangkan value kedua yaitu 3px, berfungsi untuk menciptakan posisi bayangan ke atas atau ke bawah, sedangkan value yang ketiga yaitu 5px berfungsi untuk menciptakan ketebalan blur dan value yang ke empat berfungsi untuk membuat warna dari banyangan tersebut.
Cara Menggunakan Property Text-Shadow
Setelah membaca klarifikasi diatas, aku rasa teman-teman sudah mengenal dan mengerti cara memakai property ini, namun ada sedikit penambahan untuk value dari property pertama dan kedua diatas, nilai positif untuk value pertama menciptakan bayangan ke arah kanan dan untuk menciptakan bayangan berada di sisi kiri sanggup memakai nilai negatif, begitu juga dengan value yang kedua, nilai positif untuk menciptakan bayangan berada kebawah dan nilai negatif untuk menciptakan posisi bayangan berada diatas. untuk lebih gampang silahkan teman-teman tilis code berikut ini.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .positif { font-size: 60px; text-shadow: 2px 5px 3px blue; } .negatif { font-size: 60px; text-shadow: -3px -4px 5px red; } </style> </head> <body> <h1 class="positif">Belajar Membuat Text Shadow</h1> <h1 class="negatif">Belajar Bersama </h1> </body> </html> silahkan teman-teman jalankan file diatas, maka kesudahannya akan menyerupai berikut ini.
Untuk lebih memahami cara kerja dari property ini, silahkan teman-teman ganti value dari property text-shadow dengan value yang teman-teman inginkan, lalu amati hasil perubahannya. Sekian tutorial dari biar berkhasiat dan sanggup membantu teman-teman dalam menciptakan dan mempelajri website.
No comments:
Post a Comment