Sharing Teknologi – Membuat Box Shadow Menggunakan CSS Di WordPress . Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Box Shadow 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 Menggunakan CSS
Silakan lihat contoh dibawah ini.
NB: kami menggunakan tambahan CSS dari bootstrap .
HTML
<div class="frame-bokshadow alert-light p-4 rounded">
<section class="row m-0">
<div class="col-sm-6 col-md-4"><div class="box box1 mx-auto my-5"></div></div>
<div class="col-sm-6 col-md-4"><div class="box box2 mx-auto my-5"></div></div>
<div class="col-sm-6 col-md-4"><div class="box box3 mx-auto my-5"></div></div>
<div class="col-sm-6 col-md-4"><div class="box box4 mx-auto my-5"></div></div>
<div class="col-sm-6 col-md-4"><div class="box box5 mx-auto my-5"></div></div>
<div class="col-sm-6 col-md-4"><div class="box box6 mx-auto my-5"></div></div>
</section>
</div>
CSS
.frame-bokshadow .box {
width: 100px;
height: 100px;
}
.frame-bokshadow .box1 {
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.frame-bokshadow .box2 {
box-shadow: 0.5rem 0.5rem black, -0.5rem -0.5rem #ccc;
}
.frame-bokshadow .box3 {
box-shadow: 0 0 5px 5px red;
}
.frame-bokshadow .box4 {
background: #eee;
box-shadow: 0 8px 8px -4px lightblue;
}
.frame-bokshadow .box5 {
border-radius: 50%;
box-shadow: 0 0 50px #ccc;
}
.frame-bokshadow .box6 {
box-shadow: 0 -5px 3px -3px black, 0 5px 3px -3px black;
}
Hasil
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