Membuat Teks Shadow Dengan CSS
CSS Teks Shadow adalah CSS yang berfungsi untuk memodifikasi teks agar teks tersebut dapat terlihat seperti ada bayangan, efek blur maupun glow. pada pembuatan teks shadow maupun yang lainnya itu menggunakan tag element yang sama tapi dengan value yang berbeda. Untuk itu perlu diperhatikan cara penulisannya valuenya agar dapat menghasilkan hasil yang sesuai keinginan kita. Baiklah berikut ini mari kita ulas pembahasanya.
- Teks Shadow dengan efek bayangan.
Contoh Element tag :
text-shadow : 2px 1px red;
Hasilnya : dddd
Penjelasanya :
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
5px yang pertama dan kedua adalah untuk mengatur sudut. sebelum megerti pemahamannya mari kita ulas logikanya. bayangan terbentuk itu karena adanya sinar, nah kedua value tersebut berfungsi untuk mengatur sinar yang datang sehingga membentuk posisi bayangan dengan menkombinasikan kedua nilai tersebut.red adalah warna dari bayangan teksnya.
- Teks Shadow dengan efek blur
Contoh Element tag :
text-shadow : 3px 3px 8px red;
Hasilnya : dddd
Penjelasanya :
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
5px yang pertama dan kedua adalah untuk mengatur sudut. sebelum megerti pemahamannya mari kita ulas logikanya. bayangan terbentuk itu karena adanya sinar, nah kedua value tersebut berfungsi untuk mengatur sinar yang datang sehingga membentuk posisi bayangan dengan menkombinasikan kedua nilai tersebut.5px yang ketiga adalah untuk mengatur efek blur atau warna yang kabur.red adalah warna dari bayangan teksnya.
- Teks Shadow dengan efek glow
Pada kali ini pada value dengan urutan pertama dan kedua itu harus 0 karena jika diberi jaraktak akan terlihat efek glow. Contoh Element tag :
text-shadow : 0px 0px 8px red;
Hasilnya : dddd
Penjelasanya :
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
5px yang pertama dan kedua adalah untuk mengatur sudut. sebelum megerti pemahamannya mari kita ulas logikanya. bayangan terbentuk itu karena adanya sinar, nah kedua value tersebut berfungsi untuk mengatur sinar yang datang sehingga membentuk posisi bayangan dengan menkombinasikan kedua nilai tersebut.5px yang ketiga adalah untuk mengatur efek blur atau warna yang kabur.red adalah warna dari bayangan teksnya.
- Teks Multiple Shadow
Dalam hal ini css juga dapat menampilkan lebih dari satu bayangan jadikan satu dalam stylenya. dan akan menghasilkan banyak bayangan seklaligus, sehingga menghasilkan efek 3D. Contoh :
text-shadow: 0.2em 0.5em 0.1em red, 0.4em -0.3em 0.1em #ffff;
Penjelasanya :
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
5px yang pertama dan kedua adalah untuk mengatur sudut. sebelum megerti pemahamannya mari kita ulas logikanya. bayangan terbentuk itu karena adanya sinar, nah kedua value tersebut berfungsi untuk mengatur sinar yang datang sehingga membentuk posisi bayangan dengan menkombinasikan kedua nilai tersebut.5px yang ketiga adalah untuk mengatur efek blur atau warna yang kabur.red adalah warna dari bayangan teksnya.
Demikian mengenai Teks Shadow kurang lebihnya mohon maaf, dan kamu dapat mengembangkan sendiri css ini dengan kreativitas masing-masing. Terima Kasih