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.

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

Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren

aktiver-button

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

Beitrag zu Ende lesen