Anzeige
Anzeige
Ratgeber

4 CSS-Kniffe, die eure Website aufwerten – und euch das Leben leichter machen

Angehende Frontend-Entwickler brauchen CSS-Kenntnisse. Vielen ist die Stylesheet-Formatierungssprache dennoch ein Graus. Auch wer nie zum CSS-Profi werden wird: Diese vier Tipps kann man immer wieder gebrauchen.

3 Min.
Artikel merken
Anzeige
Anzeige

Via CSS wird das Aussehen einer Website definiert. (Quelle: Zeynur Babayev / Shutterstock)

Aller Anfang ist schwer. CSS lernen ist da keine Ausnahme. Selektoren, Spezifität, die Regeln der Cascade, Responsivität oder Module wie Grid und Flexbox – das Feld ist riesig, den Umgang mit der Programmiersprache zu lernen ein Vorhaben, das man wirklich wollen muss. Frameworks wie Bootstrap, Materialize oder Tailwind machen zwar vieles einfacher, trotzdem lohnt es sich, neben grundlegenden Basics einige Kniffe zu kennen.

Elemente mittig ausrichten

Anzeige
Anzeige

Braucht man immer wieder, kann sich aber kaum ein Mensch merken – wie richte ich ein Element, zum Beispiel ein <p>, mittig aus? Dabei ist es eigentlich ganz einfach:


p {
display: flex;
justify-content: center;
align-items: center;
}

sind drei magische Zeilen CSS, über die ihr genau das erreicht.

Smoothes Scrollen

Um Besucher über einen Button auf ein anderes Segment eurer Website zu führen, könnt ihr auf das href-Attribut zurückgreifen. Damit die User-Experience etwas smoother wird, könnt ihr einfach ein

Anzeige
Anzeige

scroll-behaviour: smooth;

Anzeige
Anzeige

hinzufügen. Achtung: Aus Gründen der Barrierefreiheit solltet ihr hierbei darauf achten, dass ihr mittels des 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)

Anzeige
Anzeige

Bilder einpassen

Um ein Bild genau an der Stelle einzupassen, wo ihr es haben wollt, könnt ihr klassischerweise


img {
max-width:100%;
height:auto;
}

nutzen.

Die elegantere Alternative wäre, sich der CSS-Eigenschaften object-fit und object-position zu bedienen. Ähnlich wie ihr über die background-position– respektive background-size-Property auf Größe und Position von Hintergrundbildern einwirken könnt, wirken sie auf den content von <img> oder <video> 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.

Anzeige
Anzeige

Ein Beispiel: Die Content-Box eines Bildes wird festgelegt durch seine width– und height-Properties. Zum Beispiel:


img {
width: 200px;
height: 300px;
}

Ändert ihr 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, könnt ihr 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 könnt ihr Bildausschnitte in den Fokus rücken. Um diese CSS-Eigenschaft nutzen zu können, müsst ihr außer der Größenverhältnisse des zu manipulierenden Bildes auch die object-fit-Property gleich none setzen:

Anzeige
Anzeige


img {
background: purple;
height: 200px;
object-fit: none;
}

Der Default-Wert für object-fit ist nämlich fill – auch wenn ihr 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, könnt ihr den ersten Value von object-position anpassen, für Positionsänderungen nach oben oder unten sorgt der zweite.

Fazit

So könnt ihr mit wenigen Zeilen CSS schon eine ganze Menge erreichen, um eure Website optisch aufzuwerten. Für Kunstwerke à la Diana Adrianne Smith, die regelmäßig mit aufwendigen, komplett in CSS erstellten Gemälden aufwartet, reicht es zwar noch lange nicht, aber irgendwo muss man ja anfangen. Für mehr Inspiration sei euch der Codeschnipsel-Dienst codepen.io ans Herz gelegt.

Mehr zu diesem Thema
CSS
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Dave

stimmt schon leichter macht es das leben auf jeden fall wenn man nicht alle browser supportet…
caniuse is dein frOInd

Antworten
Laena

Man lernt halt nie aus. Caniuse kannte ich noch nicht und macht das ganze definitiv einfacher zu überschauen.
Danke dafür :)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige