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.
Dalam contoh ini, kita akan melihat cara menggunakan kesan bayangan kecerunan linear pada kad.
.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").
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.
<!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>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>
Dalam contoh ini, kita akan melihat cara menggunakan kesan Radial Gradient Shadow pada kesan kad yang sama dan perhatikan perubahannya.
.classname::after{
background: radial-gradient(color1, [color2, color3.......]);
inset: -0.5rem;
filter: blur(25px);
.......
}
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.
<!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>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>
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
