Sharing Teknologi – Membuat Box Shadow 3D Menggunakan CSS Di WordPress . Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Box Shadow 3D Menggunakan CSS Di WordPress dengan hanya bermodal CSS.
Apabila Sobat ingin mempercantik tampilan website dengan animasi dengan hanya bermodal CSS. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.
CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dan efek pengetikan atau typing effect .
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..
box-shadow: 0 8px 8px -4px lightblue;
box-shadow: 0 -5px 3px -3px black,
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];Horizontal Offset (wajib) dari bayangan, positif berarti bayangan akan berada di sebelah kanan kotak, offset negatif akan menempatkan bayangan di sebelah kiri kotak.
Vertical Offset (wajib) dari bayangan, yang negatif berarti bayangan kotak akan berada di atas kotak, yang positif berarti bayangan akan berada di bawah kotak.
Blur Radius (wajib), jika diatur ke 0 bayangan akan tajam, semakin tinggi angkanya, semakin kabur, dan semakin jauh bayangan akan meluas. Misalnya bayangan dengan offset horizontal 5px yang juga memiliki radius blur 5px akan menjadi 10px dari total bayangan.
Spread Radius (opsional), nilai positif meningkatkan ukuran bayangan, nilai negatif mengurangi ukuran. Defaultnya adalah 0 (bayangan berukuran sama dengan blur).
Color (wajib) – mengambil nilai warna apa pun, seperti hex, rgba atau hsla. Jika nilai warna dihilangkan, bayangan kotak digambar dalam warna latar depan (warna teks). Namun perlu diketahui, browser WebKit lama (sebelum Chrome 20 dan Safari 6) mengabaikan aturan ketika warna dihilangkan.
Menggunakan warna semi-transparan seperti rgba(0, 0, 0, 0.4) merupakan metode yang paling banyak digunakan, merupakan efek yang bagus.
Membuat Box Shadow 3D Menggunakan CSS
Silakan lihat contoh dibawah ini.
NB: kami menggunakan tambahan CSS dari bootstrap .
HTML
<div class="frame-boxshadow3d bg-light p-5 rounded">
<div class="box effect1">
<div class="h3">Effect 1</div>
</div>
<div class="box effect2">
<div class="h3">Effect 2</div>
</div>
<div class="box effect3">
<div class="h3">Effect 3</div>
</div>
</div>
CSS
.frame-boxshadow3d .box .h3{
text-align:center;
position:relative;
top:80px;
}
.frame-boxshadow3d .box {
width:200px;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 1
* ===============================================*/
.frame-boxshadow3d .effect1{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.frame-boxshadow3d .effect2
{
box-shadow: 1px 1px 0px #999,
2px 2px 0px #999,
3px 3px 0px #999,
4px 4px 0px #999,
5px 5px 0px #999,
6px 6px 0px #999;
}
/*==================================================
* Effect 3
* ===============================================*/
.frame-boxshadow3d .effect3
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar