Rumah > Artikel > hujung hadapan web > Cara menggayakan warna, saiz dan bayang ikon menggunakan CSS
Cara menggayakan warna, saiz dan bayang ikon menggunakan CSS
- 王林ke hadapan
- 2023-09-15 21:53:02840semak imbas
Ikon merupakan bahagian penting dalam mana-mana tapak web atau aplikasi kerana ia memberikan kami cara yang cepat dan mudah untuk pengguna memahami dan berinteraksi dengan kandungan. Walau bagaimanapun, menggunakan ikon lalai boleh menjadikan tapak web kelihatan generik dan tidak menarik. Menggunakan CSS, kami boleh menggayakan warna, saiz dan bayang ikon untuk mencipta pengalaman pengguna yang unik dan menarik secara visual.
Dalam artikel ini, kita akan belajar cara menggayakan warna, saiz dan bayang ikon menggunakan CSS. Kami akan mempelajari cara yang berbeza untuk menggayakan ikon dalam CSS.
Pendekatan berbeza untuk penggayaan ikon dalam CSS
Kaedah 1: Gunakan Ikon Font Hebat
Cara pertama untuk menggayakan ikon anda ialah menggunakan fon Ikon Hebat, fon ikon popular yang menyediakan perpustakaan ikon vektor yang boleh diperluas yang boleh disesuaikan menggunakan CSS. Ikon Font Hebat boleh datang dalam pelbagai warna, saiz dan warna untuk dipadankan dengan reka bentuk tapak web anda.
Font Ikon Hebat sangat mudah digunakan. Mula-mula, kita perlu memasukkan helaian gaya Font Awesome dalam dokumen HTML kita dengan menambahkan kod berikut di bahagian kepala -
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Selepas memasukkan lembaran gaya Font Awesome, kini kami boleh menggunakan mana-mana ikon Font Awesome dalam dokumen HTML menggunakan teg i dengan kelas yang berkaitan. Lihat sintaks berikut untuk butiran lanjut -
Tatabahasa
Sintaks berikut mentakrifkan bayang-bayang warna dan teks bagi elemen i. Elemen terdiri daripada kelas yang mewakili ikon HTML.
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
Contoh
Dalam contoh di bawah, kami menukar warna ikon HTML5, CSS3 dan Github kepada merah, biru dan hitam masing-masing. Pada masa yang sama, saiz semua ikon ditetapkan kepada 10em, dan bayang-bayang teks dalam setiap ikon masing-masing adalah oren, biru langit dan kelabu.
<html>
<head>
<title>Font Awesome icons styling using CSS</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
.icon-2 {
color: blue;
text-shadow: 2px 2px 2px skyblue;
}
.icon-3 {
color: black;
text-shadow: 2px 2px 2px gray;
}
.fa { font-size: 10em;}
</style>
</head>
<body>
<h2>Styling Font Awesome Icons using CSS</h2>
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
<div class="icon-2">
<i class="fa fa-css3" aria-hidden="true"></i>
</div>
<div class="icon-3">
<i class="fa fa-github" aria-hidden="true"></i>
</div>
</body>
</html>
Kaedah 2: Gunakan ikon CSS
Ikon CSS ialah cara lain untuk menambahkan ikon pada tapak web anda. Ikon CSS dicipta menggunakan sifat CSS seperti jejari sempadan, bayang kotak dan kecerunan untuk mencipta bentuk seperti ikon. Ikon CSS adalah ringan, mudah untuk disesuaikan dan boleh diskalakan kepada sebarang saiz.
Tatabahasa
Sintaks di bawah menunjukkan cara membuat ikon CSS menggunakan elemen pseudo sebelum atau selepas dan menambah sifat CSS yang berkaitan.
.icon {
position: relative;
width: 50px;
height: 40px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
<div class="icon"></div>
Contoh
Dalam contoh di bawah, kami telah menambahkan tiga ikon berbeza dalam bentuk, saiz dan warna yang berbeza. Warna ikon CSS ditetapkan kepada biru muda, merah muda dan hijau muda. Kami juga menentukan saiz ikon dan warna bayang kotak yang berbeza.
<html>
<head>
<title>CSS icons styling using CSS</title>
<style>
.container {
display: flex;
gap: 10px;
align-items: center
}
.icon-1 {
position: relative;
width: 50px;
height: 50px;
background-color: lightblue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
background-color: blue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2 {
position: relative;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
border-radius: 50px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3 {
position: relative;
width: 50px;
height: 40px;
background-color: lightred;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: red;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h2>CSS icons styling using CSS</h2>
<div class="container">
<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>
</div>
</body>
</html>
Kaedah 3: Gunakan ikon SVG
Ikon SVG (Grafik Vektor Boleh Skala) ialah satu lagi cara popular untuk menambah ikon pada tapak web anda. Ikon SVG adalah berasaskan vektor, yang bermaksud ia boleh diskalakan kepada sebarang saiz tanpa kehilangan kualiti. Ia boleh disesuaikan menggunakan CSS untuk menukar warna, saiz dan bayangnya.
Untuk menambahkan ikon SVG pada tapak web anda, anda perlu mencari ikon SVG yang ingin anda gunakan dahulu. Anda boleh menemui ikon SVG di tapak seperti Font Awesome, atau anda boleh membuat sendiri menggunakan perisian penyuntingan vektor seperti Adobe Illustrator atau Inkscape.
Tatabahasa
Sintaks berikut mentakrifkan pelapik, ketinggian dan lebar serta penapis elemen svg. Kami mentakrifkan warna, saiz dan bayang yang berbeza untuk ikon svg.
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>
Contoh
Dalam contoh di bawah, kami menggunakan kod SVG sebaris untuk memaparkan ikon carian dan CSS untuk menggayakan warna, saiz dan bayangnya. Di sini, atribut isian digunakan untuk menukar warna ikon kepada merah, atribut lebar dan ketinggian digunakan untuk meningkatkan saiz ikon kepada 50px, dan atribut penapis digunakan untuk menambah bayang-bayang pada ikon.
<html>
<head>
<title>SVG Icon styling using CSS</title>
<style>
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
</style>
</head>
<body>
<h2>SVG Icon styling using CSS</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16.007 4c-3.308 0-6 2.692-6 6 0 .463.052.912.142 1.346l-7.264 7.264a1.5 1.5 0 0 0 2.122 2.122l7.264-7.264A5.933 5.933 0 0 0 16.007 16c3.308 0 6-2.692 6-6s-2.692-6-6-6zm0 10a3.999 3.999 0 0 1-3.998-3.98c0-2.209 1.79-3.998 3.998-3.998s3.998 1.79 3.998 3.998c0 2.209-1.79 3.98-3.998 3.98z"/>
</svg>
</body>
</html>
Kesimpulan
Mereka bentuk warna, saiz dan bayang ikon menggunakan CSS ialah cara yang sangat mudah untuk memberikan tapak web atau apl kami rupa tersuai. Kami boleh menggunakan Font Awesome, ikon SVG atau ikon CSS yang melaluinya kami boleh mencipta ikon unik dan menarik secara visual yang sepadan dengan reka bentuk tapak web kami.
Atas ialah kandungan terperinci Cara menggayakan warna, saiz dan bayang ikon menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!