CSS-Tipp: Universal-Hover-Effekt für Links und Buttons
In der Regel verändern Links und Buttons ja, wenn man mit der Maus darüber fährt, ihre Farbe – auch um die Interaktivität zu unterstreichen. Klassischerweise…
CSS
WordPress-„Bug“: Buttons zu groß
In einem der letzten WordPress-Updates haben die WordPress-Entwickler, warum auch immer, die Formatierung des Standard-Buttons geändert. Dadurch werden auf vielen Websites Buttons plötzlich zu groß…
CSS-Shadows
Eine hilfreiche und hübsche Sammlung an CSS-Shadows, die über die Standard-Box-Shadow-Settings hinaus gehen, gibt es hier: https://getcssscan.com/css-box-shadow-examples
So kannst du Spalten mit Bootstrap mobil in anderer Reihenfolge darstellen
Ein beliebtes Gestaltungselement im Webdesign, ist die abwechselnde Darstellung von Text und Bild in Spalten oder auf Kacheln. z.B. so: Lorem ipsum Lorem ipsum dolor…
Tabbed Content
Mit folgendem Code lässt sich schnell und unkompliziert ein Tabbed-Content-Bereich umsetzen: Eins Zwei Drei Duis autem vel eum iriure dolor in hendrerit in vulputate velit…
CSS-Library für Formulare
Mit der CSS-Library „nice-forms.css“ lassen sich schnell und einfach gut aussehenden Formulare umsetzen. Besonders gelungen finde ich, dass sich die Farbigkeit aller Elemente mit einer…
CSS hover underline animation
Mit folgendem Code kannst du Links animiert unterstreichen – auch Links, die sich über mehrere Zeilen erstrecken.
Farbabstufungen einer Farbe generieren
In der Regel gibt es auf jeder Website ja 2-3 Hauptfarben, die im Corporate Design definiert sind. Auf colorhexa.com kannst du von einer Farbe dazu…
CSS „:has“ – der heimliche „parent-Selektor“
Ein weniger bekannter, aber in vielen Fällen sehr sinnvoller CSS-Selektor, ist die Pseudoklasse „:has“. So kann z.B. der Abstand nach Headlines, abhängig vom darauffolgenden Element…
So erstellst du HTML-E-Mail-Signaturen für Outlook, die überall gleich aussehen
Eine E-Mail-Signatur für Outlook zu erstellen ist verrückterweise eine echte Herausforderung. Egal ob in Word oder Outlook, ob auf Mac oder Windows, die Signatur sieht…
Bootstrap-Layout Text und Bild 50/50
Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum…
CSS 100vw und das Problem mit der Scrollbar
Die Einheit „vw“ („Viewport Width“) ist sehr praktisch, wenn man ein Element mit CSS bildschirmfüllend darstellen möchte. Das Problem hierbei ist, dass die Scrollbars im…