CSS

CSS (Cascading Style Sheets) ist eine Sprache zu Strukturierung und Gestaltung von Website-Inhalten und wird i.d.R. in Kombination mit HTML oder XML eingesetzt. HTML und XML übernehmen die semantische Auszeichnung der Inhalte, CSS3 übernimmt das visuelle Erscheinungsbild. Das Verhalten von Website-Elementen fällt in den Aufgabenbereich von JavaScript. Bei Interaktionen und Animationen kommt es zu Überschneidungen zwischen JavaScript und CSS3. Viele Effekte lassen sich mit beiden Technologien erreichen.

CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

CSS Shapes

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Beitrag zu Ende lesen

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

box-decoration-break

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen

Transparente Rahmen (border) mit CSS

transparente-borders

Transparente Umrandungen mit Hilfe der border-Eigenschaft scheinen auf den ersten Blick kein Problem zu sein. In der Praxis stellt sich jedoch schnell heraus, dass es nicht so funktioniert, wie in der Theorie gedacht. Und so entstehen oft völlig überflüssige <div>-Verschachtelungen. Um euch vor solch peinlichen Konstruktionen zu bewahren, zeigen wir euch in diesem Beitrag wie es sauberer umgesetzt wird und rufen in diesem Zusammenhang die Eigenschaft background-clip in Erinnerung

Beitrag zu Ende lesen

Bildunterschriften mit CSS immer perfekt ausrichten

bildunterschriften-ausrichten-css

Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?

In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.

Beitrag zu Ende lesen

Kommaseparierte Listen mit CSS

css-komma-list

Eine HTML-Liste wird üblicherweise untereinander und mit Aufzählungszeichen dargestellt. Häufig wünscht man sich jedoch auch eine horizontale Darstellung, bei der die einzelnen Listenelemente nebeneinander stehen und mit Komma von einander getrennt sind. Nur hinter dem letzten Element soll natürlich kein Komma mehr stehen. Mit Hilfe der CSS-Pseudoklasse :not und des -Pseudoelements ::after kann die gewünschte Ansicht elegant hergestellt werden.

Beitrag zu Ende lesen

Touchscreen optimierte DropDown-Navigation mit jQuery

navi-touch

Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.

Beitrag zu Ende lesen

Parallelogramme mit CSS erstellen

css-parallelogram

Im modernen Webdesign wird häufig auf rechteckige Gestaltungselemente zurückgegriffen. Ein Parallelogramm kann diese klaren Strukturen brechen und mehr Abwechslung ins Layout bringen. Wie ihr mit Hilfe von CSS ganz einfach Parallelogramme erstellen könnt bei denen der enthaltene Text nicht verzerrt wird, erklären wir euch in diesem Artikel anhand des Beispiels einer Navigation. Beitrag zu Ende lesen