Als Frontend-Entwickler ist CSS fast schon ein Muss, aber nicht jeder mag CSS. Dennoch gibt es tolle Tipps und Tricks. Wir zeigen Ihnen 4 davon, um Ihren Shop aufzuwerten.
Braucht man immer wieder, kann sich aber fast niemand merken – wie richte ich ein Element mittig aus? Ob Bild oder Text, egal.
img {
display: flex;
justify-content: center;
align-items: center;
}
Um Besucher über einen Button auf ein Segment eurer Website zu führen, kann man auf das href
-Attribut zurückgreifen. Damit die "User-Experience" etwas smoother wird.
scroll-behaviour: smooth;
Aber bitte nicht dieses Feature vergessen. Aus Gründen der Barrierefreiheit sollte man hierbei darauf achten, dass man mittels CSS-Media-Query-Features prefers-reduced-motion
einen Fallback für Nutzer anbietet, die empfindlich auf animierte Inhalte reagieren können.
@media (prefers-reduced-motion: reduce)
Um ein Bild genau an der Stelle einzupassen, wo man es haben möchte, einfach folgende Zeilen verwenden.
img {
max-width:100%;
height:auto;
}
Die elegantere Alternative wäre, sich der CSS-Eigenschaften object-fit
und object-position
zu bedienen. Ähnlich wie man über die background-position
– respektive background-size
-Property auf Größe und Position von Hintergrundbildern einwirken kann, wirken sie auf den content von ![]()
oder
ein.Diese Eigenschaft definiert, wie ein Element, zum Beispiel ein Bild, sich innerhalb der Größenverhältnisse seiner Content-Box verhält. Es erlaubt euch zum Beispiel, festzulegen, dass es seine Seitenverhältnisse beibehalten oder in eine bestimmte Richtung allen verfügbaren Platz einnehmen soll.
Ein Beispiel: Die Content-Box eines Bildes wird festgelegt durch seine width
– und height
-Properties. Zum Beispiel:
img {
width: 200px;
height: 300px;
}
img {
width: 400px;
height: 250px;
}
Um die Seitenverhältnisse zu wahren und trotzdem den verfügbaren Raum auszufüllen, kann man auf object-fit: cover;
zurückgreifen.
Die Eigenschaft bewirkt, dass Elemente nicht länger gestaucht oder gestreckt werden, sondern stattdessen entsprechend der verfügbaren Content-Box gecroppt.
Klingt nicht so spannend? Ist es aber. Gerade im Zusammenspiel mit verschiedenen Viewport-Größen kann die Property eine echte Hilfe sein.
Mit object-position
kann man Bildausschnitte in den Fokus rücken. Um diese CSS-Eigenschaft nutzen zu können, muss man außer der Größenverhältnisse des zu manipulierenden Bildes auch die object-fit
-Property gleich none
setzen:
img { background: purple; height: 200px; object-fit: none; }
object-fit
ist nämlich fill
– auch wenn man den Property-Wert nicht explizit deklariert. Auch object-position
verfügt über ein Default-Verhalten. Werden keine Werte angegeben, zentriert die Eigenschaft eure Elemente sowohl vertikal als auch horizontal.
img {
background: purple;
height: 200px;
object-fit: none;
object-position: 50% 50%;
}
}
Um das Objekt innerhalb seiner Content-Box nach links oder rechts zu verschieben, kann man den ersten Value von object-position
anpassen, für Positionsänderungen nach oben oder unten sorgt der zweite.
Teste tricoma unverbindlich für 30 Tage.