Cara Membuat Double Outline Dengan CSS3

Hai, ketemu lagi dengan saya, berikut saya akan bagikan kalian tutorial mengenai bagaimana Cara Membuat Double Outline Dengan CSS3, bagi kalian yang belum tau cara membuatnya, tidak ada salahnya untuk menyimak langkah-langkah nya berikut ini.

Baik, langsung saja, silahkan kalian buat struktur kode HTML seperti berikut.

<div id="container">
  <h2>Double Outline</h2>
</div>

Untuk penamaan judul, kalian bisa isikan bebas, setelah itu kita buat Outline nya dengan CSS3.

@import url("http://fonts.googleapis.com/css?family=Lobster");
body {
  background: #E23C03;
  color: #fff;
}

h2 {
  font-size: 150px;
  line-height: 30px;
  font-family: 'Lobster';
  text-align: center;
  text-shadow: rgba(255, 168, 6, .8) 4px 2px 2px;
  /*text stroke*/
  -webkit-text-stroke: 3px rgba(100, 81, 0, .65);
}


/* SIGNATURE CODE */

a {
  color: #f77d06;
  -o-transition: color .5s ease-out, background 7s ease-in;
  -ms-transition: color .5s ease-out, background 7s ease-in;
  -moz-transition: color .5s ease-out, background 7s ease-in;
  -webkit-transition: color .5s ease-out, background 7s ease-in;
  transition: color .5s ease-out, background 7s ease-in;
  text-decoration: none;
}

a:hover {
  color: #FFF;
  background: none;
  text-decoration: none;
}

.credits {
  text-align: center;
  font-family: 'Lobster';
  font-size: 1.5vw;
  color: #FFF;
}

.stars {
  color: #f43a2f;
  padding: 0 .5vw 0 .5vw;
  font-size: 1.6vw;
}

Kalo sudah, simpan terlebih dahulu, kemudian coba jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai

Baiklah itu tadi tutorial mengenai Cara Membuat Double Outline Dengan CSS3, semoga bermanfaat, dan selamat mencoba 🙂