Css Text Shadow - Menciptakan Pengaruh Bayangan Pada Teks

Published by Concept Phone Rabu, 18 Juli 2018

Berikut ini yaitu aba-aba CSS dasar untuk menciptakan imbas bayangan pada teks:

span {   text-shadow:10px 10px 7px #222; }

Aturannya sama persis dengan CSS Box Shadow: 10px yang pertama yaitu ukuran offset sumbu-X, 10px yang ke dua yaitu offset sumbu-Y, 7px yaitu tingkat blur, #222 yaitu warna bayangan. Kamu juga dapat menuliskan nilai offset negatif untuk menciptakan bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kau tidak dapat menciptakan efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, bekerjsama kau juga dapat menciptakan imbas bayangan teks inset (baca tutorialnya di sini).

Cara penerapannya dapat diletakkan secara top down ataupun inline ibarat ini:

Top-Down	Inline
<style> #teks1 {text-shadow:10px 10px 7px #222;} </style> ...... <div id='teks1'>TEKS</div>	<div style='text-shadow:10px 10px 7px #222;'> TEKS </div>

Dan ini yaitu pola hasil tampilannya:

HASIL TAMPILAN
OFFSET POSITIF

HASIL TAMPILAN
OFFSET NEGATIF

Sumber https://www.dte.web.id/