Di mana jadinya desainer web tanpa CSS? Belum lama berselang, sesuatu yang sederhana seperti drop shadow membutuhkan penggunaan grafis. Sekarang, ini soal menulis satu atau dua baris kode.
Itu bagus untuk menambahkan beberapa efek dasar ke teks dan wadah Anda. Tapi itu juga mungkin untuk pergi di atas dan di luar. Dengan CSS, Anda dapat membuat beberapa bayangan yang sangat mengesankan yang menyaingi yang ditemukan di alat seperti Photoshop.
Efek ini membantu elemen menonjol sambil memberikan kedalaman dan perspektif visual. Sungguh menakjubkan apa yang bisa dilakukan sedikit bayangan untuk sebuah desain.
Kami menjelajahi CodePen untuk menemukan contoh utama efek bayangan CSS yang sedang beraction. Berikut adalah beberapa cuplikan teratas yang mencakup kepekaan sehari-hari dan kompleksitas yang menakjubkan.
Bayangan kotak CSS yang indah oleh Airen
CSS box-shadow properti sangat fleksibel – dan cuplikan ini adalah buktinya. Dengan 90+ contoh efek berbeda, Anda pasti akan menemukan yang sesuai dengan kebutuhan Anda. Tandai yang ini sebagai referensi praktis.
Lihat Pena Bayangan kotak CSS yang indah oleh Airen
Kesalahan 404 Desain halaman BOOTSTRAP oleh Ahmad
Kesalahan 404 ini menawarkan pandangan unik tentang bayangan. Ini menggabungkan transformasi CSS dan elemen yang diposisikan secara mutlak untuk menciptakan tampilan miring untuk setiap wadah. Hasilnya adalah estetika yang keren dengan aliran visual yang menonjol.
Lihat Pena Kesalahan 404 Desain halaman BOOTSTRAP oleh Ahmad
Stroke, Bayangan + Efek Halftone oleh Mark Mead
Penggunaan bayangan secara kreatif dapat membawa pekerjaan Anda ke beberapa tempat yang menyenangkan. Di sini, mereka digunakan untuk membuat pilihan tampilan offset, termasuk pola SVG halftone. Mereka menciptakan suasana hati yang ringan yang cocok dengan fitur-fitur seperti judul halaman dan area pahlawan.
Lihat Pena Stroke, Bayangan + Efek Halftone oleh Mark Mead
Animasi teks gaya Netflix dengan CSS oleh Nooray Yemon
Efek “Netflix” yang terlihat di sini termasuk bayangan panjang ikonik yang menghilang ke hasil akhir. Ini adalah animasi keyframe CSS yang relatif mendasar, namun memberikan dampak yang berani – seperti pembukaan acara favorit Anda. Lebih baik lagi adalah Anda dapat menyesuaikan teks langsung dari dalam browser Anda.
Lihat Pena Animasi teks gaya Netflix dengan CSS oleh Nooray Yemon
Efek bayangan teks neon oleh Erik Jung
Kita cenderung melihat bayangan digunakan untuk menciptakan kontras – tidak demikian halnya di sini. Sebagai gantinya, text-shadow properti menyediakan karakter ini dengan tampilan neon. Tambahkan sedikit animasi dan Anda memiliki judul atau logo yang menarik perhatian.
Lihat Pena Efek bayangan teks neon oleh Erik Jung
Tombol Email CSS Animasi oleh Jake Giles-Phillips
Bayangan juga dapat digunakan untuk meningkatkan efek pencahayaan, seperti yang kita lihat dengan amplop ini. Arahkan kursor ke objek dan perhatikan bagaimana bayangan perspektif menyusut saat amplop bergerak mendekatinya. Meski bukan daya tarik utama, itu tentu menambah sentuhan realisme.
Lihat Pena Tombol Email CSS Animasi oleh Jake Giles-Phillips
CSS efek bayangan teks berlapis oleh Shireen Taj
Di antara trik tersembunyi di balik text-shadow adalah kemampuan untuk bayangan lapisan – semua dalam properti yang sama. Secara keseluruhan, ada sembilan lapisan yang digunakan untuk membuat teks 3D warna-warni ini. Dan sementara cuplikan ini memiliki getaran retro yang keren, ada banyak kemungkinan tambahan.
Lihat Pena CSS efek bayangan teks berlapis oleh Shireen Taj
Bayangan pada Bentuk oleh Chris Coyier
Menambahkan bayangan ke bentuk non-persegi panjang mungkin tidak tampak seperti masalah besar. Tapi itu tidak selalu mungkin di web. Di sini, Chris Coyier menunjukkan bahwa, dengan menggunakan CSS filter properti, kita dapat membuat bayangan yang mengikuti dengan sempurna di sepanjang jalur bentuk kustom.
Lihat Pena Bayangan pada Bentuk oleh Chris Coyier
Masuki Bayangan dengan CSS
Ya, drop shadow klasik masih hidup dan sehat. Tapi, berkat CSS, begitu juga berbagai efek bayangan lainnya. Ini berarti Anda dapat membuat sesuatu yang benar-benar unik tanpa meninggalkan editor kode Anda.
Baik Anda ingin menambahkan sentuhan kelas yang halus atau sesuatu yang lebih ekstrem, cuplikan di atas dapat menunjukkan cara mewujudkannya. Dan itu mungkin lebih mudah dari yang Anda pikirkan.
Mencari lebih banyak efek bayangan CSS? Pergilah ke kami Koleksi CodePen dan mulai menjelajah.
