Cara Membuat Efek Bayangan Dashed dengan CSS3
15/10/2017 Risman Hakim 1501 Website
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.
<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.
Bagaiman, menarik bukan ? Baiklah cukup sekian tutorial sederhana mengenai cara membuat efek bayangan dashed dengan CSS3, semoga bermanfaat dan selmat mencoba.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
