Halo semuanya!
Dalam desain modern, saat membuat situs dan aplikasi, banyak pengembang menerapkan efek kedalaman dan volume, sering merujuk pada properti css seperti
bayangan kotak dan
bayangan . Beberapa percaya bahwa
pada 2018 ini adalah tren. Memang, ada banyak situs asing dan Rusia yang pada tahun 2018 mulai menerapkan bayangan lebih sering.
Dalam hal ini,
koleksi kecil
bayangan css sederhana dan menyenangkan , sering ditemukan di situs web, baru-baru ini muncul (plus atau minus beberapa piksel ke samping). Koleksi ini disebut
Box-shadows.css . Dia telah menerima beberapa ulasan positif pada jaringan dan baru-baru ini diperbarui ke versi 1.0.4, di mana beberapa bayangan yang lebih indah muncul, dibagi menjadi beberapa kelompok.
Setelah pembaruan terakhir, koleksi mulai mengandung lebih dari 60 opsi yang relevan untuk bayangan, yang bagus untuk digunakan dalam tabel, untuk konten halaman beranda, wadah, bilah navigasi, dan blok lain dari situs Anda.
Tujuan utama membuat koleksi ini adalah untuk memfasilitasi pekerjaan para desainer dan pengembang web pemula dalam menciptakan desain yang menyenangkan dan modern. Berkat koleksinya, Anda dapat menyederhanakan pekerjaan dengan blok dan mengurangi waktu untuk memilih bayangan css di generator (yang, omong-omong, juga tersedia). Tentu saja, pengembang yang berpengalaman sepertinya tidak membutuhkannya, tetapi mungkin mereka dapat mempelajari sesuatu yang menarik untuk diri mereka sendiri. Koleksi ini berguna bagi mereka yang belum berhasil mempelajari tata letak sepenuhnya, tetapi ingin membuat bayangan indah pada tombol, blok dan wadah situs mereka.
Hubungkan gaya
Untuk menghubungkan stylesheet, pergi ke
situs web proyek dan unduh file yang Anda butuhkan. Kemudian, lampirkan file ke halaman html Anda, setelah tag <head> pembuka, dengan metode yang nyaman bagi Anda.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
Anda dapat menggunakan
generator file
min.css , yang memungkinkan Anda untuk membuat file Anda sendiri yang hanya terdiri dari kelas-kelas yang dipilih. Baik, atau cukup pilih blok yang Anda butuhkan dan salin bayangan yang Anda suka ke situs Anda. Ini akan membantu mengurangi beban jika proyek Anda menggunakan kurang dari dua atau tiga bayangan. Cukup ikuti instruksi di situs dan Anda akan berhasil.
Menggunakan kelas
Untuk menghubungkan bayangan yang diinginkan ke blok Anda, cukup tambahkan kelas
.bShadow dengan nomor yang diinginkan:
<div class="bShadow-54"></div>
Hover efek
Untuk membuat efek hover untuk blok Anda, tambahkan kelas yang Anda suka dengan nomor, misalnya,
.bShadow-1 dan tulis huruf Latin
h setelah nomor. Sebagai contoh:
<div class="bShadow-38 bShadow-1h"></div>
Lihatlah
contoh kelas
.bShadow . Saat mengarahkan, itu menetapkan nilai bayangan ke kelas tetangga
.bShadow-1 . Jika Anda ingin bayangan tidak muncul ketika Anda mengarahkan atau mengkliknya, tambahkan kelas
.bSnoneTransformasi dan Animasi yang Halus
Kelas
.bShadow secara default menggunakan animasi yang mulus dalam
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out easy
transition: transform 0.2s ease-in-out , dan juga termasuk properti yang memperingatkan browser tentang bayangan yang akan datang dan transformasi posisi
will-change: transform, box-shadow; .
Gunakan ini untuk membuat animasi yang indah dari blok Anda. Misalnya, Anda bisa menambahkan kelas atau properti Anda dengan transformasi:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
Kemudian, tambahkan ke wadah yang Anda butuhkan:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> dan Anda akan melihat
hasilnyaMenambahkan parameter inset
Untuk menambahkan parameter bayangan bagian dalam, cukup tempel skrip ke halaman html dan tentukan kelas yang ingin Anda terapkan.
Misalnya
.bShadow-1 . Untuk menentukan beberapa kelas, pisahkan dengan koma, seperti dalam contoh di bawah ini. Jangan lupa untuk mengakhiri kelas!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
DemoGenerator kotak-bayangan Css
Koleksinya juga menyiratkan peningkatan jumlah kelas dengan bayangan yang dibuat oleh pengguna sendiri. Artinya, Anda dapat menggunakan
generator bayangan klasik untuk melengkapi koleksi dengan gaya Anda sendiri. Dengan mengklik tombol Simpan dan Tambah Berikutnya, Anda dapat membuat jumlah kelas tanpa batas. Kelas yang dihasilkan pertama dan selanjutnya diberi nomor urut yang tidak ada dalam koleksi. Gaya yang dihasilkan dapat dengan mudah disalin dan ditempelkan ke file root css proyek Anda atau ke file box-shadows.min.css yang dibuat di situs koleksi.
Sekarang kami berencana untuk memperluas koleksi dan mengkonfigurasi paket npm, tetapi ada beberapa kesulitan kecil dengan ini. Karena itu, sementara saya berharap untuk menerima tautan
cdnjs dan pengembangan lebih lanjut dari proyek ini.
GitHubPagePage