3 CSS-Tricks für deine Webseite – für mehr Individualität!

Diese 3 CSS-Tricks können dir bei der Umsetzung deiner Design-Vorstellungen helfen. Gerade wenn du nicht auf einen Webseiten-Baukasten setzt, dann kannst du einfach individuelle Designwünsche umsetzen.

Doch die Sprache in der das geschehen musst ist CSS. Die Cascading Style Sheets verleihen dem sonst so öden HTML Dokument das fabulöse Aussehen. Umgangssprachlich sagt man, dass das Knochengerüst HTML ist und CSS die Haut.

Kleine CSS-Tricks sparen dir Arbeit und verleihen deiner Seite einen individuellen Touch

Es gibt mittlerweile Tausende Webseiten da draußen. Drei von vier Webseiten bauen auf WordPress auf. Beliebte Themes lassen sich entsprechend oft wiederfinden. Nun gibt es aber CSS-Tricks die einer Webseite einen individuellen Touch verleihen können. Aber auch manuelle Arbeiten lassen sich durch geschickte CSS-Tricks automatisieren.

1. Ausgehende Links automatisch markieren

Es gibt unterschiedliche Arten von Links – das sieht auch Google so und kann sich entsprechend auf die Suchmaschinenoptimierung auswirken:

Es gibt die Links, die auf eigene Inhalte zeigen – also eine interne Verlinkung darstellen – und die, die auf eine fremde Quelle zeigen. Dieser ausgehende Link von meiner Webseite kann nochmal in unterschiedliche Kategorien sortiert werden (follow, nofollow, user-generated-content etc.). Für diesen CSS-Trick wichtig ist aber der ausgehende Link bzw. der Link auf eine bestimmte Domain.

Denn mit

a[href*="domain.de"]:after { content:"*";}

wird automatisch ein Sternchen hinter jedem Link gesetzt, der auf die entsprechende Domain zeigt. Warum das wichtig sein kann? Es herrscht Einigkeit darüber, dass die Unterbringung von Affiliate Links markiert werden sollte. Üblich sind an der Stelle Sternchen.

Doch jeden einzelnen Link zu markieren kann in Arbeit ausarten. Und die Wahrscheinlichkeit dass dann einer vergessen wird ist gar nicht so gering. Deshalb ist dieser CSS-Trick praktisch – er markiert, wenn „domain.de“ durch „amazon.de“ ersetzt wird, jeden Link automatisch.

2. Einfach mehrere Spalten im Text durch CSS erstellen

Eine sehr beliebte Methode um Platz auszunutzen sowie Produkte und Preise auf Webseiten darzustellen, ist das Aufbrechen der Textes in mehrere Spalten. Wer darauf achtet, der sieht es ständig im Internet. Mit dem folgendem Befehl kannst du auch einfach Gebrauch davon machen:


p.col-2 {column-count:2}
p.col-3 {column-count:3}

Nun kannst du deinem Text ganz einfach die Klasse „col-2“ oder „col-3“ hinzufügen. Der Text wird aufgebrochen und du stichst etwas heraus.

3. Meta Informationen und Datum ausblenden

Bestandteil deiner Webseite ist ein Blog mit zeitlosen Artikeln? Dann kann es durchaus Sinn machen die Meta Informationen und Datumsangaben auszublenden. Wenn du also vor hast Evergreen-Inhalte zu erstellen, deine Besucher aber nicht auf den ersten Blick erkennen sollen dass diese Beiträge bereits Jahre alt sind, dann ist die Ausblendung der Informationen der richtige Weg.

.entry-meta {display:none !important;}
.home .entry-meta { display: none; }
.entry-footer {display:none !important;}
.home .entry-footer { display: none; }

Du solltest natürlich sicherstellen, dass die Inhalte grundsätzlich noch aktuell sind. Wenn du die Daten technisch entfernen willst, dann kannst du bei WordPress auch das Plugin WP Meta and Date Remover einsetzen. Dort erhältst du den Code Snippet noch als Ergänzung.

Fazit – helfen dir meine CSS-Tricks?

Je nach dem wie viel Arbeit du in das Design deiner Seite steckst, desto mehr CSS wirst du benötigen. Und da wird auch der ein oder andere Trick bei sein. Im Internet gibt es Ecken, dort hat es sich als Trend herausgestellt möglichst komplexe Vorhaben ausschließlich mit CSS umzusetzen. Folgende Beispiele sind damit gemeint:

Die Autoren werden Stunden, wenn nicht gar Tage damit verbracht haben diese Vorhaben umzusetzen. Beeindruckend und inspirieren – auch wenn sich die oben vorgestellten CSS-Tricks weit davon weg befinden. Ich hoffe aber das ein oder andere Code-Snippet hilft dir bei der Umsetzung deiner Design Vorstellungen.

Welche CSS-Tricks kennt ihr und helfen euch regelmäßig bei der Umsetzung von Design- und Funktionswünschen?


Vielen Dank, dass du den Blogbeitrag bis zum Ende gelesen hast!

Wenn dir die Informationen helfen oder dich vielleicht sogar motivieren, dann trage dich doch in die Gruenderlyste ein. Dann wirst du benachrichtigt, sobald ein neuer Beitrag erscheint.

Schreibe einen Kommentar