Content Marketing
CSS3-Funktionen, die Sie möglicherweise nicht kennen: Flexbox, Rasterlayouts, benutzerdefinierte Eigenschaften, Übergänge, Animationen und mehrere Hintergründe
Cascading Style Sheets (CSS) entwickeln sich weiter und die neuesten Versionen können einige Funktionen haben, die Ihnen vielleicht nicht einmal bewusst sind. Hier sind einige der wichtigsten Verbesserungen und Methoden, die mit CSS3 eingeführt wurden, zusammen mit Codebeispielen:
- Flexibles Box-Layout (Flexbox): ein Layoutmodus, mit dem Sie flexible und ansprechende Layouts für Webseiten erstellen können. Mit flexbox können Sie Elemente innerhalb eines Containers einfach ausrichten und verteilen. In diesem Beispiel ist die
.container
Klasse verwendetdisplay: flex
um den Flexbox-Layoutmodus zu aktivieren. Derjustify-content
Eigenschaft ist festgelegt aufcenter
um das untergeordnete Element innerhalb des Containers horizontal zu zentrieren. Deralign-items
Eigenschaft ist festgelegt aufcenter
um das untergeordnete Element vertikal zu zentrieren. Der.item
Die Klasse legt die Hintergrundfarbe und die Polsterung für das untergeordnete Element fest.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Ergebnis
Zentriertes Element
- Gitterstruktur: ein weiterer Layoutmodus, mit dem Sie komplexe rasterbasierte Layouts für Webseiten erstellen können. Mit Raster können Sie Zeilen und Spalten angeben und dann Elemente in bestimmten Zellen des Rasters platzieren. In diesem Beispiel ist die
.grid-container
Klasse verwendetdisplay: grid
um den Grid-Layout-Modus zu aktivieren. Dergrid-template-columns
Eigenschaft ist festgelegt aufrepeat(2, 1fr)
um zwei Spalten gleicher Breite zu erstellen. Dergap
-Eigenschaft legt den Abstand zwischen Rasterzellen fest. Der.grid-item
Die Klasse legt die Hintergrundfarbe und den Abstand für die Rasterelemente fest.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Ergebnis
Artikel 1
Artikel 2
Artikel 3
Artikel 4
- Übergänge: CSS3 führte eine Reihe neuer Eigenschaften und Techniken zum Erstellen von Übergängen auf Webseiten ein. Zum Beispiel die
transition
Eigenschaft kann verwendet werden, um Änderungen in CSS-Eigenschaften im Laufe der Zeit zu animieren. In diesem Beispiel ist die.box
Die Klasse legt die Breite, Höhe und anfängliche Hintergrundfarbe für das Element fest. Dertransition
Eigenschaft ist festgelegt aufbackground-color 0.5s ease
um Änderungen an der Eigenschaft der Hintergrundfarbe über eine halbe Sekunde mit einer Ease-in-out-Timing-Funktion zu animieren. Der.box:hover
Die Klasse ändert die Hintergrundfarbe des Elements, wenn sich der Mauszeiger darüber befindet, wodurch die Übergangsanimation ausgelöst wird.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Ergebnis
Schweben
Here!
Here!
- Animationen: CSS3 führte eine Reihe neuer Eigenschaften und Techniken zum Erstellen von Animationen auf Webseiten ein. In diesem Beispiel haben wir eine Animation mit dem hinzugefügt
animation
Eigentum. Wir haben a definiert@keyframes
Regel für die Animation, die vorgibt, dass sich die Box über eine Dauer von 0 Sekunden von 90 Grad auf 0.5 Grad drehen soll. Wenn der Mauszeiger über das Feld bewegt wird, wird diespin
Animation wird angewendet, um die Box zu drehen. Deranimation-fill-mode
Eigenschaft ist festgelegt aufforwards
um sicherzustellen, dass der endgültige Zustand der Animation nach Beendigung erhalten bleibt.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Ergebnis
Schweben
Here!
Here!
- Benutzerdefinierte CSS-Eigenschaften: Auch bekannt als CSS-Variablenwurden benutzerdefinierte Eigenschaften in CSS3 eingeführt. Sie ermöglichen es Ihnen, Ihre eigenen benutzerdefinierten Eigenschaften in CSS zu definieren und zu verwenden, die zum Speichern und Wiederverwenden von Werten in Ihren Stylesheets verwendet werden können. CSS-Variablen werden durch einen Namen identifiziert, der mit zwei Bindestrichen beginnt, z
--my-variable
. In diesem Beispiel definieren wir eine CSS-Variable namens –primary-color und geben ihr den Wert#007bff
, eine blaue Farbe, die in vielen Designs häufig als Primärfarbe verwendet wird. Wir haben diese Variable verwendet, um die zu setzenbackground-color
-Eigenschaft eines Schaltflächenelements, indem Sie dievar()
Funktion und Übergabe des Variablennamens. Dadurch wird der Wert der Variablen als Hintergrundfarbe für die Schaltfläche verwendet.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Mehrere Hintergründe: Mit CSS3 können Sie mehrere Hintergrundbilder für ein Element angeben, mit der Möglichkeit, seine Positionierung und Stapelreihenfolge zu steuern. Der Hintergrund besteht aus zwei Bildern,
red.png
undblue.png
, die mit geladen werdenbackground-image
Eigentum. Das erste Bild,red.png
, wird in der rechten unteren Ecke des Elements positioniert, während das zweite Bild,blue.png
, wird in der linken oberen Ecke des Elements positioniert. Derbackground-position
-Eigenschaft wird verwendet, um die Positionierung jedes Bildes zu steuern. Derbackground-repeat
-Eigenschaft wird verwendet, um zu steuern, wie sich die Bilder wiederholen. Das erste Bild,red.png
, ist so eingestellt, dass es sich nicht wiederholt (no-repeat
), während das zweite Bild,blue.png
, ist auf Wiederholung eingestellt (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}