• Tastatur und KaffeeWerbeagentur Regensburg - Tastatur und Kaffee
  • Bundstifte - Illustration, Design und ZeichnungenIllustration, Sketch, Skizze
  • Werbeagentur weltweit - made in GermanyIllustration - Stifte und Globus

Sobald die Struktur der Webseite steht, kann man sich mit den einzelnen Elementen auseinandersetzen. Mit Hilfe von ein paar CSS-Tricks kann man einer Seite schnell einen einzigartigen Touch verleihen.

Interaktionselemente

Interaktionselemente und Transition

Buttons werden oft in Webseiten verwendet, um Formulare abzusenden, Seitenzahlen zu blättern oder ein Menü darzustellen. 

Hier ein paar einfache Tricks, wie man Buttons aufwerten kann:

Ein Beispiel-Button

Um einen simplen Button darzustellen, benötigt man:

a.btn {
display: inline-block; // Element wird als Inline-Block dargestellt
margin-bottom: 12px; // Abstand nach unten
padding: 5px 12px; // Abstände Innen
background: #ddd; // Grauer Hintergrund
transition: .3s all ease 0s; *
border-left: 12px solid #333 // Schwarzer Balken links
}

a.btn:hover
border-left: 24px solid #38aaff; // Balken links blau und breiter, Zielzustand bei Mouseover
}

* Transition: Ist in diesem Zustand noch nicht relevant. Sobald Interaktion stattfindet (z.B. wenn man mit dem Mauszeiger drüber fährt), wird diese Veränderung nicht sofort ausgeführt, sondern über einen Zeitraum von 0.3 Sekunden animiert. 

Im Beispiel wird der schwarze Rand des Buttons blau und breiter. Durch die "Transition" wird der Wechsel auf den "Hover-Zustand" animiert. Die Farbe ändert sich in einem Übergang und der Button wird "ausgefahren".

Hier der Beispiel-Button ohne "Transition" zum Vergleich:

Ein Beispiel-Button

Zusammenfassung CSS-Transition

Mit Hilfe von transition kann ein Element seinen Zustand über einen bestimmten Zeitraum flüssig wechseln. Mit dem Pseudo-Selektor für :hover kann man in CSS ohne Javascript verschiedene Zustände optisch darstellen.

Dabei sind einfache, aber effektive Methoden, die Schriftfarbe und Hintergrundfarbe (color, background-color) zu ändern.

Listen und Icons

Webseiten enthalten oft Listenpunkte, um Themen zusammenzufassen:

Auf dieser Seite verwenden wir nicht normale Listenpunkte, sondern unser Logo. Hier ein Beispiel:

  • Beispiel Listenpunkt 1
  • Beispiel Listenpunkt 2

Um ein beliebiges Symbol für den Listenpunkt zu erhalten, wird das CSS-Pseudoelement ":before" verwendet. Hierbei wird ein neues Element erstellt, das beliebig mit CSS-Formatierungen ausgestattet werden kann.

Hier der wesentliche Code, kommentiert im Beispiel:

ul {
list-style: none; // Um den Standard-Punkt zu verbergen
margin-bottom: 24px; // Abstand nach unten
}

ul li {
position: relative;*
padding-left: 24px; // Um eine Einrückung zu erzeugen
}

ul li:before{
content: ' '; // Leeres Pseudoelement
position: absolute;* 
left: 0; // Links anordnen
width: 16px; // Breite
height: 16px; // Höhe
background-image: url(/images/bullet.png); // Pfad zum gewünschten Bild/Icon
}

Erklärungen zur Positionierung

* Das "li-Element" wird relativ positioniert. Das li:before Element wird absolut positioniert, d.h. jeder Listenpunkt richtet sich nach dem Listenelement (li). Dadurch ist der Listenpunkt immer in der richtigen Höhe.

Beitragsreihe CSS

Dieser Artikel ist Teil einer längeren Beitragsreihe zum Thema CSS. Folgende Themen sollen vorgestellt werden: