Cara Menambahkan Efek Outline Text Menggunakan CSS & HTML

Seotechman.com, Bogor 31/10/2022. Dengan CSS, Anda dapat mendesain teks Anda dalam banyak cara yang memungkinkan. Anda dapat menambahkan warna, bayangan, garis bawah, atau gaya yang berbeda dalam beberapa cara.

Lewat postingan ini, Anda akan melihat berbagai metode cara menambahkan efek outline text, atau text stroke menggunakan CSS & HTML.

1. Menggunakan properti text-stroke

Properti text-stroke menambahkan stroke ke teks Anda. Ini dapat digunakan untuk mengubah lebar dan warna teks. Properti ini hanya didukung oleh browser berbasis WebKit dan itu juga menggunakan awalan -webkit-.

Perhatikan contoh berikut ini:

Kode HTML

<p id="example1">This text has stroke</p>

Kode CSS

#example1{
	color: white;
	font-size: 40px;
	-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

-webkit-text-stroke-width dan -webkit-text-stroke-color masing-masing menentukan lebar dan warna goresan. Ini adalah dua properti tulisan tangan untuk properti -webkit-text-stroke yang menentukan warna goresan dan lebar sekaligus.

Dengan demikian, kode CSS di atas setara dengan yang ditunjukkan di bawah ini:

Kode CSS

#example2{
	color: white;
	font-size: 40px;
	-webkit-text-stroke: 2px black;
}

Anda tidak akan dapat melihat teks di atas jika browser Anda tidak mendukung properti text-stroke.

Untuk membuat teks terlihat di semua browser, berikan warna teks selain warna latar belakang sehingga menjadi terlihat di semua browser yang tidak mendukung properti ini dan gunakan properti -webkit-text-fill-color untuk menimpa warna teks di semua browser berbasis WebKit.

Kode HTML

<p id="example3">The text stroke will not be visible for some browsers</p>

Kode CSS

#example3{
	color: black;
	font-size: 34px;
	-webkit-text-stroke: 1px black;
	-webkit-text-fill-color: white;
}

Teks di atas akan tampak hitam di semua browser yang tidak mendukung properti text-transform. Untuk browser yang mendukung properti ini, -webkit-text-fill-color menggantikan warna teks hitam menjadi putih.

Sekarang, mari kita beralih ke metode lain yang dapat digunakan untuk menambahkan outline ke teks Anda.

2. Menggunakan properti text-shadow

Karena text-stroke tidak memiliki banyak dukungan browser, Anda dapat menggunakan properti text-shadow yang memiliki dukungan yang relatif besar dari browser.

Kode HTML

<p id="example4">Stroke using text shadow</p>

Kode CSS

#example4{
	color: white;
	font-size: 40px;
	text-shadow: -1px 1px 0 #000,
				  1px 1px 0 #000,
				 1px -1px 0 #000;
				-1px -1px 0 #000;
}

Dalam contoh di atas, empat bayangan teks (kanan atas, kanan bawah, kiri bawah dan kiri atas) diberikan pengaturan radius blur 0. Efek ini mirip dengan yang dihasilkan oleh metode pertama.

Metode ini memiliki keuntungan tambahan. Kita bisa mengatur bayangan horizontal dan vertikal sesuai dengan teks.

Menambahkan sedikit radius blur juga akan memberikan tampilan yang lebih baik seperti pada demo berikut.

Kode HTML

<p id="example5">Stroke with blur radius</p> 

Kode CSS

#example5{
	color: white;
	font-size: 40px;
	text-shadow: -1px 1px 2px #000,
				  1px 1px 2px #000,
				  1px -1px 0 #000,
				  -1px -1px 0 #000;
}

Kelemahan menggunakan bayangan pada teks adalah, jika Anda memberikan panjang bayangan lebih besar dari 1px, maka Anda mungkin melihat goresan yang terputus-putus.

3. Menggabungkan properti text-stroke dan text-shadow

Anda dapat menggabungkan properti text-stroke dan text-shadow untuk memberikan efek hebat lainnya.

Kode HTML

<p id="example6">Text Stroke</p>

Kode CSS

#example6{
	color: white;
	font-size: 40px;
	-webkit-text-stroke: 1px #23430C;
	text-shadow: -1px 1px 2px #23430C,
				  1px 1px 2px #23430C,
				  1px -1px 0 #23430C,
				  -1px -1px 0 #23430C;
}

Kode HTML

<p id="example7">Text Stroke</p>
<p id="example8">Text Stroke</p>

Kode CSS

#example7{
	color: white;
	font-size: 47px;
	-webkit-text-stroke: 3px #E21F03;
}
#example8{
	color: white;
	font-size: 47px;
	-webkit-text-stroke: 5px #E21F03;
}

Demo di atas memberikan efek garis tipis berwarna putih mengikuti jalur teks untuk teks pertama dan tampilan tebal melengkung untuk teks kedua.

Ini dapat dicapai hanya dengan meningkatkan lebar goresan.

Lihat beberapa efek text-stroke lainnya dibawah ini:

Kode HTML

<p id="example9">Text Stroke</p>
<p id="example10">Text Stroke</p>
<p id="example11">Text Stroke</p>

Kode CSS

#example9{
	color: white;
	font-size: 47px;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
}
#example10{
	color: white;
	font-size: 47px;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 2px 4px blue;
}
#example11{
	color: #333;
	background-color: black;
	font-size: 56px;
	-webkit-text-stroke: 1px #282828;
	text-shadow: 0px 4px 4px #282828;
}

Ini adalah beberapa efek keren yang dapat Anda tambahkan ke teks Anda menggunakan properti di atas.

Anda dapat menghasilkan efek goresan teks yang lebih indah dengan menggabungkan dan mengubah nilai properti yang berbeda seperti warna, radius blur, lebar goresan, dan sebagainya.

Browser Support

Seperti dibahas sebelumnya, properti text-stroke didukung dengan -webkit-prefix oleh browser berbasis WebKit. Ini didukung oleh Chrome, Safari, Opera, dan Android. Di sisi lain, text-shadow didukung oleh hampir semua browser.

Kesimpulan

Sedikit sentuhan goresan dapat memberikan tampilan yang hidup pada teks Anda. Meskipun text-stroke melayani tujuan dengan menambahkan garis halus secara seragam, saya lebih suka menggunakan text-shadow karena dukungan browser yang baik.

Selain itu, Anda dapat memberikan efek blur dengan bayangan yang dapat menambah kedalaman tata letak Anda.

Meskipun text-shadow tidak memberikan hasil yang baik jika panjang bayangan lebih besar dari 1px, Anda selalu dapat menggunakan kombinasi text-shadow dan text-stroke.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini