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 ständig weiter, und die neuesten Versionen enthalten möglicherweise Funktionen, die Ihnen vielleicht noch gar nicht bekannt 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 responsive 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 Klassenverwendungen display: flex um den Flexbox-Layoutmodus zu aktivieren. Die justify-content Eigenschaft ist festgelegt auf center um das untergeordnete Element horizontal im Container zu zentrieren. Die align-items Eigenschaft ist festgelegt auf center um das untergeordnete Element vertikal zu zentrieren. Die .item Die Klasse legt die Hintergrundfarbe und Polsterung für das untergeordnete Element fest.

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• Gitterstruktur: Ein weiterer Layoutmodus, mit dem Sie komplexe rasterbasierte Layouts für Webseiten erstellen können. Mit dem Raster können Sie Zeilen und Spalten festlegen und dann Elemente in bestimmten Zellen des Rasters platzieren. In diesem Beispiel ist die .grid-container Klassenverwendungen display: grid , um den Raster-Layout-Modus zu aktivieren. Die grid-template-columns Eigenschaft ist festgelegt auf repeat(2, 1fr) um zwei Spalten gleicher Breite zu erstellen. Die gap Eigenschaft legt den Abstand zwischen den Rasterzellen fest. Die .grid-item Die Klasse legt die Hintergrundfarbe und Polsterung für die Rasterelemente fest.

<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>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• Übergänge: CSS3 führte eine Reihe neuer Eigenschaften und Techniken zur Erstellung von Übergängen auf Webseiten ein. Beispielsweise die transition Eigenschaft kann verwendet werden, um Änderungen in CSS-Eigenschaften im Laufe der Zeit zu animieren. In diesem Beispiel ist die .box Klasse legt die Breite, Höhe und anfängliche Hintergrundfarbe für das Element fest. Die transition Eigenschaft ist festgelegt auf background-color 0.5s ease Änderungen an der Hintergrundfarbeigenschaft über eine halbe Sekunde mit einer Ease-In-Out-Timing-Funktion zu animieren. Die .box:hover Die Klasse ändert die Hintergrundfarbe des Elements, wenn sich der Mauszeiger darüber befindet, und löst so die Übergangsanimation aus.

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• Animationen: CSS3 führte eine Reihe neuer Eigenschaften und Techniken zur Erstellung von Animationen auf Webseiten ein. In diesem Beispiel haben wir eine Animation mit dem animation Eigenschaft. Wir haben eine @keyframes Regel für die Animation, die angibt, dass sich die Box innerhalb von 0 Sekunden von 90 Grad auf 0.5 Grad drehen soll. Wenn der Mauszeiger über die Box bewegt wird, spin Die Animation dreht den Kasten. Die animation-fill-mode Eigenschaft ist festgelegt auf forwards um sicherzustellen, dass der endgültige Zustand der Animation nach deren Beendigung erhalten bleibt.

<div class="rotate"></div>

.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;
}

• Benutzerdefinierte CSS-Eigenschaften: Auch bekannt als CSS-Variablenwurden benutzerdefinierte Eigenschaften in CSS3 eingeführt. Sie ermöglichen es Ihnen, eigene benutzerdefinierte Eigenschaften in CSS zu definieren und zu verwenden, mit denen Sie Werte in Ihren Stylesheets speichern und wiederverwenden können. CSS-Variablen werden durch einen Namen identifiziert, der mit zwei Bindestrichen beginnt, z. B. --my-variable. In diesem Beispiel definieren wir eine CSS-Variable namens –primary-color und geben ihr den Wert #007bff, ein Blauton, der häufig als Primärfarbe in vielen Designs verwendet wird. Wir haben diese Variable verwendet, um die background-color Eigenschaft eines Schaltflächenelements, indem Sie die var() 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: CSS3 ermöglicht es Ihnen, mehrere Hintergrundbilder für ein Element anzugeben und dessen Positionierung und Stapelreihenfolge zu steuern. Der Hintergrund besteht aus zwei Bildern, red.png kombiniert mit einem nachhaltigen Materialprofil. blue.png, die mit dem background-image Eigentum. Das erste Bild, red.png, wird in der rechten unteren Ecke des Elements positioniert, während das zweite Bild, blue.png, befindet sich in der linken oberen Ecke des Elements. Die background-position Die Eigenschaft dient zur Steuerung der Positionierung jedes Bildes. Die background-repeat Die Eigenschaft steuert die Wiederholung der Bilder. Das erste Bild, red.png, ist auf „Nicht wiederholen“ eingestellt (no-repeat), während das zweite Bild, blue.png, ist auf Wiederholung eingestellt (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}

Weitere Artikeln Martech Zone Inhalt

Die vier Säulen des Produkterfolgs: Wie Produktmanager Funktionen für maximale Wirkung priorisieren

Die Top 10 Marketing-Buzzwords im Jahr 2024

Alle wichtigen Marketingkennzahlen und ihre Berechnung

Messen und Reagieren auf KPIs im Kundenservice: Effizienz und Kundenzufriedenheit in Einklang bringen