Cara menggunakan text-shadow css

Selamat datang di sistemit.com pada kesempatan kali ini saya akan berbagi sedikit tutorial html untuk kasus membuat tulisan berbayang atau dikenal populer di dunia teknologi informasi adalah text shadow. Apa itu text shadow ? mari kita bahas.

Table of Contents Show

Text Shadows
Definition and Usage
Browser Support
Property Values
More Examples
Related Pages
Apa yang dimaksud text shadow?

Text Shadows

Text shadow merupakan salah satu fitur dari CSS3.

Properti text shadow pada CSS memberikan kemudahan untuk kita dalam menampahkan shadow pada elemen teks HTML. Namun sebelum itu kita harus memastikan teks tetap dapat dibaca jika menggunakan shadow jangan sampai shadow yang dibuat terlalu berlebihan atau ketika browser user tidak support untuk menampilkan shadow pada teks (browser tidak mendukung css3)

Dalam postingan kali ini saya akan membagikan kode sederhana dengan menerapkan warna shadow dark blue dengan posisi 2 pixels ke kanan dan 5 pixels ke bawah dari teks dengan melakukan radius blur 2 pixels. Kemudian saya menerapkan shadow ini ke dalam elemen h2.

Berikut adalah contoh source code nya :

<html>
<head>
<title>Cara Membuat Shadow</title>
<style>
h2 {
  text-shadow: #003471 2px 5px 2px;
}
</style>
</head>
<body>
<h2>Halo Nama Saya Daniel</h2>
</body>
</html>

Maka akan menghasilkan :

Jika shadow dirasa terlalu mengganggu kita dapat mengatur radius blur menjadi lebih tinggi misal 5px dan mengubah warna shadow menjadi lebih terang misal warna abu muda dengan kode warna #afaeae. Kodenya adalah sebagai berikut :

<html>
<head>
<title>Cara Membuat Shadow</title>
<style>
h2 {
  text-shadow: #afaeae 2px 5px 5px;
}
</style>
</head>
<body>
<h2>Halo Nama Saya Daniel</h2>
</body>
</html>

Maka akan menghasilkan teks seperti berikut :

Demikianlah tutorial mengenai pembuatan teks dengan shadow html. Semoga bermanfaat.

Jika anda berminat untuk membuat aplikasi berbasis web atau sistem informasi silahkan hubungi kontak di bawah ini :

More "Try it Yourself" examples below.

Definition and Usage

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
text-shadow	4.0	10.0	3.5	4.0	9.6

CSS Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Property Values

More Examples

Example

Text-shadow with a blur effect:

h2 {
text-shadow: 2px 2px 8px #FF0000;
}

Try it Yourself »

Example

Text-shadow on a white text:

h2 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

Try it Yourself »

Example

Text-shadow with a red neon glow:

h2 {
text-shadow: 0 0 3px #FF0000;
}

Try it Yourself »

Example

Text-shadow with a red and blue neon glow:

h2 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Try it Yourself »

CSS tutorial: CSS Text Shadow

HTML DOM reference: textShadow property

Properti text-shadow digunakan untuk menambahkan bayangan ke teks. Ia menerima daftar efek bayangan yang dipisahkan koma untuk diterapkan pada teks elemen.

Setiap bayangan diterapkan pada teks elemen dan semua dekorasi teksnya (digabung menjadi satu).

Bayangan diterapkan dari depan ke belakang: bayangan pertama ada di atas. Dengan demikian, bayangan dapat saling bertindihan, tetapi mereka tidak pernah menindih teks itu sendiri.

Setiap bayangan ditentukan oleh 2 hingga 3 nilai panjang (nilai ketiga adalah opsional) dan <color> opsional. Jika tidak ada warna yang ditentukan, bayangan memiliki warna tinta yang dihasilkannya. Warna dapat diatur menggunakan berbagai format <color> yang tersedia (termasuk warna RGB dan HSL). Misalnya, menggunakan warna rgba lebih menguntungkan daripada menggunakan warna heksadesimal, karena ia menambahkan dimensi lain yang bisa digunakan. Anda tidak hanya dapat mengatur posisi, blur dan warna bayangan, tetapi Kalian juga dapat mengatur opacity menggunakan nilai alpha (sama untuk warna hsla).

3 nilai panjang yang menentukan setiap bayangan adalah: offset-x (jarak horizontal), offset-y (jarak vertikal), dan “radius blur” bayangan.

Radius blur adalah opsional, jika Anda tidak menentukannya, browser menggunakan nilai radius blur default yang nol. Jika nilai blur adalah nol, tepi bayangannya tajam. Jika tidak, semakin besar nilainya, semakin banyak tepi bayangan kabur. Nilai negatif tidak diperbolehkan untuk radius blur. Cara jari-jari blur bekerja adalah bahwa nilai-nilai positif menyebabkan bentuk bayangan melebar ke semua arah oleh jari-jari yang ditentukan. Nilai negatif menyebabkan bentuk bayangan berkontraksi.

Sebaliknya, offset x dan y adalah wajib.

X-offset adalah offset horizontal bayangan. Nilai positif memindahkan bayangan ke kanan teks di sepanjang jarak yang ditentukan, panjang negatif memindahkannya ke kiri.

Y-offset adalah offset vertikal bayangan. Nilai positif memindahkan bayangan ke bagian bawah teks di sepanjang jarak yang ditentukan, nilai negatif memindahkannya ke atas.

text-shadow dapat digunakan untuk membuat beberapa efek teks yang bagus dan keren. Beberapa dapat meningkatkan keterbacaan teks, beberapa menciptakan efek tipografi yang dapat membuat desain terlihat lebih realistis, dan efek teks menarik lainnya yang rapi. Gambar berikut menunjukkan 4 dari banyak gaya yang memungkinkan yang dapat dibuat dengan teks-shadow:

Bayangan dapat membuat teks lebih mudah dibaca jika kontras antara latar depan dan latar belakangnya kecil.

Properti text-shadow juga dapat diterapkan pada elemen pseudo-line :: :: dan first-letter.

Official Syntax:

Syntax:

text-shadow:none|[<length>{2,3}&&<color>?]#

Berlaku untuk: Semua element

Values:

<color>
Optional. Dapat ditentukan sebelum atau sesudah nilai offset. Jika warna tidak ditentukan, warna yang dipilih UA akan digunakan.

Catatan: Jika kalian ingin memastikan konsistensi di seluruh browser, tentukan warna secara eksplisit.

<offset-x> <offset-y>
Wajib. Nilai-nilai <length> ini menentukan offset bayangan dari teks. <offset-x> menentukan jarak horizontal; nilai negatif menempatkan bayangan di sebelah kiri teks. <offset-y> menentukan jarak vertikal; nilai negatif menempatkan bayangan di atas teks. Jika kedua nilai 0, maka bayangan ditempatkan di belakang teks.

<blur-radius>
Pilihan. Ini adalah nilai <length>. Jika tidak ditentukan, standarnya adalah 0. Semakin tinggi nilai ini, semakin besar blur; bayangan menjadi lebih luas dan lebih terang.