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:
Um einen simplen Button darzustellen, benötigt man:
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:
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:
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:
- Einleitung: Was ist CSS überhaupt und wofür wird es benutzt?
- CSS funktioniert im Web nicht ohne HTML: Das Zusammenspiel von HTML und CSS
- Eine moderne, responsive Seitenstruktur aufbauen
- Eine Seite mit CSS-Tricks verschönern
- Das Zusammenspiel von jQuery und CSS
- Eleganter CSS schreiben mit Compiler: eine kurze Einführung in SASS