❕❔4 CSS-Tricks, die jeden Shop aufwerten

❕❔4 CSS-Tricks, die jeden Shop aufwerten

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.

tricoma Aktuell 08.06.2021
Christoph Lesser
Auch bei CSS ist aller Anfang schwer, wie bei jeder anderen Programmiersprache.

Es gibt Selektoren, Spezifität, Cascaden, die allseits bekannte Responsivität, Grid oder auch Flexbox.

Wie man sieht, sehr viel Input, wenn es darum geht eine Programmiersprache zu erlernen. Man muss halt wirklich wollen. Lächelnd
Wir stellen hier noch weitere Tipps und "good-to-knows" vor.

Elemente mittig ausrichten (zentriert)

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

Smoothes Scrollen

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)

Bilder einpassen

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.


object-fit

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

Ändert man das jetzt aber beispielsweise zu

img {
width: 400px;
height: 250px;
}

ab, resultiert das in einer Verzerrung des Bildes – es nimmt einfach per Default allen verfügbaren Platz in seiner neuen Content-Box ein – ungeachtet seiner Darstellung.

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.


object-position

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


Der Default-Wert für 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.


So das wären jetzt ein paar kleine Zeilen, die jeden Shop oder auch Website schnell und einfach aufwerten.

Unser tricoma Shop mit dem Template "universe" ist z. B. komplett Responsive und enthält viele super coole Features!

Weitere Codeschnippsel oder gar kompletten Quellcode für HTML, XHTML oder CSS kann man z. B. hier finden https://www.codepen.io

Teste tricoma unverbindlich für 30 Tage.

Jetzt Account anlegen und sofort kostenlos starten

Kompatibel mit

Folge uns

Einen Augenblick bitte...
Cookie und Tracking
Diese Webseite verwendet Cookies
Cookies werden zur Verbesserung der Benutzerführung verwendet und helfen dabei, diese Webseite besser zu machen.