Tambahkan suar kanta CSS ke foto untuk sentuhan yang cerah

JJ Abrams电影的忠实影迷一定对影片中精巧的剧情、妙语连珠的对话，以及标志性的变形镜头光晕印象深刻。 Pembuat filem seperti Abrams dengan bijak menggunakan suar lensa untuk menambah sentuhan realisme "buatan tangan" kepada filem itu. Trik ini mudah disalin dalam alat seperti Photoshop dan kemudian ditambahkan ke laman web kami sebagai imej raster.

但如果我们想在无需使用图像编辑工具的情况下实现同样的镜头光晕效果呢？ Kami boleh membuat suar kanta CSS yang menambah tekstur sinematik ke imej galeri kami, foto latar belakang, atau avatar pengguna.

Terdapat pelbagai jenis suar lensa dalam fotografi. Apa yang kita hadapi adalah fenomena yang dipanggil artifak yang meninggalkan bintik -bintik kecil di mana cahaya memasuki dan mencerminkan dari permukaan lensa, berbentuk seperti aperture kamera.

Berikut adalah contoh yang sangat baik dari suar lensa yang akan kita buat, dan secara semulajadi, ia diambil secara langsung dari filem JJ Abrams:

Lensa lensa di atas mengandungi beberapa bahagian. Mari kita senaraikan mereka sehingga kita tahu apa yang kita inginkan:

1. Sumber cahaya pusat muncul sebagai bola cahaya yang bercahaya.
2. Terdapat beberapa sinar elips mendatar -cahaya yang menyimpang dan kabur yang membentuk bentuk elips yang panjang.
3. Cahaya rawak memancarkan dari sumber cahaya pusat pada sudut yang berbeza.

Mari kita mulakan dengan elemen HTML di bawah yang sepadan dengan komponen Halo. Terdapat sumber cahaya pusat dan dua halos bulat yang menyimpang dari suar lensa, tiga lensa mendatar dan tiga conical ray-like halos.

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Akhirnya, agar suar kanta kami benar -benar ditumpukan pada imej, sumber cahaya pusatnya mesti laras. Dengan cara ini, kita boleh meletakkannya pada sumber cahaya sedia ada yang dipercayai pada gambar tanpa bertindih dengan mana -mana muka.

Latar belakang dan sumber cahaya untuk suar kanta CSS

Mari kita mulakan dengan latar belakang hitam dan pusat cahaya pusat suar kanta CSS. Kebanyakan kecerunan di rangkaian adalah kecerunan linear dengan peralihan warna pepejal, tetapi kita boleh menggunakan saluran alfa kepada mereka, yang sebenarnya merupakan cara yang baik untuk menghasilkan kesan bercahaya. Kecerunan radial pekeliling dengan pelbagai lapisan warna lentur memberikan kita kesan pusat kamera yang baik.

 Latar Belakang: Radial-Gradient (
  bulatan paling dekat di tengah,
  HSL (4 5% 100% / 100%) 0%,
  HSL (4 5% 100% / 100%) 15%,
  HSL (4 10% 70% / 70%) 30%,
  HSL (4 0% 50% / 30%) 55%,
  HSL (4 0% 10% / 5%) 75%,
  telus 99%
);
Penapis: Blur (4px);

Ingin tahu mengenai sintaks HSL? Ia baru dan nampaknya arah masa depan yang mentakrifkan ketelusan alfa dalam semua fungsi warna CSS.

Perhatikan bahawa kami menggunakan penapis CSS Blur di sini untuk menjadikan kecerunan kelihatan lebih seperti lapisan cahaya yang bertaburan.

Sekarang kita tahu bagaimana untuk menambah halo bulat, kita juga akan menambah halo yang lebih besar dan tersebar di belakang sumber cahaya, bersama-sama dengan tiga halos tambahan pada sudut 45 darjah di tengah untuk membuat kesan kelihatan lebih realistik.

Tetapkan jalur cahaya mendatar

Mari kita mulakan dengan halo mendatar. Kita boleh mengambil beberapa pilihan dan kecerunan elips yang sangat langsing akan menjadi cara paling mudah untuk melakukannya. Walau bagaimanapun, saya perhatikan bahawa suar kanta mendatar biasanya tidak simetri seperti dalam gambar rujukan saya, jadi saya berharap suar lensa saya sedikit asimetri juga.

Nasib baik, kecerunan radial mempunyai parameter kedudukan pilihan dalam CSS. Kita boleh membuat dua separuh kiri dan kanan dengan saiz yang sedikit berbeza dari halo mendatar yang sama dan menggunakan warna yang sedikit berbeza. Kami juga boleh menambah penapis kelegapan untuk menjadikan kawasan di mana halo mendatar menghubungkan ke pusat kelihatan kurang mendadak.

 Latar Belakang: Radial-Gradient (
  bulatan paling dekat di tengah,
  Telus 50%,
  HSL (4 10% 70% / 40%) 90%,
  100% telus
);
Penapis: Blur (5px);

Dengan cara ini, mari juga tambahkan asas tiga oval yang langsing, tiga perempat di bawah viewport untuk menambah "realiti" yang lain.

Buat sinar meresap

Dengan halo radial dan halo mendatar, semua yang tersisa adalah cahaya yang miring yang dipancarkan dari sumber cahaya. Kita boleh menambah kecerunan radial elips tambahan dan kemudian kecondongan dan menterjemahkan bekas untuk mendapatkan penghampiran.但我们还有一个已经为这项工作准备好的CSS渐变，即锥形渐变。 Berikut adalah contoh yang memberi kita kecerunan tirus 7 darjah yang diimbangi oleh 5 darjah dari sudut kanan bawah bekasnya.

 Latar Belakang: Conic-Gradient (
  dari 5deg pada 0% 100%,
  0deg telus,
  HSL (4 10% 70% / 30%) 7deg,
  Telus 15deg
);
Transformasi-asal: kiri bawah;
Transform: berputar (-45Deg);

Kami akan menambah beberapa kecerunan tirus yang berpusat di sekitar pusat halo kami dengan sudut kecerunan dalam pelbagai warna lut. Kerana kecerunan tirus dapat menunjukkan sudut div kontenanya, kita akan memutarnya menggunakan sumber cahaya kita sebagai asalnya, mengakibatkan kesan penapis cahaya yang tersebar.

Buat lebih banyak lensa lensa yang fleksibel dengan sifat tersuai CSS

Setakat ini, kami telah mencipta kesan suar lensa yang responsif tetapi statistik yang berada dalam kedudukan tetap. Adalah sukar untuk menyesuaikan pusat suar lensa tanpa memusnahkan halos mendatar dan konik.

Untuk membuat lensa CSS menyala kedua -dua laras dan kurang rapuh, kami akan mendedahkan kedudukan, saiz, dan warna suar sumber cahaya melalui satu set sifat tersuai.

 : root {
  --Hue: 4;
  -lens-pusat saiz: 40%;
  -lens-lens-saiz: 80%;
  -lens-left: 55%;
  --lens-top: 15%;
}

Dengan cara ini, kami juga akan menyesuaikan nada halo dan ketinggian halo mendatar. Untuk lebar halo mendatar, kami menggunakan tambah nilai CSS untuk menjadikannya laras secara individu;

 .Left-Flare {
  lebar: var (-lebar kiri-lebar, var (-lens-kiri, 50%));
}

Ini adalah kesan suar lensa CSS yang dilakukan menggunakan latar belakang foto dan suar lensa bergerak ke atas untuk menjadikan kedudukan sumber cahaya kelihatan boleh dipercayai. Teruskan dan tambahkan foto anda sendiri untuk melihat bagaimana ia berfungsi dalam persekitaran yang berbeza!

Contoh Lensa CSS dan bukan CSS Lain

Sudah tentu, ini hanya satu cara untuk membuat suar kanta CSS. Saya suka pendekatan ini kerana ia fleksibel dalam warna, saiz dan kedudukan halo dan bahagiannya. Ini menjadikannya lebih seperti komponen yang boleh digunakan semula yang boleh digunakan dalam banyak persekitaran.

Keith Grant mempunyai contoh menggunakan kecerunan linear serta sifat tersuai untuk CSS. Kemudian ia menambah beberapa JavaScript di sana untuk rawak nilai HSLA.

Nicholas Guest juga mempunyai suar kanta CSS, yang menggunakan bayang-bayang kotak pada :: sebelum dan :: Selepas unsur-unsur pseudo dari elemen.

Ini dibuat dengan kanvas, yang bijak menunjukkan bagaimana sumber cahaya mengikuti tetikus ketika melayang, sambil menunjukkan bagaimana lensa suar artifak mengubah kedudukan ketika kedudukan sumber cahaya berubah.

Idea yang sama di sini:

Terdapat juga contoh yang menarik, yang menggunakan GSAP, kanvas, dan perpustakaan yang dipanggil js.lensflare:

Bagaimana anda mengendalikan kesan suar kanta CSS? Kongsi pendapat anda dalam komen!

Atas ialah kandungan terperinci Tambahkan suar kanta CSS ke foto untuk sentuhan yang cerah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!