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

Zu gewinnen: 2x Photoshop-Plugin Enigma64!

enigma64-icon

Vor Kurzem habe ich euch das brandneue Photoshop-Plugin Enigma64 vorgestellt. Enigma64 stellt ein zusätzliches Bedienfeld für den Export von Web-Grafiken und Code zur Verfügung und beschleunigt den Workflow deutlich. Insbesondere für schnelle Prototypen setze ich das Tool umfassend ein. Ich freue mich daher besonders euch im Rahmen dieses Gewinnspiels zwei Lizenzen bereitstellen zu können. Hier erfahrt ihr wie ihr gewinnen könnt.

Beitrag zu Ende lesen

23 neue Tools, Scripte und Frameworks für Webdesigner – März 2013

wp-test-icon

Es ist wieder soweit – ich möchte euch einige neue Tools, Scripte und Frameworks vorstellen, über die ich in den vergangenen Wochen gestolpert bin. Diesen Monat sind verschiedene Hilfsmittel für die Arbeit mit Prototypen, Icon-Fonts und WordPress-Themes mit von der Partie. Darüber hinaus Scripte zur Erstellung von Text-Animationen, komfortablen Formularen und Suchfeldern. Viel Spaß beim stöbern.

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

Video-Training „Responsive Webdesign“ – Über 8H Praxiswissen zu Konzeption, Workflow, Technik, Gestaltung & Optimierung

responsive-webdesign-video-training

Responsive Webdesign ist aktuell der heißeste Trend der Webdesign-Szene. Aus diesem Grund freue ich mich besonders, euch mein neues Video-Training zu diesem Thema vorstellen zu dürfen. Die bei Galileo Press erschienene DVD kann bereits bei Amazon bestellt werden. Im Buchhandel ist sie ab Ende des Monats erhältlich.
Euch erwarten über 8 Stunden praxisorientiertes Know-how rund um Responsive Webdesign und moderne Webentwicklung. Die Trailer und ein detailliertes Inhaltsverzeichnis findet ihr hier.

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