Das grosse Weihnachtsgewinnspiel - Tag 24 im CSS3 Adventskalender 2011

Das grosse Gewinnspiel - Tag 24 im CSS3 Adventskalender 2011Das grosse Gewinnspiel - Wie bereits zur Hälfte des diesjährigen CSS3 Adventskalenders angedeutet, wird es auch in diesem Jahr am 24.12.2011 ein Gewinnspiel zu dieser CSS3 Tutorial-Serie, die hier auf dem Webstandard-Blog und auf maddesigns, veröffentlicht wurde und aufgrund des Zugriffe, Verlinkungen und Kommentare einen sehr regen Anklang gefunden zu haben scheint. In Zusammenarbeit mit mehreren Verlagen ist es uns hoffentlich gelungen, für Euch interessante Gewinne anbieten zu können, die sich alle mit den Themen beschäftigen die in den letzten Wochen auf unseren beiden Blogs, in Zusammenarbeit mit den Gastautoren, veröffentlicht wurden. Damit diejenigen von Euch, die sich für die unterschiedlichen Gewinne (Bücher, Video-Tutorial, Zeitschriften) interessieren nicht den Überblick verlieren, werden die insgesamt 17 Gewinne nach Verlagen gegliedert.

 (weiter)

CSS4 - Die Zukunft des Webdesign - Tag 22 im CSS3 Adventskalender 2011

CSS4 - Die Zukunft des WebdesignDie Zukunft des Webdesign - Da CSS3 im Vergleich zu den vorangegangenen "Versionen" in Module aufgebaut ist und somit die Hürde der Implementierung einzelner CSS Eigenschaften für die Browserhersteller etwas niedriger ist, als wenn sie die Unterstützung einer "gesamten Version" funktionsfähig anbieten müssten, bietet sich das parallele Arbeiten an neuen Modulen nahezu an. Und damit meine ich nicht weitere CSS3 Module, sondern - CSS4 Module! Richtig gelesen! CSS4! Auch wenn, wie bereits im letzten Artikel dieses Adventskalender kurz beschrieben, eine Vielzahl an CSS3 Eigenschaften von Browsern wie dem Internet Explorer immer noch nicht unterstützt werden, gibt es keinen Grund in der Entwicklung stehen zu bleiben! Der heutige Artikel soll daher einen kleinen Ausblick darauf gewähren, was mit CSS4 möglich sein wird. Und das ist einiges!

 (weiter)

CSS3 Count - HTML Elemente nummerieren - Tag 20 im CSS3 Adventskalender 2011

CSS3 Count - HTML Elemente nummerierenWie in vielen anderen Bereichen der Gestaltung, sind es auch beim Webdesign manchmal die kleinen Details, die den gewissen Unterschied ausmachen und somit unter Umständen die Benutzerführung einer Webseite signifikant verbessern können. Der heutige Artikel möchte sich der Nummerierung von Elementen widmen und mit der damit verbundenen Zähl-Eigenschaft eine Möglichkeit vorstellen, die eine verbesserte Wahrnehmung der Seitenstruktur und der damit verbundenen Inhalte ermöglicht. So könnte man bspw. bei Inhaltselementen wie Kommentaren in einem Blog, falls der Strukturierung der Elemente keine geordnete Liste zugrunde liegt oder bspw. einer Paginierung von Inhaltsseiten, die Eigenschaft counter-increment zur Nummerierung zuweisen. Diese Eigenschaft kann dazu verwendet werden, den Wert für Elemente hochzuzählen und je nach gestalterischem Bedarf entsprechend visuell abzubilden. Das hier vorgestellte exemplarische CSS3 Tutorial beinhaltet hierzu zu diesem Zweck drei Infoboxen, denen je nach Reihenfolge im HTML-Code die entsprechende Nummer über das Pseudo-Element :after zugewiesen. Aber seht selbst!

 (weiter)

CSS3 Transform dreht Sprite-Grafik des CSS3 Togglers - Tag 18 im CSS3 Adventskalender 2011

CSS3 Transform mit Sprite-GrafikIm Sinne einer guten Benutzerführung, sollte man als Webseitenbetreiber immer daran interessiert sein, Webseitenbesuchern jegliche Funktionen und das unter Umständen damit verbundene Verhalten von Elementen, intuitiv mittels des Designs zu vermitteln. Das heißt, der User weiß bzw. erahnt zumindest, worum es sich bei einem Element handelt und welche Funktion es erfüllt. Das erste Element einer Webseite auf dass diese Anforderung zutreffen sollte, ist die Navigation oder das Menü einer Webseite. Eine Möglichkeit dem User den hier vorgestern im Webstandard-Blog vorgestellten CSS3 Toggler noch intuitiver zu gestalten, ist die den Menüpunkten ein Icon via CSS zukommen zu lassen, welches den geöffneten (aktiven) und geschlossenen (inaktiven) Zustand der Menüpunkte zusätzlich verdeutlicht. Das kann man mit einer Sprite-Grafik bewerkstelligen, die sämtliche Ausrichtungen der Icons beinhaltet oder aber mit einem Icon und das mittels CSS3 drehen. Wie das mit wenigen Zeilen CSS zu erreicht ist, zeigt dieses CSS Tutorial.

 (weiter)

CSS3 Toggler - Vertikales Menu zum Auf- und Zuklappen - Tag 16 im CSS3 Adventskalender 2011

CSS3 Toggler - Vertikales Menu zum Auf- und ZuklappenAuf- und Zuklappen (toggle-effect) ohne JavaScript - Fließend animierte Übergänge bei Slide- oder Aufklapp-Effekten von Webseiten-Elementen wie beispielsweise einem Menü, wurden bisher meistens mit JavaScript umgesetzt. Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches "Bewegungsmuster". Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten "Akkordeon- oder auch Toggle-Effekte" ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten. Das interessante an diesen nun mittlerweile vorhandenen Möglichkeiten mit CSS3 ist, dass für das Verhalten von Elementen und Inhalten JavaScript Konkurrenz von CSS bekommt. Und Konkurrenz belebt bekannterweise das Geschäft. Wie das genau geht, zeigt der nun folgende Workshop!

 (weiter)

CSS3 Pattern mit Linear-Gradient - Tag 14 im CSS3 Adventskalender 2011

CSS3 Pattern mit Linear- GradientDer Einsatz von Background-Pattern ist kein neuer Ansatz im Webdesign und daher verwundert es nicht das viele Webseitenbetreiber die Möglichkeit, eine große Fläche einer Webseite mit einer kleinen Grafik auszustatten die sich beliebig oft in x- und y-Richtung wiederholt, nutzen. Durch diesen Wiederholungseffekt (Background-Pattern), entsteht eine Art Muster das im heutigen 14. Türchen des CSS3-Adventskalenders ausschliesslich auf Basis von CSS3, genauer gesagt mit der Farbverlaufseigenschaft linear-gradient, vorgestellt wird. Dank dieser CSS3 Eigenschaft für Farbverläufe mit den Ausrichtungen linear und radial, besitzen Webdesigner endlich die Möglichkeit, Farbverläufe mittels CSS umsetzen zu können und endlich auf Hintergrundgrafiken hierfär verzichten zu können. Vorteil ist neben der möglichen Reduzierung von HTTP-Requests auch der flexible Einsatz solcher, ohne die Performance großartig zu beeinflussen. Aber seht selbst.

 (weiter)

Buch Gewinnspiel zum Bergfest - Tag 12 im CSS3 Adventskalender 2011

Gewinnspiel - Bergfest - Tag 12 im CSS3 Adventskalender 2011Am heutigen 12 Tag des CSS3 Adventskalenders kann ich den Lesern das Angebot unterbreiten, eines von 3 neuen Büchern des Galileo-Verlages gewinnen zu können. Warum? Weil Bergfest ist und laut Wikipedia die Metapher Bergfest vielerorts dazu verwendet wird, um einen als markant wahrgenommenen Zeitpunkt der Mitte eines bestimmten, meist durch einen persönlichen Ereignishintergrund und somit besonders gekennzeichneten Zeitabschnitts, zu beschreiben. Anlass genug, mal mit dem Vermitteln von Wissen zu CSS3-Eigenschaften einen Tag auszusetzen und Euch die Möglichkeit zu geben, unter Umständen am Wochenende bereits eines der folgenden Bücher in Händen halten zu können. Wem die relativ kleinen Cover-Abbildungen nichts sagen, dem sei gesagt das es sich um folgende Bücher Galileo-Verlages handelt: Die aktuelle und brandneue Auflage von "CSS - Das umfassende Handbuch" von Kai Laborenz, die 2. und erweiterte Auflage von "Der erfolgreiche Webdesigner - Der Praxisleitfaden für Selbstständige" von Nils Pooker und mein zweites seit Sommer auf dem Markt befindliches neues Buch "Modernes Webdesign mit CSS".

 (weiter)

CSS3 Text-Shadow erzeugt Blur-Effekt - Tag 10 im CSS3 Adventskalender 2011

CSS3 Text-shadow erzeugt Blur-EffektDas heutige CSS3 Tutorial beschäftigt sich neben der Eigenschaft der Text-Schattierung, auch mit dem RGBA-Farbraum. Die CSS Eigenschaft text-shadow wird insbesondere bei technik-affinen Betreibern von Blogs gerne als Möglichkeit genommen, um den Text noch mehr hervorzuheben. In Kombination mit anderen Eigenschaften, besitzt man allerdings auch die Möglichkeit eine Unschärfe eines Textes zu erzeugen und das mit wenigen Zeilen CSS. Warum dies überhaupt notwendig sein sollte, belegt die Tatsache das Unschärfe eines Textes wie in der Fotografie ein sehr geeignetes Mittel ist, dem Betrachter eines Bildes zu vermitteln, welche Komponenten der Fotografie dem Fotografen wichtig erschienen. In Bezug auf Webseiteninhalte könnte man bspw. bei einem Layer die dahinterliegenden Textinhalte unscharf erscheinen lassen, um somit den Fokus mittels dieses Blur-Effektes auf die Inhalte des Layers zu setzen.

 (weiter)

CSS Media Queries - Screen Size Icons - Tag 8 im CSS3 Adventskalender 2011

CSS3 Media Queries - Screen Size Icons - Tag 8 im CSS3 Adventskalender 2011Screen Size Icons - CSS3 ist in aller Munde. Eine der vielen nützliche Sachen an CSS3, sind die Media Queries. Damit lassen sich gewissen Dinge abfragen und auf auf der Ergebnis reagieren. Der meistbenutzte Anwendungsfall dürfte sein, dass man damit die Webseite für verschiedene Auflösungen bereit stellt. Somit bekommt man mit einem kleinen Netbook die Website etwas anders angezeigt als wenn man mit einem 27 iMac diese anschaut. Vorteil ist einfach, dass man das gegeben Ausgabegerät optimal nutzen kann. Nicht uninteressant das Ganze. Da im folgenden Media Queries Tutorial keine Einschränkung bezüglich eines bestimmten Medien Typen wie PC, Handheld oder Projektor vorliegen soll, gibt es hierfür keine zusätzliche Referenzierung zu einer seperaten CSS Datei. Das heißt, die CSS Eigenschaften für die veränderten Bedingungen basierend auf den Media Queries können in der CSS-Datei definiert werden, in der auch alle anderen Eigenschaften zur Gestaltung angelegt werden.

 (weiter)

CSS3-Keyframe-Animationen - Tag 6 im CSS3 Adventskalender 2011

CSS3-Keyframe-Animationen im Layout einsetzenIm heutigen Beitrag wird euch aufgezeigt, wie ihr Animationen als Gestaltungselement im Layout auf Basis von CSS3 einsetzen könnt. Da ich sehr gerne illustrativ arbeite, rolle ich das Thema CSS3-Keyframe-Animationen heute von einer anderen Seite auf und animiere keine typischen Website-Elemente wie Buttons etc. sondern Objekte in einer gezeichneten Landschaft. Anhand der zahlreichen verschiedenen Gestaltungselemente möchte ich euch Inspiration für eigene Ideen bieten und zeigen, wie ihr mit einfachen Mitteln lebendige Animationen erstellt. CSS3-Keyframe-Animationen ähneln ein wenig der Arbeit mit Flash-Tweens. Ein Objekt durchläuft in einem festgelegten Zeitraum verschiedene Schlüsselbilder (sog. Keyframes). Jedem Keyframe werden unterschiedliche Eigenschaften, wie z.B. die Größe oder die Position des Objektes, mitgeteilt. Die Unterschiede zwischen den Keyframes stellen anschließend die Animation dar. Ein Objekt bewegt sich also beispielsweise in einem Zeitraum von 5 Sekunden von Position A zu Position B.

 (weiter)

CSS Transform und Transition am Beispiel eines Call-to-Action-Elementes - Tag 4 im CSS3 Adventskalender 2011

CSS Transform und TransitionDer Sinn und Zweck der hinter der Gestaltung von Webseitenelementen im Detail steckt, ist der die Attraktivität der Elemente derart zu erhöhen, dass diese bei Call-to-Action-Elementen wie einem Link oder Button, den Webseitenbesucher zu einer Aktion, sprich einer Konversion, zu "führen". Dies geschieht bei den beiden genannten Elementen mit einer aussagekräftigen "Betextung", die den Anreiz schafft auf dieses Element klicken zu wollen oder aber eben durch eine entsprechend visuelle Gestaltung, die dieses Ziel im Idealfall zusätzlich verstärkt. Das heutige Türchen des CSS3-Advenstkalenders, soll diesen beiden Aspekten einen weiteren hinuzfügen - einen Überblendeffekt bei MouseOver (Produktabbildung "verwandelt" sich in Produktpreis), auf Basis der Kombination der CSS3 Module Transition & Transform, ohne JavaScript und mit lediglich ein paar Zeilen HTML und CSS.

 (weiter)

CSS Regions - Bereiche zur Aufnahme von Inhalten definieren - Tag 2 im CSS3 Adventskalender 2011

CSS Regions - Bereiche zur Aufnahme von Inhalten definierenDas sich Inhalte von Webseiten innerhalb eines dafür vordefinierten Bereiches "ausbreiten" können, ist nichts neues. Mit dem Multi-Column Layout Module gibt es auch bereits den Ansatz, dass sich Inhalte über mehrere Spalten hinweg innerhalb eines dafür vordefinierten Bereiches "ausbreiten" können. Mit CSS Regions betritt nun ein CSS3 Modul die Webdesign-Landschaft, dass Inhalte über verschiedene Bereiche Hinweg ausbreitet. Einige von Euch werde diese Verhaltensweise von Desktop-Publishing-Programmen wie Illustrator oder InDesign her kennen. Interessant ist auch, dass mit Adobe ein Betreiber eines solchen Desktop-Publishing-Programmes für dieses Verhalten einen Entwurf beim W3C eingereicht hat. Bezogen auf ein Newspaper-Layouts würde diese Eigenschaft den Möglichkeit bieten, den Text vor einem Bildelement zu beginnen und wenn eine bestimmte Höhe dieses Elementes "mit Zeichen (auf)gefüllt" ist, nach dem Bildelement fortzuführen. Hört sich unter Umständen ein wenig seltsam an, ist es aber nicht. Die Umsetzung für dieses Verhalten selbst ist nicht sehr aufwändig und bedarf nur weniger Zeilen CSS. Aber seht selbst!

 (weiter)