Über Web, Tech, Games, Art,
Code & Design

Alle Beiträge zum Thema "CSS"

26. August 2024

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

1. Juli 2024

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 sit amet, consetetur sadipscing elitr labore. Lorem ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr labore. Problem hierbei ist, dass die Reihenfolge in der mobilen Ansicht so etwas suboptimal […]

24. Juni 2024

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 esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait […]

20. Juni 2024

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 einzigen CSS-Variable anpassen lässt. Zudem verzichtet die Library auf Hacks oder unnötige Elemente und nutzt reine Semantik. Nice! https://nielsvoogt.github.io/nice-forms.css/

12. Juni 2024

CSS hover underline animation

Mit folgendem Code kannst du Links animiert unterstreichen – auch Links, die sich über mehrere Zeilen erstrecken.

29. Mai 2024

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 passende Farben oder Farbabstufungen generieren. Insbesondere das monochromatische Color-Scheme finde ich sehr hilfreich:

16. April 2024

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 gesteuert werden. Ein konkretes Beispiel, das in der Praxis sehr häufig vorkommt: „Wenn auf eine Headline eine Subline folgt, soll der Abstand 0px sein, wenn aber Fließtext folgt, soll der […]

3. Februar 2024

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 immer überall anders aus. Im schlimmsten Falle sind Logos auch noch verzerrt und Links blau unterstrichen. Mit diesen Tipps sollte es dir gelingen eine Signatur zu erstellen, die in den […]

30. Dezember 2023

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 innerhalb des Containers bleiben soll. Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html Hier ist das perfekte Snippet für diesen Zweck: Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig […]

30. Dezember 2023

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 Browser, je nach Einstellung und Betriebssystem, automatisch ein- und ausgelblendet werden oder die ganze Zeit sichtbar sind. Dieser Umstand ist im dynamischen Wert „vw“ leider nicht berücksichtigt. Und so kommt […]