Mewujudkan pantulan realistik dengan CSS

Dalam reka bentuk, refleksi adalah imej cermin yang bergaya objek. Walaupun mereka tidak begitu popular seperti bayang-bayang, mereka mempunyai detik-detik mereka-hanya berfikir tentang kali pertama anda meneroka format fon yang berbeza di MS Word atau PowerPoint: Saya bertaruh Refleksi adalah gaya kedua yang paling anda gunakan, bersebelahan dengan bayang-bayang, yang lain seperti Outline dan Glow. Atau mungkin anda ingat apabila refleksi adalah semua kemarahan ketika Apple menggunakannya pada hampir segala -galanya.

Refleksi masih sejuk! Dan tidak seperti tahun yang lalu, kita sebenarnya boleh membuat pantulan dengan CSS! Inilah yang akan kita buat dalam artikel ini:

Terdapat dua langkah untuk reka bentuk refleksi:

1. Buat salinan reka bentuk asal.
2. Gaya salinan itu.

Cara yang paling sahih dan piawai untuk mendapatkan imej cermin di CSS sekarang ialah menggunakan harta elemen (). Tetapi ia masih dalam fasa eksperimennya dan hanya disokong di Firefox, pada masa menulis artikel ini. Jika anda ingin tahu, anda boleh menyemak artikel ini saya menulis bahawa eksperimen dengannya.

Jadi, bukannya elemen (), saya akan menambah dua reka bentuk yang sama dan menggunakannya sebagai refleksi dalam contoh saya. Anda boleh mengodkan bahagian ini untuk dinamik menggunakan JavaScript, atau menggunakan unsur-unsur pseudo, tetapi dalam demo saya, saya menggunakan sepasang elemen yang sama setiap reka bentuk.

 <dana>
  <div> Trinket </div>
  <div> Trinket </div>
</dana>

 .Units> * {
  imej latar belakang: url ('image.jpeg');
  Latar Belakang: Teks;
  warna: telus;
  / * dll */
}

Reka bentuk asal adalah grafik teks knock-out yang dibuat dari gabungan imej latar belakang, warna teks telus, dan sifat klip latar belakang dengan nilai teksnya.

Elemen bawah pasangan kemudiannya terbalik dan bergerak lebih dekat ke reka bentuk asal menggunakan Transform. Inilah pantulan:

 .Units>: anak terakhir {
  Transform: RotateX (180Deg) Translatey (15px); 
}

Elemen bawah yang kini terbalik akan mengambil beberapa gaya untuk menghasilkan pudar dan kesan grafik lain pada pantulan. Pudar refleksi secara beransur -ansur dapat dicapai dengan imej kecerunan linear yang digunakan sebagai lapisan topeng pada unsur terbalik.

 .Units>: anak terakhir {
  Transform: RotateX (180Deg) Translatey (15px); 
  Imej Mask: Linear-Gradient (telus 50%, putih 90%);
}

Secara lalai, mod topeng topeng-imej adalah alpha. Ini bermakna bahagian telus imej, apabila imej digunakan sebagai lapisan topeng untuk elemen, putar kawasan yang sama dengan elemen telus juga. Itulah sebabnya gradien linear dengan penggredan telus di bahagian atas memudar keluar refleksi terbalik pada akhirnya.

Kita juga boleh mencuba gaya kecerunan lain, dengan atau tanpa menggabungkannya. Ambil satu ini dengan jalur, sebagai contoh. Saya menambah corak bersama dengan kesan pudar dari sebelumnya.

 .Units>: anak terakhir {
  / * ... */
  Imej Mask: 
    mengulang-linear-gradien (telus, telus 3px, putih 3px, 4px putih),
    linear-gradient (telus 50%, putih 90%);
}

Atau yang ini dengan gradien radial:

 .Units>: anak terakhir {
  / * ... */
  Imej Mask: Radial-Gradient (bulatan di tengah, putih, telus 50%);
}

Idea lain adalah untuk memusnahkan imej cermin dengan menambahkan condong () ke harta mengubah. Ini memberikan beberapa pergerakan kepada refleksi.

 .Units>: anak terakhir {
  / * ... */
  Transform: RotateX (180Deg) Translate (15px) Skew (135Deg) TranslateX (30px);
}

Apabila anda memerlukan refleksi untuk menjadi halus dan lebih seperti bayangan, kemudian mengaburkannya, mencerahkannya, atau mengurangkan kelegapannya, boleh melakukan silap mata.

 .Units>: anak terakhir {
  / * ... */
  Penapis: Blur (4px) Kecerahan (1.5);
}

Kadang -kadang refleksi juga boleh menjadi bayangan sendiri, jadi, bukannya menggunakan imej latar belakang (dari reka bentuk asal) atau warna blok untuk teks, saya cuba memberikan refleksi satu siri bayang -bayang lutut warna merah, biru dan hijau yang berjalan lancar dengan reka bentuk asal.

 .Units>: anak terakhir {
  / * ... */
  bayang-bayang teks: 
    0 0 8px RGB (255 0 0 / .4),
    -2px -2px 6px rgb (0 255 0 / .4),
    2px 2px 4px rgb (0 255 255 / .4);
}

Adakah nilai -nilai RGB () kelihatan pelik? Itulah sintaks baru yang merupakan sebahagian daripada beberapa ciri warna CSS baru yang menarik.

Mari kita bawa semua pendekatan ini dalam satu demo besar:

Membungkus

Kunci untuk refleksi yang baik adalah dengan kesan yang lebih halus daripada objek utama, tetapi tidak begitu halus sehingga sukar untuk diperhatikan. Kemudian ada pertimbangan lain, termasuk warna, arah, dan bentuk refleksi.

Saya harap anda mendapat inspirasi dari ini! Pasti, semua yang kita lihat di sini adalah teks, tetapi refleksi boleh berfungsi dengan baik untuk mana -mana elemen yang menarik dalam reka bentuk yang mempunyai ruang yang cukup masuk akal di sekelilingnya dan boleh mendapat manfaat daripada refleksi untuk meningkatkan dirinya pada halaman.

Atas ialah kandungan terperinci Mewujudkan pantulan realistik dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!