Halo semuanya!
Tentunya, beberapa dari Anda telah memperhatikan bahwa situs yang berbeda menggunakan jenis bayangan yang hampir sama dalam blok, panel navigasi, dan wadah lainnya, plus atau minus beberapa piksel untuk transparansi. Saya menganalisis sejumlah situs populer, baik milik kami maupun asing, dan mencoba mengumpulkan sedekat mungkin parameter bayangan yang digunakan menjadi satu koleksi besar, atau perpustakaan. Kepada siapa lebih nyaman. Saya harap seseorang berguna.
Tujuan utama dari proyek ini adalah untuk memfasilitasi pekerjaan para perancang dan pengembang web pemula dalam menciptakan desain yang menyenangkan dan modern. Mungkin desainer berpengalaman akan menggambar sendiri sesuatu yang menarik dari pengembangan ini.
Perpustakaan akan nyaman bagi mereka yang belum punya waktu untuk sepenuhnya mempelajari tata letak, tetapi ingin membuat bayangan indah pada tombol, blok, dll. Dengan demikian, Anda dapat menyederhanakan pekerjaan dengan blok dan mengurangi waktu untuk memilih bayangan css di generator.
Box-shadows.css
Box-shadows.css adalah kumpulan bayangan css sederhana dan bagus (bayangan kotak) untuk proyek Anda. Kelas utama menggunakan kelas
.bShadow sederhana. Sekarang koleksi memiliki lebih dari 50 opsi yang relevan untuk bayangan dengan angka, serta tiga kelas terpisah
.bShadow ,
.bShadow-light dan
.bShadow-inset . Mereka bagus untuk digunakan dalam tabel, untuk isi halaman rumah, wadah, navigasi, dan blok lain dari situs Anda.
Menekan sejumlah pertanyaan, saya akan segera menjelaskan mengapa angka digunakan, dan bukan nama atau kelas seperti
bShadow-01040-00 .
Koleksi tidak menggunakan nama independen, seperti yang dilakukan di animate.css, karena untuk proyek ini agak tidak dapat diterima. Bayangan balok bertambah secara bertahap, dengan berbagai penyimpangan, dan karena urutan angka Anda dapat memilih opsi terbaik untuk diri sendiri, tanpa menghafal nama-nama individu. Ini sangat menyederhanakan pekerjaan dengan koleksi.
Koleksinya memiliki
sejumlah fitur lain , misalnya, penggunaan
efek hover , dengan peralihan yang mulus di antara bayangan.
Fungsi tambahan
Situs proyek secara visual sederhana, tetapi memiliki fungsi yang cukup untuk sepenuhnya menyesuaikan dan memilih kelas dan gaya yang diperlukan. Situs ini ditulis dalam bahasa Inggris, tetapi bagi mereka yang belum fasih berbahasa ini, ada yang beralih ke bahasa Rusia.
Pilihan bayangan
Situs ini memiliki fungsi pratinjau di mana Anda dapat menentukan warna latar belakang dan wadah situs Anda untuk pemilihan bayangan lebih lanjut. Pemilihan bayangan dan kelas dilakukan dengan memilih opsi atau melayang di atas blok. Hasilnya ditampilkan sebagai bayangan wadah situs utama.
Generator file Min.css
Situs ini juga memiliki
generator file box-shadows.min.css dengan instruksi yang memungkinkan pengguna untuk membuat file sendiri, hanya terdiri dari kelas yang ia pilih. Ini akan membantu mengurangi beban di situs jika proyek Anda menggunakan kurang dari dua atau tiga bayangan.
Generator kotak-bayangan Css
Anda dapat menggunakan
generator bayangan kotak css klasik untuk melengkapi koleksi Anda dengan gaya Anda sendiri. Dengan mengklik tombol Simpan dan Tambah Berikutnya, Anda dapat membuat jumlah kelas tanpa batas. Kelas yang dihasilkan pertama dan selanjutnya diberikan nomor seri yang bukan bagian dari koleksi. Anda dapat menyalin gaya yang dihasilkan dan menempelkannya di root css atau file bayangan kotak yang dibuat di situs.
min.css .
Coba bereksperimen. Ini adalah pekerjaan yang sangat menarik.
Sekarang pengembangan sedang dikembangkan dan satu set 200 bintang di GitHub, untuk tautan ke cdnjs. Saya berharap Anda menggunakan yang menyenangkan dan sukses kreatif. Jika Anda memiliki saran, komentar, atau saran untuk meningkatkan proyek, tulis di komentar.
GitHub ·
Situs web