Cara Membuat Kesan 'Meningkatkan Langsir' di CSS

Kesan CSS ini, yang saya panggil "Meningkatkan Langsir," mencipta peralihan yang menarik secara visual pada tatal. Latar belakang beralih dari gelap ke cahaya, manakala kandungan melekit di atas peralihan dari cahaya ke gelap.

Begini bagaimana ia kelihatan dalam aplikasi dunia nyata: [pautan ke contoh - gantikan dengan pautan sebenar jika tersedia]

Bersedia untuk belajar bagaimana membuat kesan ini? Mari kita menyelam ke dalam pelaksanaan HTML dan CSS yang mudah.

Struktur HTML

Untuk kejelasan, kami akan menggunakan versi mudah:

<div class="curtain">
  <div class="invert">
    <h2>Tajuk Seksyen</h2>
  </div>
</div>

Ini menggunakan bekas .curtain untuk kesan latar belakang, elemen kanak -kanak .invert untuk kandungan melekit, dan<h2></h2> untuk tajuk.

Pembolehubah CSS

Kami akan menentukan pembolehubah CSS untuk penyesuaian mudah:

 : root {
  --minh: 98VH;
  -Color1: gandum;
  -Color2: MidnightBlue;
}

Pembolehubah ini mengawal ketinggian kontena ( --minh ), warna cahaya ( --color1 ), dan warna gelap ( --color2 ).

Membuat kesan tirai

Unsur .curtain menggunakan kecerunan linear untuk perpecahan latar belakang dan min-height untuk ruang bawah tambahan:

 .curtain {
  Imej latar belakang: Gradien linear (ke bawah, var (-color2) 50%, var (-color1) 50%);
}

.Curtain :: selepas {
  Kandungan: "";
  paparan: blok;
  min-ketinggian: var (-minh);
}

The ::after pseudo-element mewujudkan ilusi ruang tambahan, memastikan kandungan melekit kekal di dalam bekas.

Melaksanakan kandungan melekit

The .invert kelas gaya kandungan melekit:

 .invert {
  Kedudukan: melekit;
  Atas: 20px;
  Mix-Blend-Mode: Perbezaan;
  Paparan: Flex;
  Align-item: pusat;
  Justify-Content: Center;
  min-ketinggian: var (-minh);
}

H2 {
  warna: var (-color1);
}

position: sticky dan top membuat kesan melekit. mix-blend-mode: difference menggabungkan warna kandungan dengan kecerunan latar belakang, mewujudkan kesan songsang. Flexbox pusat kandungan.

mix-blend-mode: difference menghasilkan kesan penyongsangan. Untuk penjelasan visual nilai mix-blend-mode , lihat Demo Almanak CSS-Tricks ini: [Pautan ke Demo CSS-Tricks-Gantikan dengan pautan sebenar jika tersedia].

Demo dan pertimbangan

Demo langsung yang mempamerkan kesannya boleh didapati di sini: [pautan ke demo - gantikan dengan pautan sebenar jika tersedia]

Nota Penting:

• Imej dalam kandungan melekit mungkin tidak berfungsi dengan baik dengan penyongsangan warna. Pertimbangkan menggunakan SVGs atau PNGs telus.
• mix-blend-mode: difference tidak berfungsi dengan baik dengan sifat-sifat tertentu seperti transform pada bekas.

Teknik ini menawarkan penyelesaian yang bersesuaian dengan penyemak imbas untuk mewujudkan kesan "meningkatkan langsir" yang hanya menggunakan HTML dan CSS. Beritahu saya dalam komen bagaimana anda menggunakan kesan ini!

Atas ialah kandungan terperinci Cara Membuat Kesan 'Meningkatkan Langsir' di CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!