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-Spezifität

css-spezifizitaet

Wenn Ihr die volle Kontrolle über euren CSS-Code erlangen wollt und gleichzeitig die Code-Qualität eurer Website verbessern möchtet, solltet ihr wissen was CSS-Spezifität ist. Die CSS-Spezifität beschreibt die unterschiedliche Gewichtung von CSS-Selektoren und hilft euch dabei zu verstehen welchen Selektor der Browser interpretiert.
Wenn ihr schon einmal einen CSS-Befehl geschrieben habt, der aus unerklärlichen Gründen vom Browser ignoriert wurde ist dieser Artikel sicher hilfreich. Wenn ihr schon einmal den !important-Befehl verwendet habt, weil ein Effekt anders nicht erreicht werden konnte, ist dieser Artikel Pflicht.

Beitrag zu Ende lesen

Webdesign mit Photoshop CS6 und CSS3

photoshop-cs6-css3

Mein neues Buch "Webdesign mit Photoshop CS6 und CSS3" ist ab sofort im Handel erhältlich. Da CSS3 mittlerweile große Teile der Webgestaltung abdeckt, habe ich das Buch sowohl auf die gestalterischen Aspekte in Photoshop, als auch auf die Arbeit mit CSS3 ausgerichtet. Auf über 320 Seiten findet ihr daher diverse praxisorientierte Workshops.

Beitrag zu Ende lesen

Flexible CSS-Hintergründe mit „background-size“ gestalten – Responsive Web Design

background-size-responsive-design

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. Für die Gestaltung des Layouts nehmen Hintergrundgrafiken daher eine besondere Rolle ein. In diesem Video zeige ich euch welche Möglichkeiten Ihr habt CSS-Hintergründe zu skalieren oder zu transformieren und wie in diesem Zusammenhang die CSS-Eigenschaft background-size genutzt werden kann.

Beitrag zu Ende lesen

Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

enigma64-logo-icon

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen

Mit „box-sizing: border-box;“ das CSS Box Model verändern

box-model

Mit dem CSS Befehl box-sizing: border-box; lässt sich das Box Model von CSS manipulieren. Die sichtbare Breite eines Elements wird dann nicht mehr wie üblich durch die Summe von width, padding und border bestimmt, sondern schließt diese Angaben bereits mit ein. Das erleichtert die Erstellung flexibler Seitenelemente, insbesondere im RWD, deutlich.

Beitrag zu Ende lesen

Grafiken mit Data URIs (Base 64) erzeugen

base64-code

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen