Cara Membuat Efek Bayangan Dashed dengan CSS3

Banyak sekali efek-efek yang bisa kita ciptakan dengan teknologi CSS3, mulai dari yang sederhana sampai dengan efek yang sangat menarik sekali untuk kita lihat. Efek-efek yang bisa kita ciptakan dengan CSS3 contoh nya adalah efek bayangan pada sebuah objek, animasi sederhana dan lain sebagainya. Nah berikut ini ada satu tutorial efek yang bisa kalian aplikasikan pada sebuah objek berupa teks yakni cara membuat efek bayangan dashed dengan CSS3. Simak langkah-langkahnya berikut ini.

Seperti pada judul diatas kita akan membuat efek bayangan dashed pada kasus ini kita akan menerapkan efek bayangan dashed pada sebuah teks, namun sebelumnya silahkan kalian ketikan kode HTML5 berikut sebagai struktur awal dari efek bayangan yanga akan kita buat.

<body>
    <div data-text="DUMETSCHOOL." class="dashed-shadow">DUMETSCHOOL.</div>
</body>

Setelah membuat struktur HTML5 seperti diatas, selanjutnya kita akan membuat efek bayangan dashed dengan kode CSS3 berikut ini.

@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
body {
  font-family: 'Berkshire Swash', cursive;
  font-size: 85pt;
  text-align: center;
  line-height: 1.2em;
  padding-top: 70px;
}

.dashed-shadow {
  position: relative;
  top: 8px;
  left: 8px;
  display: inline-block;
  color: #000000;
}
.dashed-shadow:before {
  content: " ";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  bottom: -2px;
  right: -2px;
  z-index: 1;
  background-size: 100%;
  background-image: -moz-linear-gradient(45deg, #ffffff 12.5%,
      rgba(232, 227, 199, 0) 12.5%,
      rgba(232, 227, 199, 0) 37.5%, #ffffff 37.5%, #ffffff 62.5%,
      rgba(232, 227, 199, 0) 62.5%,
      rgba(232, 227, 199, 0) 87.5%, #ffffff 87.5%);
  background-image: -webkit-linear-gradient(45deg, #ffffff 12.5%,
      rgba(232, 227, 199, 0) 12.5%,
      rgba(232, 227, 199, 0) 37.5%, #ffffff 37.5%, #ffffff 62.5%,
      rgba(232, 227, 199, 0) 62.5%,
      rgba(232, 227, 199, 0) 87.5%, #ffffff 87.5%);
  background-image: linear-gradient(45deg, #ffffff 12.5%,
      rgba(232, 227, 199, 0) 12.5%,
      rgba(232, 227, 199, 0) 37.5%, #ffffff 37.5%, #ffffff 62.5%,
      rgba(232, 227, 199, 0) 62.5%,
      rgba(232, 227, 199, 0) 87.5%, #ffffff 87.5%);
  background-size: 6px 6px;
}
.dashed-shadow:after {
  z-index: 2;
  content: attr(data-text);
  position: absolute;
  left: -8px;
  top: -8px;
  color: #000000;
  text-shadow: 3px 3px #ffffff;
}

Jika telah selesai semua kode diatas, simpan file nya kemudian buka pada browser masing-masing dan lihat hasil nya. Maka akan terlihat seperti pada gambar dibawah ini.

Cara Membuat Efek Bayangan Dashed dengan CSS3

Bagaiman, menarik bukan ? Baiklah cukup sekian tutorial sederhana mengenai cara membuat efek bayangan dashed dengan CSS3, semoga bermanfaat dan selmat mencoba.

15 Oktober 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