Belajar Membuat Border Teks Menggunakan Element Text-Shadow Dan Text-Stroke

Seotechman.com, Bogor 16/02/2019. Pada tutorial kali ini kita akan mencoba membuat sebuah border pada teks atau outline text, yang akan kita bungkus menggunakan element Text-Shadow dan juga Text-Stroke.

Seperti yang telah kita ketahui, terdapat banyak sekali element - element atau bahasa pemrograman yang bisa kita pelajari diluaran sana atau bisa juga melalui W3Schools atau situs lainnya, mulai dari yang mudah di cerna hingga yang tersulit sekalipun.

Salah satu contoh nya yang akan kita bahas Text-Shadow dan Text-Stroke. Mungkin disini saya akan menerangkan untuk yang mudahnya atau dasarnya dulu agar mudah untuk kalian mengerti.

Bagaimana Cara Dan Proses Pembuatan Border Text Menggunakan Element Text-Shadow Dan Text-Stroke?

Untuk memulai langkah pada tutorial ini, kita hanya perlu sedikit syntax, yaitu Css Dan Html.

Lalu apakah kegunaan dari text-stroke ini? Kegunaannya hanya untuk mempercantik sebuah teks agar terlihat lebih keren.

Nah untuk praktek yang pertama, disini saya akan coba dengan menggunakan text-shadow terlebih dahulu. Langkah yang pertama adalah, buat file Css nya atau bisa kalian perhatikan Css berikut ini:

.contoh {
          background-color:#f1f1f1;
          color:#f44336;
          padding:10px;
          text-align:center;
          text-shadow:2px 2px 3px #333;
          font-size:15px;
          text-decoration:none;
}

Pada contoh diatas terlihat di dalam text-shadow nya, disitu saya beri nilai 2px 2px dengan diakhiri nilai 3px. 3px ini fungsinya sebagai pengatur tingkat ketebalan bayangan pada teks tersebut, dan 2px 2px nya untuk mengatur posisi bayangan itu sendiri dan #333 adalah target warna untuk shawdownya.

Untuk mengeksekusinya, sangat mudah cukup dengan menggunakan html seperti ini:

<div class="contoh">BERI TEKS DISINI</div>

Lanjut ketahap selanjutnya yaitu,
Cara Membuat Border Untuk Teks Menggunakan Text-Stroke

Untuk caranya mari perhatikan pada contoh berikut ini:

.contoh {
            background:#0095d8;
            padding:10px;
            text-align:center;
}
h1,h2,h3,h4,h5 {
           -webkit-text-stroke:2px #555;
           color:#fff;
}

Bisa dilihat sangat jelas berbeda dengan text-shadow sebelumnya, pada text-sroke kita menggunakan element webkit agar syntax tersebut bekerja. Coba kalian buat dengan tidak menggunakan element webkit, seperti ini:

h1,h2,h3,h4,h5 {
           text-stroke:2px #555;
           color:#fff;
}

Setelah itu kalian lihat hasilnya, apakah bekerja atau tidak.

Bagaimana menurut kalian, mudah bukan? Silahkan di praktekan sendiri dan selamat mencobanya.

Demikianlah tutorial singkat dari saya, membuat border teks.

Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Share this post