Sinaran matahari petang awal Penapisan melalui daun mencipta cahaya yang tenang dan hangat. Artis menguasai menggunakan "cahaya yang dilapisi" ini untuk mencapai kesan yang lembut dan memukau. Kita boleh meniru rupa yang mempesonakan ini dalam reka bentuk web, bernafas kehidupan baru ke dalam kandungan yang tidak biasa dengan menggunakannya kepada foto dan ilustrasi. Tutorial ini menunjukkan pendekatan berasaskan CSS yang mudah.

Sebelum menyelam ke dalam kod, pemahaman komposisi Light yang dilancarkan adalah penting. Ia terdiri daripada patch cahaya besar, bulat atau elips yang diselingi dengan bayang -bayang yang dilemparkan oleh dedaunan - cahaya yang tergelincir daun dan cawangan yang lalu. Bayang -bayang ini sering mempamerkan tepi yang lembut, kabur, hasil cahaya melalui banyak, ruang yang kurang jelas, meresap dan memutarbelitkan cahaya kerana ia memancarkan bayang -bayang dari jauh.

Perhatikan perbezaan di antara dinding putih biasa dan satu yang diterangi oleh cahaya yang dilancarkan: [Perbandingan ilustrasi akan pergi ke sini]

Tutorial ini mencipta kesan menggunakan teks (huruf, simbol, emojis), memanfaatkan bayang -bayang CSS dan menggabungkan untuk meniru kesenian alam semula jadi. Kaedah alternatif juga akan diterokai.

Menetapkan panggung

Kami akan menggunakan elemen teks - huruf, simbol, emojis - untuk mewakili patch cahaya. Ini akan menjadi warna pucat, lut, yang bertujuan untuk kesan lembut dan tersebar dan bukannya berbeza. Watak -watak elips atau bujur adalah ideal, mencerminkan pelbagai bentuk cahaya yang berlapis. Eksperimen adalah kunci untuk mencapai estetika yang dikehendaki. Untuk contoh ini, kita akan menggunakan?,?, Dan \ untuk bentuk elips dan slanted mereka.

Watak -watak ini dibungkus dalam perenggan dalam elemen .backdrop bapa.

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>

The .backdrop berfungsi sebagai permukaan di mana cahaya dan bayang -bayang diproyeksikan. Ia menggunakan imej latar belakang untuk tekstur, mempunyai lebar dan ketinggian yang jelas, dan overflow: hidden untuk mengandungi bayang -bayang yang melangkaui sempadannya. Grid CSS memusatkan elemen cahaya:

 .backdrop {
  Latar Belakang: Pusat / Tutup URL No-Repeat ('image.jpeg');
  lebar: 400px; Ketinggian: 240px;
  Limpahan: Tersembunyi;
  paparan: grid;
}
.backdrop> * {
  Grid-Area: 1/1;
}

Penjajaran tepat bentuk tidak kritikal; tumpang tindih cukup. Jangan ragu untuk menyesuaikan kedudukan untuk corak cahaya yang unik.

Menggayakan Cahaya Dappled dengan CSS

Ciri-ciri utama CSS untuk emojis adalah: warna telus, latar belakang hitam separuh telus (menggunakan rgba() ), bayang teks putih kabur, saiz fon besar, dan mix-blend-mode untuk melicinkan:

 .shapes {
  warna: telus;
  latar belakang warna: RGBA (0, 0, 0, 0.3);
  Teks-bayang-bayang: 0 0 40px #fff;
  Font: Bolder 320PT/320PT Monospace;
  Mix-Blend-Mode: Multiply;
}

mix-blend-mode: multiply menggabungkan warna elemen dengan bekasnya, yang membolehkan latar belakang menunjukkan melalui warna cahaya sambil mengekalkan warna-warna gelap, menghasilkan kesan cahaya yang lebih semula jadi.

Menapis warna dan kontras

Untuk meningkatkan kecerahan imej latar belakang, filter: brightness(1.6) digunakan. Sebagai alternatif, background-blend-mode boleh menggabungkan pelbagai latar belakang. Emojis juga boleh digunakan sebagai imej latar belakang, seperti yang ditunjukkan di bawah:

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ?
    </div>
  </foreignobject></svg>

Untuk bentuk imej tersuai, kabur tepi untuk kesan cahaya lembut menggunakan penapis CSS blur() . @supports boleh digunakan untuk pelarasan bayangan khusus penyemak imbas.

Mari kita kembali semula contoh awal dan tambahkan kandungan:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>


  
  Sepuluh tempat pelancongan teratas untuk percutian musim panas



  Inilah tempat yang paling popular ...

.backdrop dan .shapes gaya tetap sama. .content Menggunakan isolation: isolate untuk mencipta konteks penyusunan baru, mencegah pengadunan dengan kesan cahaya yang dilapisi.

Menghidupkan sumber cahaya

Animasi halus ditambah menggunakan @keyframes On .backdrop:hover :

 .backdrop: hover> .shapes: nth-of-type (1) {
  Animasi: 2s mudah bergerak alternatif yang tidak terhingga;
}
.backdrop: hover> .shapes: nth-of-type (2): hover {
  Animasi: 4S mudah-dalam-keluar alternatif yang tidak terhingga-1;
}

@keyframes bergerak {
  dari {text -indent: -20px; }
  ke {teks-inden: 20px; }
}
@KeyFrames Move-1 {
  dari {text -indent: -60px; }
  ke {teks-inden: 40px; }
}

Animasi text-indent mencipta pergerakan halus, meniru awan beralih dan mengubah arah cahaya.

Kesimpulan

Tutorial ini menunjukkan cara membuat kesan cahaya yang dilancarkan menggunakan CSS, menarik inspirasi dari alam dan seni. Kunci terletak pada memohon warna ke elemen teks menggunakan bayang-bayang teks kabur untuk latar belakang cahaya dan separa telus untuk bayang-bayang. Latar belakang bertekstur dengan kontras yang mencukupi melengkapkan kesannya.

Atas ialah kandungan terperinci CSS yang tenang kesan cahaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!