8 Cuplikan CSS yang Mendemonstrasikan Kekuatan Efek Bayangan

8 Cuplikan CSS yang Mendemonstrasikan Kekuatan Efek Bayangan

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 beraksi. 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.

Hit play on your imagination