Bagaimana untuk mencipta bayang kecerunan menggunakan CSS?
Memandangkan web terus berkembang, membuat UI yang cantik ialah salah satu tugas paling penting untuk meningkatkan penglibatan pelanggan di tapak web anda. Satu cara untuk menambah baik penampilan bahagian hadapan anda ialah menggunakan bayang-bayang kecerunan dalam CSS. Dua kaedah yang paling penting untuk menggunakan teduhan kecerunan ialah kecerunan linear dan kecerunan jejari.
Bayang-bayang kecerunan boleh digunakan untuk menarik perhatian pengguna kepada maklumat tertentu, menggunakan kesan tuding atau fokus, atau memberikan tapak web rupa dan rasa Web3. Dalam tutorial ini, kami akan menganalisis dua warna kecerunan dengan contoh praktikal.
Kami akan menggunakan dua konsep CSS penting untuk mencapai kesan, satu ialah atribut penapis dan satu lagi ialah kelas pseudo ::selepas. Kelas pseudo akan digunakan untuk mencipta latar belakang palsu, manakala atribut penapis akan digunakan untuk menggunakan kesan kabur pada latar belakang sekeliling.
Kaedah 1: Bayang Kecerunan Linear
Dalam contoh ini, kita akan melihat cara menggunakan kesan bayangan kecerunan linear pada kad.
Tatabahasa
.classname::after{
background: linear-gradient(direction, color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
Antaranya, nama kelas merujuk kepada kelas yang diberikan kepada label yang diberikan, dan atribut arah menunjukkan arah mana susunan linear warna harus disusun. Ini boleh disediakan sebagai "deg", atau menggunakan rentetan pra-reka bentuk (cth. "ke kanan").
Algoritma
Langkah 1: Buat rangka dokumen HTML tapak web dan nyatakan nama kelas untuk teg yang memerlukan kesan kecerunan.
Langkah 2: Gunakan kelas pseudo ::selepas dengan nama kelas yang sama seperti yang diberikan kepada teg.
Langkah 3: Isikan latar belakang kelas pseudo dengan warna kecerunan yang diingini menggunakan fungsi CSS Linear−gradient().
Langkah 4: Untuk memastikan kelas pseudo tidak pernah menindih pada kelas asal, tambahkan atribut z−index pada kelas pseudo dengan nilai yang lebih rendah daripada nilai yang diberikan kepada kelas asal.
Langkah 5: Tambahkan sedikit atribut inset pada kelas pseudo supaya kelas asal tidak menutup latar belakang sepenuhnya.
Langkah 6: Akhir sekali gunakan kesan bayang kecerunan dan gunakan kabur pada komponen pseudo.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1 id="Welcome-to-Tutorials-Point">Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
border-radius: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: linear-gradient(to right, blue, cyan,lime, green, yellow, orange, red);
inset: -0.5rem;
filter: blur(25px);
}
</style>
</body>
</html>
Kaedah 2: Bayang Kecerunan Jejari
Dalam contoh ini, kita akan melihat cara menggunakan kesan Radial Gradient Shadow pada kesan kad yang sama dan perhatikan perubahannya.
Tatabahasa
.classname::after{
background: radial-gradient(color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
Algoritma
Langkah 1: Buat rangka dokumen HTML tapak web dan nyatakan nama kelas untuk teg yang memerlukan kesan kecerunan.
Langkah 2: Gunakan kelas pseudo ::selepas dengan nama kelas yang sama seperti yang diberikan kepada teg.
Langkah 3: Isikan latar belakang kelas pseudo dengan warna kecerunan yang diingini menggunakan fungsi CSS Radial−gradient().
Langkah 4: Untuk memastikan kelas pseudo tidak pernah menindih pada kelas asal, tambahkan atribut z−index pada kelas pseudo dengan nilai yang lebih rendah daripada nilai yang diberikan kepada kelas asal.
Langkah 5: Tambahkan sedikit atribut inset pada kelas pseudo supaya kelas asal tidak menutup latar belakang sepenuhnya.
Langkah 6: Akhir sekali gunakan kesan bayang kecerunan dan gunakan kabur pada komponen pseudo.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radial Gradient Shadow</title>
</head>
<body>
<div class="gradient">
<h1 id="Welcome-to-Tutorials-Point">Welcome to Tutorials Point</h1>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
.gradient{
margin-top: 20px;
margin-left: 5%;
width: 90%;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: black;
}
h1{
color: white;
text-align: center;
}
.gradient::after{
content: "";
position: absolute;
z-index: -100;
background: radial-gradient(yellow, red, blue);
inset: -1rem;
filter: blur(10px);
}
</style>
</body>
</html>
Kesimpulan
Warna kecerunan jejari berasal dari bahagian tengah label, seperti yang anda boleh lihat daripada contoh di atas, warna kuning ditindih sepenuhnya oleh latar belakang hitam, manakala beberapa kesan merah ditemui pada titik tengah sisi kad. Sebaliknya, dalam kecerunan linear, tiada tindanan diperhatikan kerana ia mengagihkan semua warna secara sama rata di sepanjang semua tepi mengikut arah yang disediakan.
Kami juga boleh melaraskan nilai inset dan Blur untuk menambah atau mengurangkan kawasan yang diliputi oleh kesan kecerunan. Lebih banyak nilai negatif menjadikan kecerunan lebih menonjol, manakala nilai kabur menjadikan kesan lebih tersebar di bahagian tepi.
Atas ialah kandungan terperinci Bagaimana untuk mencipta bayang kecerunan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Dua gambar dan API: Segala yang kita perlukan untuk Recoloring ProductApr 15, 2025 am 11:27 AMBaru -baru ini saya dapati penyelesaian untuk mengemas kini warna mana -mana imej produk. Jadi dengan hanya satu produk, kita boleh mewarnakannya dengan cara yang berbeza untuk ditunjukkan
Berita Platform Mingguan: Kesan kod pihak ketiga, kandungan campuran pasif, negara dengan sambungan yang paling lambatApr 15, 2025 am 11:19 AMPada minggu ini, Roundup, Lighthouse menyoroti cahaya pada skrip pihak ketiga, sumber yang tidak selamat akan disekat di tapak yang selamat, dan banyak kelajuan sambungan negara
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiriApr 15, 2025 am 11:09 AMTerdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet ReactApr 15, 2025 am 11:01 AMKetua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai
Apa itu Super () dalam JavaScript?Apr 15, 2025 am 10:59 AMApa yang berlaku apabila anda melihat beberapa JavaScript yang memanggil Super (). Dalam kelas kanak -kanak, anda menggunakan super () untuk memanggil pembina ibu bapa dan super. untuk mengaksesnya
Membandingkan pelbagai jenis popup JavaScript asliApr 15, 2025 am 10:48 AMJavaScript mempunyai pelbagai API popup terbina dalam yang memaparkan UI khas untuk interaksi pengguna. Terkenal:
Mengapa laman web yang boleh diakses begitu sukar untuk dibina?Apr 15, 2025 am 10:45 AMSaya sedang berbual dengan beberapa orang depan pada hari yang lain tentang mengapa begitu banyak syarikat berjuang untuk membuat laman web yang boleh diakses. Mengapa laman web yang boleh diakses begitu sukar
Atribut `tersembunyi` kelihatan lemahApr 15, 2025 am 10:43 AMTerdapat atribut HTML yang betul -betul apa yang anda fikir harus dilakukan:
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
