Bayang Fotorealistik dalam CSS dengan Drop-Shadow

pengenalan

Baru-baru ini, kami menghadapi cabaran untuk mencipta bayang-bayang fotorealistik untuk projek baharu yang kami lakukan dengan Little Thai. Selepas penyelidikan yang meluas, kami mendapati bahawa tidak banyak maklumat yang tersedia. Kami mula membangunkan teknik kami sendiri menggunakan arahan drop-shadow dalam CSS, dan hasilnya sangat menakjubkan. Hari ini kami ingin berkongsi dengan komuniti bagaimana kami mencapainya, supaya semua orang boleh mendapat manfaat daripada kemajuan ini.

Keperluan untuk bahagian pembangunan ini adalah jelas; kami memerlukan bayang-bayang fotorealistik untuk produk di kedai Little Thai. kenapa? Ideanya adalah untuk mencipta pameran digital supaya pengguna boleh membeli produk yang ditawarkan oleh syarikat ini. Idea cadangan adalah untuk menunjukkan produk dengan perspektif pandangan atas seolah-olah ia diletakkan di atas meja. Untuk menjadikannya lebih realistik, kami memerlukan bahan-bahan ini untuk mempunyai bayang-bayang fotorealistik. Pada ketika ini, terdapat dua pilihan. Di satu pihak, ia boleh dilakukan dengan Photoshop. Video ini menerangkan cara melakukannya dengan cara itu. Sebaliknya, ia boleh dilakukan dengan CSS menggunakan arahan bayang-bayang titisan baharu.

Ini adalah satu cabaran kerana, seperti yang kami nyatakan, tidak ada maklumat tentang cara membuat bayang-bayang yang realistik dalam Photoshop. Walau bagaimanapun, ini menyelamatkan kami daripada mengedit berpuluh-puluh produk di kedai dalam Photoshop dan, lebih-lebih lagi, tidak perlu mengedit setiap kali produk baharu ditambahkan. Bagaimanakah ia dilakukan kemudian?

Teknik

Arahan bayang-bayang dalam CSS ialah alat yang berkuasa untuk menambahkan bayang-bayang pada elemen grafik. Walau bagaimanapun, penggunaannya tidak selalunya mudah apabila mencari kesan fotorealistik. Penyelesaian kami adalah berdasarkan penggunaan berbilang bayang dengan parameter berbeza untuk mencapai kesan yang lebih mendalam dan realistik.

Kod CSS Digunakan

Berikut ialah kod CSS yang kami gunakan untuk mencipta bayang-bayang fotorealistik:

penapis: drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

Penerangan Kod

Bayang-bayang titisan pertama: 17px 17px 13px rgba(0, 0, 0, 0.3): Bayang-bayang ini adalah yang terbesar dan paling meresap. Parameter menunjukkan bayang yang disesarkan 17px kedua-duanya pada paksi X dan Y, dengan kekaburan 13px dan kelegapan 30%.

Bayang-bayang jatuh kedua: 7px 7px 4.5px rgba(0, 0, 0, 0.3): Bayang-bayang ini lebih kecil dan kurang meresap daripada yang pertama. Parameter menunjukkan bayang-bayang yang disesarkan 7px kedua-duanya pada paksi X dan Y, dengan kekaburan 4.5px dan kelegapan 30%.

Gabungan dua bayang ini mewujudkan deria kedalaman dan realisme yang sukar dicapai dengan satu bayang.

Contoh Visual Berikut ialah contoh visual bagaimana hasil akhir kelihatan menggunakan teknik bayangan fotorealistik kami:

Adalah penting untuk menyerlahkan dua perkara:

— Bayang berfungsi paling baik pada ton kelabu lembut berbanding putih tulen.

— Dalam kes ini, bayang-bayang direka bentuk untuk perspektif pandangan atas. Dalam sudut fotografi lain, ia tidak akan berfungsi dengan baik.

Aplikasi Praktikal

Teknik ini boleh digunakan dalam pelbagai konteks, daripada imej produk di kedai dalam talian kepada elemen grafik di tapak web korporat. Keupayaan untuk mencipta bayang-bayang yang realistik boleh meningkatkan penampilan visual dan kualiti projek dengan ketara.

Penjana Bayang Fotorealistik Dalam Talian dalam CSS

Anda boleh mencari penjana dalam talian di Laman Web MandarinaWebs

Kesimpulan

Kami sangat teruja untuk berkongsi teknik ini dengan komuniti pembangun dan pereka bentuk. Kami percaya ia boleh menjadi alat yang berharga untuk mana-mana profesional yang ingin meningkatkan estetika projek web mereka. Kami ingin mendengar maklum balas anda dan melihat cara anda menggunakan teknik ini dalam kerja anda sendiri.

Atas ialah kandungan terperinci Bayang Fotorealistik dalam CSS dengan Drop-Shadow. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!