Cara Membuat Efek Teks Stroke dengan CSS3

Seperti yang kita ketahui bahwa efek stroke merupakan efek yang memberikan garis luar atau warna pada sebuah objek baik tulisan dan objek lainnya. Biasanya efek stroke ini bisa kita temukan pada aplikasi edit foto seperti photoshop, namun kali ini saya akan berikan tutorial sedrhana cara membuat efek teks stroke dengan CSS3, seperti apa cara membuatnya, langsung saja simak uraiannya berikut ini.

untuk membuat efek teks stroke, kita akan membuat objek yang akan dijadikan efek stroke, pada kasus ini objek nya adalah teks atau tulisan didalam sebuah button, silahkan ketikan struktur HTML seperti berikut.

<div class="page">
  <div class="page__demo">
    <div class="main-container page__container">
      <button class="button button_type1" data-button-label="I'm a button"><span class="button__label">I'm a button</span></button>
      <button class="button button_type2" data-button-label="I'm a button"><span class="button__label">I'm a button</span></button>
    </div>
  </div>
</div>
</body>

Setelah membuat objek yang akan dijadikan efek stroke, selanjutnya adalah membuat desaign dan menambahkan efek stroke pada tulisan didalam button nya dengan kode CSS3 berikut.

.button{
  padding: 8px 25px;
  position: relative;
  border: 2px solid #fff;

  cursor: pointer;
  background-color: transparent;

  font-size: 40px;
  font-family: inherit;
  color: #fff;
  text-transform: uppercase;
}

.button:focus{
  outline: none;
}

.button:before{
  content: attr(data-button-label);
  overflow: hidden;
  white-space: nowrap;

  position: absolute;
  top: 8px;
  left: 25px;
}

.button__label{
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  -moz-text-stroke: 1px #fff;
  -webkit-text-stroke: 1px #fff;
}

.button_type1:before{
  width: 0;
  height: calc(100% - 16px);
  will-change: width;
  transition: width .5s cubic-bezier(0.96, 0.18, 0.1, 0.88);
}

.button_type1:hover:before, .button_type1:focus:before{
  width: calc(100% - 50px);
}

.button_type2:before{
  width: calc(100% - 50px);
  height: 0;
  will-change: height;
  transition: height .35s ease-out;
}

.button_type2:hover:before, .button_type2:focus:before{
  height: calc(100% - 16px);
}
.button{
  -webkit-tap-highlight-color: transparent;
}

@media screen and (max-width: 640px){

  .button{
    padding: 5px 15px;
    font-size: 30px;
  }

  .button:not(:first-of-type){
    margin-top: 20px;
  }
 
  .button:before{
    top: 5px;
    left: 15px;
  }

  .button_type1:before{
    height: calc(100% - 10px);
  }

  .button_type1:hover:before, .button_type1:focus:before{
    width: calc(100% - 30px);
  }

  .button_type2:before{
    width: calc(100% - 30px);
  }

  .button_type2:hover:before, .button_type2:focus:before{
    height: calc(100% - 10px);
  }
}

/*
* demo page
*/

@media screen and (min-width: 768px){

  html{
    font-size: 62.5%;
  }
}

@media screen and (max-width: 767px){

  html{
    font-size: 50%;
  }
}

body{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  font-size: 1.6rem;
  color: #222;

  background-color: #2c3e50;
  margin: 0;
  -webkit-overflow-scrolling: touch;   
  overflow-y: scroll;
}

.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.page__demo{
  flex-grow: 1;
  display: flex;
}

.main-container{
  max-width: 1200px;
  padding-left: 1rem;
  padding-right: 1rem;

  margin-left: auto;
  margin-right: auto;
}

.page__container{
  margin: auto;
  text-align: center;
}

Setelah semua kode HTML dan CSS3 diketikan, langkah terakhir adalah simpan file kemudian buka pada broser masing-masing dan lihat hasilnya, maka tampilan akhirnya akan seperti berikut ini.

Dan jika kita sorot pada salah satu button diatas akan terlihat efek teks stroke.

Baiklah sampai disini tutorial sederhana mengenai bagaimana cara membuat efek stroke dengan CSS3, semoga bermanfaat dan selamat mencoba.

18 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat