Bagaimana untuk mengalih keluar warna isian untuk menukar warna imej menggunakan HTML dan CSS?

Dalam dunia pembangunan web, mengetahui teknologi CSS dan HTML terkini adalah penting untuk menambahkan visual yang menakjubkan pada tapak web anda. Satu kesan sedemikian ialah Kesan Penurunan Warna, yang membolehkan anda menukar warna imej pada tuding dengan meletakkan warna isian di atasnya.

Dengan kesan ini anda boleh menjadikan tapak web anda lebih interaktif dan menarik kepada pelawat anda. Dalam artikel ini, kami akan membimbing anda melalui proses mencipta kesan penurunan warna menggunakan HTML dan CSS. Jadi sama ada anda seorang pemula atau pembangun web berpengalaman, nantikan untuk mengetahui tentang visual yang menarik ini.

Apakah Kesan Warna Isian Titisan?

Kesan Warna Isian Jatuh ialah kesan visual yang digunakan pada imej atau grafik menggunakan HTML dan CSS yang menyebabkan setitik warna muncul pada imej apabila tetikus dilegarkan di atasnya, menyebabkan imej bertukar warna.

Kesan ini mencipta ilusi warna yang menitis pada imej dan merebak di atasnya, mencipta kesan dramatik dan dinamik. Kesan ini boleh digunakan untuk menambah interaktiviti dan daya tarikan visual pada tapak web, menjadikan pengguna lebih terlibat.

Untuk mencapai kesan ini kita perlu menggunakan sifat tertentu, mari kita lihat satu persatu -

• Filter Property - Sifat filter dalam CSS digunakan untuk menggunakan kesan visual pada kandungan elemen. Ia membolehkan anda melaraskan penampilan imej dan elemen grafik lain menggunakan pelbagai fungsi penapis.

Atribut

penapis boleh mengambil satu atau lebih fungsi penapis yang digunakan secara berurutan. Terdapat banyak fungsi penapis yang berbeza tersedia, setiap satu menggunakan jenis kesan visual yang berbeza.

• harta laluan klip − Sifat CSS laluan klip digunakan untuk mencipta laluan keratan, kawasan bukan segi empat tepat yang mentakrifkan kawasan yang boleh dilihat bagi sesuatu elemen. Sifat ini digunakan untuk menyembunyikan bahagian elemen yang berada di luar skop laluan keratan, mendayakan bentuk dan kesan kompleks yang sebelum ini hanya boleh dilakukan dengan topeng imej atau SVG.

• ::before pseudo-element − ::before pseudo-element dalam CSS mencipta elemen pseudo yang disisipkan sebelum kandungan elemen. Ia digunakan untuk memasukkan kandungan sebelum elemen tanpa menambah sebarang teg HTML tambahan.

::before Penggunaan biasa unsur pseudo adalah untuk menambah kandungan hiasan, seperti ikon atau bentuk, sebelum elemen. ::before elemen pseudo juga boleh digunakan untuk menambah teks, imej latar belakang dan kandungan lain.

Langkah untuk diikuti

Berikut ialah langkah-langkah yang diambil dalam contoh ini -

• Langkah 1 - Gunakan div .icon-container untuk mencipta ikon/bekas imej. Gunakan saiz kotak: kotak sempadan pada semua elemen pada halaman dan tetapkan jidar dan padding kepada 0 untuk semua elemen.

. Warna latar belakang elemen
• badan

  ditetapkan kepada kelabu gelap (#333). Langkah 3 − Seterusnya, kita perlu menambah gaya pada elemen bekas dengan kesan penurunan warna. Ia diberikan kedudukan relatif, lebar dan ketinggian 200 piksel, dan imej latar belakang yang berpusat dan meliputi keseluruhan elemen bekas. Atribut filter digunakan untuk menetapkan imej latar belakang kepada skala kelabu (iaitu hitam dan putih), dan atribut kursor

  ditetapkan kepada
penunjuk
• untuk menunjukkan kepada pengguna bahawa elemen itu boleh diklik.
  Langkah 4
- Kemudian, kami mencipta kesan penurunan warna pada hover. Gunakan

::before pseudo-elemen untuk mencipta bulatan putih yang akan dipotong pada tuding untuk mendedahkan imej latar belakang yang mendasari. Sifat laluan klip b> ditetapkan kepada

bulatan(0% pada 50% 0%)
• bermula dengan bulatan keratan dengan jejari 0% (iaitu, tiada kawasan yang kelihatan), di bahagian atas tengah elemen bekas .

  Apabila tetikus berada di atas elemen, sifat clip-path beralih kepada bulatan(100% pada 50% 0%)

  , yang menghasilkan bulatan yang meliputi keseluruhan elemen bekas. Tempoh animasi peralihan ini ialah 0.4 saat, menggunakan fungsi masa ease-out.

Contoh Mari kita lihat contoh -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title> Color Drop Effect </title>
   <style>
      /* Resetting default styles */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      /* Centering the container */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #333;
      }
      /* Creating the color drop effect */
      .icon-container {
         position: relative;
         width: 200px;
         height: 200px;
         background-image: url('https://via.placeholder.com/200');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         filter: grayscale(100%);
         cursor: pointer;
      }

      .icon-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         clip-path: circle(0% at 50% 0%);
         transition: clip-path 0.4s ease-out;
      }

      .icon-container:hover::before {
         clip-path: circle(100% at 50% 0%);
      }
   </style>
</head>
<body>
   <div class="icon-container"></div>
</body>
</html>

Kesimpulan

Ringkasnya, menggunakan kesan penurunan warna dalam HTML dan CSS boleh menjadi cara yang menyeronokkan dan kreatif untuk meningkatkan daya tarikan visual tapak web atau aplikasi web. Dengan keupayaan untuk menukar warna imej pada tuding, anda boleh menambah elemen dinamik untuk menarik perhatian pengguna dan menyerlahkan kandungan anda. Dalam artikel ini, kami meneroka asas penggunaan kesan titisan warna untuk menukar warna imej anda. Kami meliputi penggunaan atribut penapis untuk memanipulasi skala kelabu imej, menggunakan elemen pseudo :before untuk mencipta kesan tindanan dan menggunakan atribut laluan klip untuk mencipta topeng bulat yang memaparkan warna pada tuding.

Dengan melaksanakan kesan ini, anda boleh mencipta pengalaman pengguna yang lebih menarik dan menambahkan beberapa pemperibadian pada tapak web anda. Dengan beberapa percubaan dan kreativiti, anda juga boleh membawa teknik ini ke peringkat seterusnya dan mencipta kesan titisan warna yang lebih kompleks yang benar-benar menonjol.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar warna isian untuk menukar warna imej menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!