Cara membuat folder 'celah' kesan dengan CSS

menyerupai kesan kertas yang sedikit terdedah dari folder, atau kesan visual kad kredit sedikit dari dompet, yang dipanggil kesan "retak" dalam reka bentuk. Dengan CSS, kita boleh mencipta ilusi visual ini dengan bijak, menjadikan elemen kelihatan dicucuk dari pembukaan.

Kunci reka bentuk adalah bayangan, yang memberikan petunjuk visual yang menyiratkan retak. Kemudian terdapat unsur -unsur yang meliputi retak, menyediakan ruang untuk unsur -unsur mengintip dari bawah.

bersama -sama kita akan membuat kesan seperti ini:

Buat Shadow Pertama

Anda mungkin terkejut mendapati bahawa bayang -bayang dalam contoh tidak dibuat menggunakan bayang -bayang CSS sebenar (seperti

atau box-shadow penapis). Sebaliknya, bayang -bayang itu sendiri adalah elemen bebas, lebih gelap dan kabur dalam warna. Ini adalah penting untuk menjadikan reka bentuk lebih mudah disesuaikan dalam keadaan lalai dan animasi. drop-shadow()

Satu lagi elemen adalah lapisan, yang bertindih di atas bayang -bayang. Imej berikut menunjukkan bagaimana bayang -bayang dan lapisan digabungkan bersama.

Bayang -bayang terdiri daripada segi empat tepat yang kecil dan tegak dengan latar belakang kecerunan. Kecerunan lebih gelap di tengah. Oleh itu, apabila elemen itu kabur, ia mewujudkan bayang-bayang yang lebih gelap di tengah-tengah;

Separuh kiri bayangan yang diterbitkan semula kini dilindungi oleh segi empat tepat di bahagian atas, yang mempunyai warna yang sama seperti warna latar belakang bekasnya.

Overlay dan Shadow kemudian bergerak sedikit ke kiri untuk menjadikannya kelihatan seperti berlapis.

Rawat penutup

Untuk menggabungkan overlay dengan latar belakang yang direka, warna latar belakangnya mewarisi dari unsur -unsur yang terkandungnya. Sebagai alternatif, bergantung kepada pilihan dan keperluan reka bentuk anda, anda juga boleh cuba menggunakan standard seperti topeng CSS dan mod pengadunan untuk menggabungkan lapisan dengan latar belakangnya.

Beberapa asas mengenai cara menerapkan piawaian ini, anda boleh merujuk kepada artikel berikut: "Masking vs Clipping: Bilakah menggunakan setiap" oleh Sarah Drasner memberikan pengenalan yang sangat baik kepada topeng. Saya juga menulis mengenai mod Hibrid CSS dalam siaran ini di mana anda boleh menyemak topik yang berkaitan.

Dalam kod sumber contoh saya, anda akan melihat bahawa saya menyelaraskan dan menyusun unsur -unsur dalam

unsur menggunakan grid CSS (standard susun atur yang sering saya gunakan dalam demo saya). Jika anda mencipta reka bentuk yang sama, gunakan kaedah susun atur yang paling sesuai dengan aplikasi anda untuk menyelaraskan bahagian -bahagian reka bentuk yang berlainan. Dalam kes ini, saya menyediakan satu grid lajur pada elemen <main></main>, yang membolehkan saya memusatkan lapisan, bayangan, dan imej. <main></main>

grid CSS juga membolehkan saya menetapkan ketiga -tiga div supaya mereka semua lebar penuh dalam bekas

: <main></main>

main > div {
  grid-area: 1 / 1;
}

Ini menjadikan semuanya disusun bersama -sama. Sering kali, kita akan cuba mengelakkan menutup unsur -unsur dengan unsur -unsur lain dalam grid. Tetapi contoh ini bergantung pada ini. Saya telah menetapkan lebar .slit-cover hingga 50%, yang secara semulajadi akan menunjukkan imej di bawah. Dari sana, saya menetapkan transformasi untuk memindahkannya 50% dalam arah negatif, ditambah saya memindahkan sedikit bayang -bayang (25px) sebelum memastikan ia dipaparkan juga.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

itu sahaja! Retak yang sangat semula jadi yang menyerupai sesuatu yang mengintip dari folder, dompet atau apa-apa lagi.

Terdapat lebih banyak cara untuk melakukan ini! Sebagai contoh, Flexbox boleh membuat unsur -unsur bersatu dan pusat sejajar seperti ini. Terdapat banyak cara untuk membuat elemen muncul bersebelahan. Mungkin anda boleh menggunakan atribut

, box-shadow penapis, atau penapis SVG untuk mendapatkan kesan bayangan yang sama, yang benar -benar meningkatkan ilusi. drop-shadow()

Anda boleh menyesuaikannya kerana anda ingin melihat dan merasakan anda sendiri. Sebagai contoh, cuba bertukar bayang -bayang dan lokasi imej. Atau bermain dengan kombinasi warna dan tukar nilai penapis

. Bentuk lapisan dan bayang -bayang juga boleh diselaraskan - Saya percaya anda boleh membuat bayangan melengkung dan bukannya bayangan lurus dan berkongsi dengan kami dalam komen! blur()

Atas ialah kandungan terperinci Cara membuat folder 'celah' kesan dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!