KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Membuat Text Outline dengan CSS

21 Februari 2017 | Kategori : CSS

Cara Membuat Text Outline dengan CSS - Wahhhh sudah lama ternyata saya tidak berbagi tutorial maupun tips buat sobat semua hehehe.. Sebagai permintaan maaf saya, kali ini saya akan berbagi tutorial membuat text outline dengan menggunakan css.

Bagi sobat yang sudah terbiasa menggunakan photoshop pastinya sudah tidak asing lagi dengan efek stroke yang biasa digunakan untuk efek text di blending option, seperti itu lah yang nantinya kita buat tetapi dengan menggunakan css ya sob. Namun sayangnya css property ini baru berfungsi untuk browser yang sudah mengandung webkit seperti chrome dan safari.

Sudah penasaran ya sob ? baik berikut langkah-langkahnya :

1. Buat File Html

Langkah pertama tentu saja membuat sebuah file html dan simpan di tempat yang sobat inginkan.

2. Script HTML

Langkah selanjutnya ialah mengetikkan script html di bawah ini pada file html yang baru saja kita buat

<html>
   <head>
      <title>Outline Text</title>
   </head>
   <body>
      <p class="stroke">KangJaz.com</p>
   </body>
</html>

3. Script CSS

nahh sekarang waktunya mempercantik text nya dengan menggunakan CSS. Silahkan sobat ketikkan script css berikut tepat di atas syntax </head> pada file html tadi.

<style type="text/css">
   body {
      font-family: 'Noto Sans';
      padding: 15% 20%;
      background: #00897b;
      text-align: center;
   }
   .stroke {
      font-size: 100px;
      color: #fff;
      font-weight: bolder;
      -webkit-text-stroke: 0.05em #000;
   }
</style>

kemudian simpan dan jalankan file html tadi dengan mendouble klik file tersebut. Maka akan tampil hasil seperti di bawah ini pada browser sobat :

outline.png

Nah gimana sob mudah bukan ? mungkin cukup ini yang bisa saya share untuk kali ini, semoga sedikit ilmu ini bisa bermanfaat buat sobat semua.

CMIIW