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 verwendet display: flex um den Flexbox-Layoutmodus zu aktivieren. Der justify-content Eigenschaft ist festgelegt auf center um das untergeordnete Element innerhalb des Containers horizontal zu zentrieren. Der align-items Eigenschaft ist festgelegt auf center 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 verwendet display: grid um den Grid-Layout-Modus zu aktivieren. Der grid-template-columns Eigenschaft ist festgelegt auf repeat(2, 1fr) um zwei Spalten gleicher Breite zu erstellen. Der gap -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. Der transition Eigenschaft ist festgelegt auf background-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!
  • 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 die spin Animation wird angewendet, um die Box zu drehen. Der animation-fill-mode Eigenschaft ist festgelegt auf forwards 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!
  • 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 setzen 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: 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 und blue.png, die mit geladen werden background-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. Der background-position -Eigenschaft wird verwendet, um die Positionierung jedes Bildes zu steuern. Der background-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;
    }

    Ergebnis

    Douglas Karr

    Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

    Ähnliche Artikel

    Nach oben-Taste
    Menu

    Adblock erkannt

    Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.