Heim >Web-Frontend >CSS-Tutorial >So gestalten Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSS
So gestalten Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSS
- 王林nach vorne
- 2023-09-15 21:53:02844Durchsuche
Symbole sind ein wichtiger Bestandteil jeder Website oder Anwendung, da sie uns eine schnelle und einfache Möglichkeit bieten, dass Benutzer den Inhalt verstehen und mit ihm interagieren können. Die Verwendung von Standardsymbolen kann jedoch dazu führen, dass eine Website allgemein und unattraktiv aussieht. Mithilfe von CSS können wir die Farbe, Größe und den Schatten von Symbolen gestalten, um ein einzigartiges und optisch ansprechendes Benutzererlebnis zu schaffen.
In diesem Artikel erfahren Sie, wie Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSS gestalten. Wir lernen verschiedene Möglichkeiten kennen, Symbole in CSS zu formatieren.
Verschiedene Ansätze zur Symbolgestaltung in CSS
Methode 1: Verwenden Sie Font Awesome-Symbole
Die erste Möglichkeit, Ihre Symbole zu gestalten, ist die Verwendung der Schriftart Awesome Icons, einer beliebten Symbolschriftart, die eine erweiterbare Bibliothek von Vektorsymbolen bietet, die mithilfe von CSS angepasst werden können. Font Awesome-Symbole können in verschiedenen Farben, Größen und Schattierungen erhältlich sein, damit sie zum Design Ihrer Website passen.
Font Awesome-Symbole sind sehr einfach zu verwenden. Zuerst müssen wir das Font Awesome-Stylesheet in unser HTML-Dokument einbinden, indem wir den folgenden Code im Kopfabschnitt hinzufügen -
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Nachdem wir das Font Awesome-Stylesheet eingebunden haben, können wir nun jedes Font Awesome-Symbol in einem HTML-Dokument verwenden, indem wir das i-Tag mit der entsprechenden Klasse verwenden. Weitere Informationen finden Sie in der folgenden Syntax -
Grammatik
Die folgende Syntax definiert die Farbe und den Textschatten des i-Elements. Das -Element besteht aus Klassen, die HTML-Symbole darstellen.
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
Beispiel
Im folgenden Beispiel ändern wir die Farben der HTML5-, CSS3- und Github-Symbole in Rot, Blau und Schwarz. Gleichzeitig ist die Größe aller Symbole auf 10em eingestellt und die Textschatten in jedem Symbol sind jeweils orange, himmelblau und grau.
<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>
Methode 2: CSS-Symbole verwenden
CSS-Symbole sind eine weitere Möglichkeit, Ihrer Website Symbole hinzuzufügen. CSS-Symbole werden mithilfe von CSS-Eigenschaften wie Rahmenradius, Rahmenschatten und Farbverlauf erstellt, um eine symbolähnliche Form zu erstellen. CSS-Symbole sind leichtgewichtig, einfach anzupassen und können auf jede beliebige Größe skaliert werden.
Grammatik
Die folgende Syntax zeigt, wie Sie ein CSS-Symbol mithilfe des Vorher- oder Nachher-Pseudoelements erstellen und die relevanten CSS-Eigenschaften hinzufügen.
.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>
Beispiel
Im folgenden Beispiel haben wir drei verschiedene Symbole in verschiedenen Formen, Größen und Farben hinzugefügt. Die CSS-Symbolfarben sind auf Hellblau, Hellrot und Hellgrün eingestellt. Wir definieren auch die Größe des Symbols und die verschiedenen Farben des Boxschattens.
<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>
Methode 3: SVG-Symbole verwenden
SVG-Symbole (Scalable Vector Graphics) sind eine weitere beliebte Möglichkeit, Ihrer Website Symbole hinzuzufügen. SVG-Symbole sind vektorbasiert, was bedeutet, dass sie ohne Qualitätsverlust auf jede beliebige Größe skaliert werden können. Es kann mithilfe von CSS angepasst werden, um Farbe, Größe und Schatten zu ändern.
Um SVG-Symbole zu Ihrer Website hinzuzufügen, müssen Sie zunächst das SVG-Symbol finden, das Sie verwenden möchten. SVG-Symbole finden Sie auf Websites wie Font Awesome oder Sie können mit Vektorbearbeitungsprogrammen wie Adobe Illustrator oder Inkscape Ihre eigenen erstellen.
Grammatik
Die folgende Syntax definiert den Abstand, die Höhe und Breite sowie die Filter des SVG-Elements. Wir definieren verschiedene Farben, Größen und Schatten für SVG-Symbole.
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>
Beispiel
Im folgenden Beispiel verwenden wir Inline-SVG-Code, um das Suchsymbol anzuzeigen, und CSS, um dessen Farbe, Größe und Schatten zu formatieren. Hier wird das Füllattribut verwendet, um die Farbe des Symbols in Rot zu ändern, die Breiten- und Höhenattribute werden verwendet, um die Größe des Symbols auf 50 Pixel zu erhöhen, und das Filterattribut wird verwendet, um dem Symbol einen Schatten hinzuzufügen.
<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>
Fazit
Das Entwerfen von Symbolfarben, -größen und -schatten mithilfe von CSS ist eine sehr einfache Möglichkeit, unserer Website oder App ein individuelles Aussehen zu verleihen. Wir können Font Awesome, SVG-Symbole oder CSS-Symbole verwenden, mit denen wir einzigartige und optisch ansprechende Symbole erstellen können, die zum Design unserer Website passen.
Das obige ist der detaillierte Inhalt vonSo gestalten Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!