CSS-Sprites mit Sass und Compass

CSS-Sprites mit Sass und CompassDas man mit CSS-Sprites die Ladezeit des Web-Frontends vom Websites teilweise signifikant verbessern kann, sollte zumindest den Lesern des Webstandard-Blogs nicht ganz neu sein. Für nicht wenige Anwender ist es jedoch nicht immer ganz leicht, mal eben ein CSS-Sprite anzulegen, diese aktuell zu halten und ggf. noch auf responsives Verhalten zu optimieren. Der tägliche Umgang mit solchen Sprite-Grafiken erweist sich nicht selten als diffizil, vor allem dann wenn ein Team von mehreren Frontend-Entwicklern daran arbeitet. Bei Anpassungen muss neben der dazugehörige CSS-Datei,auch die Grafik stets aktualisiert werden. Ein aktueller Artikel des der Berliner Full-Service-Agentur mediaworx zeigt, wie man CSS-Sprites mit Sass und Compass automatisiert erstellt und besonders bei Änderungen keine Zeit bei der Umsetzung verliert.

Retina Display - Mit CSS Background-Image und Image-Set zu scharfen Bildern

Retina Display - Mit CSS Background-Image und Image-Set zu scharfen BildernEin High Resolution Display oder besser bekannt als Retina Display, besitzt eine wesentlich höhere Pixeldichte als herkömmliche Displays und ist somit in der Lage Schriften, Icons und Bildern wesentlich hochauflösender mit wesentlich mehr Details darstellen zu können. Schön wenn man sich diese Entwicklung auch für die Umsetzung von Webseiten zu Nutze machen könnte. Nicht das man es nicht kann, denn hierfür gibt es bereits zahlreiche Ansätze. So kann man mittels einer kleinen JavaScript-Abfrage, ob Retina-Display oder nicht, dem Endgerät bspw. entsprechend unterschiedliche Bilder zuweisen lassen. Nachteil, man benötigt JavaScript. Im Frühjahr diesen Jahres gab es in den Webkit Nightly-Builds erste Ansätze für eine reine CSS-Unterstützung. Mittlerweile ist diese Umsetzung so weit vorangeschritten, dass Anwender mit Safari 6 oder Chrome 21 auf iOS 6 in der Lage sind, über Background Image-Set eine entsprechende Zuweisung ausschließlich mittels CSS vornehmen zu können.

 (weiter)

CSS mit Variablen - Webdesign wird modularer dank neuem CSS4 Modul

CSS mit Variablen - Webdesign  wird modularer dank neuem CSS4 ModulWährend CSS 2.1 noch als ein großes Gesamtpaket veröffentlicht wurde, wurde CSS3 in verschiedene Module untergliedert, womit die Weiterentwicklung und die spätere Veröffentlichung wesentlich schneller vonstatten. Selbige Herangehensweise gibt es auch bei CSS4. Bereits im letzten Jahr wurden hier einige neue Ansätze, wie neue Selektoren und Variablen vorgestellt. Und genau in diesem CSS Modul für Variablen gibt es nun endlich etwas Bewegung seitens des W3C, aber auch der Unternehmen die diese Entwicklung mit Variablen mit CSS vorantreiben. Seit Mitte Juni gibt es hierfür vom W3C einen sogenannten Editors Draft, in dem einige Eigenschaften und Vorgehensweisen zu diesem Modul für CSS Variablen zusammengefasst sind. Tab Atkins Jr., seines Zeichens Entwickler des Google Browser Chrome und Mitarbeiter der CSS Working Group die an dieser Spezifikation für das W3C arbeitet, schreibt in seinem Blog das sich eben diese CSS Working Group darauf verständigt, CSS Eigenschaften mit Variablen wie bereits hier vor einem Jahr vorgestellt, mit var-foo zu kennzeichnen, um dann mit var(foo) auf diese Eigenschaft zugreifen zu können

 (weiter)

CSS Animation - Werbebanner zu den Olympischen Spielen 2012 in London

CSS Animation - Olympischen Spiele - London 2012Im Online-Marketing stellen Werbebanner eine der Möglichkeiten dar, Produkte oder Dienstleistungen zu bewerben. Entweder, wie in den meisten Fällen bisher üblich mittels Flash, statisch als Grafik oder auch als animierte Grafik. Um darüber relevanten Traffic zu generieren, muss ein solches Werbemittel entweder mit einem (unschlagbaren) Angebot überzeugen und darüber die Bedürfnisse des Betrachters wecken oder aber, der Banner überrascht mit seinem Design und macht den Betrachter schlicht und ergreifend einfach neugierig. Allerdings leiden insbesondere die animierten Grafiken oftmals darunter, dass sie entweder altbacken wirken oder insbesondere bei mobilen Endgeräten wie Smartphones oder Tablets entweder gar nicht angezeigt werden (weil sie von Apple-Produkten auf diesen Devices nicht unterstützt werden), oder auf Retina Displays unglaublich unscharf wirken. Wer meinen Blog hier kennt, weiß was jetzt kommt - CSS3 bietet einen "Ausweg" und zwar bspw. auf Basis des CSS Animation Modules.

 (weiter)

CSS Specificity - CSS Selektoren und die Wirkung von Klassen, IDs und Co.

CSS Specificity - CSS Selektoren und die Wirkung von Klassen, IDs und Co.Ein Aspekt hochwertiger Frontendentwicklung ist die korrekte Ansprache der richtigen HTML-Elemente per CSS. Mit Klassen, IDs & Co., lassen sich die gewünschten Elemente herausfiltern. Teilweise kann man sogar auf überflüssige Auszeichnungen verzichten, wenn die Spezifität von CSS Selektoren und deren Auswirkungen, basierend auf deren Gewichtung, bekannt sind. "CSS Specificity - Gewichtung und Ursprung von Selektoren" lautete der Titel des ersten Teils dieser kleinen Artikelserie. Dort wurde mit der !important Regel ein unwiderruflicher Eingriff in die Wirkung der Spezifität von Selektoren innerhalb von CSS vorgestellt. Allerdings sollte diese Variante aufgrund der Veränderung der natürlichen Wertigkeit nicht inflationär eingesetzt werden und muss es auch nicht, denn es gibt weitaus empfehlenswertere Lösungsansätze.

 (weiter)

CSS Specificity - Gewichtung und Ursprung von Selektoren

CSS - Gewichtung und Ursprung von SelektorenWer ist nicht schon daran verzweifelt: Man ändert eine Layout-Eigenschaft im Stylesheet und nichts passiert. Meist steckt der Fehler im Detail, genauer gesagt: In der Spezifität (engl. Specificity) der Selektoren. Das heißt, die Gewichtung und der Ursprung von CSS Selektoren geben Ausschlag darüber, welcher Selektor die CSS Eigenschaften umsetzt. Der für CSS ausschlaggebende Prozess der Ausführung, die sogenannte Kaskade, wird in vier Stufen untergliedert. Die Styleanweisungen werden je nach Gewichtung, Ursprung, Spezifität und Reihenfolge, in der die CSS Eigenschaften aufgeführt werden, vom Browser im jeweiligen Endgerät ausgeführt. Durch diese "Prüfung", wird die Grundlage zur Vermeidung von Konflikten zwischen verschiedenen Stylesheets gebildet.

 (weiter)

CSS Tooltip - Step-by-Step Tutorial

CSS Tooltip – Step-by-Stept TutorialJeder von Euch kennt ihn, den Tooltip. Dieses kleine visuelle Gestaltungsmittel, dass auf schnelle Art und Weise eine (zusätzliche) Information anzeigen soll. Die Browserhersteller bieten ihn über das title-Attribut an, dessen grafisches Antlitz in den meisten Fällen aber nicht dem Design der Webseite entspricht. Um eine Verbesserung der Benutzerführung über dieses meistens textergänzendes Mittel zu erreichen, kann man mit CSS3 und den entsprechenden Pseudo-Elementen bzw. -klassen, mehr als nur einen einfachen eckigen Tooltip erstellen. In einen Gastbeitrag von mir im Blog der Codingpeople, wird daher ein Bestandteil der Bildmarke des Logo dieses Blogs mittels CSS umgesetzt. Eckige Tooltips sind relativ leicht zu ertsellen und auch die gängigen CSS3 Generatoren können dieses Element in wenigen Sekunden erzeugen. Unter Umständen können diese auch den CSS Code eines runden Tooltip erstellen, aber wie sieht es mit einem ovalen Tooltip und einer dazu gehörigen leicht geneigten Spitze aus?

 (weiter)

CSS Media Queries - Nach Bandbreite optimierte Inhalte anbieten - Zukunftsmusik?

CSS Media Queries - Je nach Bandbreite optimierte Inhalte anbieten - ZukunftsmusikBandbreiten-Perfomance - Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge das geladen werden muss, da ansonsten die Performance spürbar draunter leiden kann. Mit JavaScript besäße man zwar die Möglichkeiten je nach Bedarf, dass heißt der zur Verfügung stehenden Bandbreitenübertragung, gezielt optimale Ressourcen wie Bilder auszuliefern. Chris Coyier von CSS-Tricks hat hierzu allerdings einen äußerst interessanten Einwurf bzw. "Wunsch" geäußert, welche ich gern an Euch weitergeben möchte. Daher die Frage an Euch - wie sinnvoll oder hilfreich wäre es eurer Meinung nach, mittels CSS Media Queries Ressourcen wie bspw. Bilder anzusprechen und somit an die entsprechenden Endgeräte bzw. Viewportgrößen unter den entsprechenden Bedingungen auszuliefern. Das würde dazu führen, dass nicht mehr gleiche Inhalte für unterschiedliche Anforderungen geladen und angezeigt werden würden, sondern für die jeweils beim Benutzer vorliegenden technischen Bedingungen optimierte Inhalte.

 (weiter)

Icon Fonts - Design your sign with CSS

Icon Fonts - Design your sign with CSSDas die gestalterischen Möglichkeiten rund um die CSS3 Module eine große Vielfalt bieten, sollte den Meisten hinlänglich bekannt sein. Dazu gehört unter anderem die Implementierung von Schriften mittels @font-face. Dieser Ansatz öffnet aber auch sogenannten Icon Fonts eine Tür, durch die diese weiterhin als Gestaltungsmittel, wie bspw. in grafischen Symbolen fungieren können, allerdings mit dem Unterschied, dass sie nicht mehr als Grafik sondern als Zeichen eingebunden werden. Es kann somit zwar der Request für die Grafik eingespart werden, aber der Request für das Laden des Icon Font Sets via @font-face benötigt diesen wieder. Welche Vorteile aber in Bezug auf die flexible Gestaltung dieser endlos skalierbaren Schriften auf der Hand liegen und wie man diese visuell gestalten kann, zeigt ein von mir Ende letzter Woche verfasster Artikel-2-Teiler zum Thema Icon Fonts auf dem Blog der Codingpeople.

 (weiter)

Fading Images - CSS3 Tutorial - Auf- und Abblenden von Bildern ohne JavaScript

Fading Images - CSS3 Tutorial ohne JavaScriptCSS3 is pushing the Web - Ob Shopbetreiber mit Produktdetailseiten, Reiseportale mit Landingpages für bestimmte Reiseziele oder selbstständige Designer oder Fotografen, mit der Möglichkeit von Interessenten online über ihr Portfolio kontaktiert und somit gebucht zu werden, die Möglichkeiten für einen Einsatz des heute vorgestellten visuellen Effektes auf Basis von CSS3 sind vielfältiger Natur. Und das nicht nur weil es möglich ist und Spaß macht, sondern weil es auch wie bspw. in Bezug auf die Performance, offensichtliche Vorteile mit sich bringt. Denn das heutige CSS3 Tutorial hat sich es daher zur Aufgabe gemacht, einen Effekt der bisher immer auf Basis von JavaScript realisiert wurde, mittels CSS3 zu lösen - die Rede ist von der Überblendung (faden) von Elementen, wie bspw. Bildern.

 (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)

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)

CSS3 Advenstkalender 2011 - Webdesign meets X-mas!

CSS3 Advenstkalender 2011 - Webdesign meets X-mas!"Webdesign meets X-mas!" - Die meisten Dinge im Leben sind unvermeidbar! Je nach Interesse und Vorlieben möchte man die einen vermeiden, während man die anderen herbeisehnt. Und dazu gehört, zumindest für die meisten Menschen, auch Weihnachten und der damit fast unvermeidbare Adventskalender. Natürlich ist mir durchaus bewusst das bis dahin noch etwas Zeit ist, dennoch möchte ich Euch hiermit darüber informieren, dass es auch 2011 wieder einen CSS3 Adventskalender geben wird! Zusammen mit Sven von maddesigns, habe ich mich dazu entschlossen zusammen den Lesern unserer beiden Blogs auch dieses Jahr einen Ausblick auf aktuelle und zukünftige Entwicklungen dieses Webstandards zu werfen. Da im kreativen Gedanken- und Ideenaustausch zweier Webdesigner miteinander mehr "brauchbares" bei raus kommt als beim Brainstorming eines einzelnen Webdesigners, dachten wir uns das wir dieses Jahr weitere und im deutsch-sprachigen Raum sicherlich auch bekannte Webdesigner, als Gastautoren für diese Aktion hinzuholen. Gesagt, getan!

 (weiter)

Mozillas DevDerby - CSS3 Animations - Gewinnspiele zu CSS3, HTML5 & Co.

 CSS3 AnimationsMozillas DevDerby - Seit Anfang diesen Monats läuft das von Mozilla gesponsorte DevDerby. Das jeweilige Derby an dem jeder Interessierte gern teilnehmen kann, widmet sich einem speziellen Thema. In diesem Monat ist das Thema CSS3 Animation. Die Machen dieses Wettbewerbs fordern uns auf, zu zeigen was CSS und hier insbesondere das CSS3 Animation Modul wirklich kann! Unter dem Title "Make the web move" sind bisher CSS3-Animationen eingereicht worden. In kurzer Absprache mit Christian Heilmann von Mozilla, habe ich meine kürzlich erstellte CSS3 Animation "The PONG Game" ebenfalls dort eingereicht. Wie bereits hier in dem ein oder anderen Beitrag beschrieben, bieten CSS3-Animationen die Möglichkeit modernen Browsern wie Firefox (ab Version 5!), Google Chrome und Safari, noch mehr Flexibilität und Kontrolle über das Verhalten bestimmter Webinhalte zur Verfügung zu stellen.

 (weiter)

CSS Animations - The PONG Game - Firefox folgt Chrome und Safari

CSS Animations - The PONG GameThe PONG Game - Das 1972 und somit vor fast 40 Jahren (!) von Atari auf den Markt gebrachte Computerspiel dürften die meisten von euch sicherlich kennen. Aus nostalgischen Gründen, insbesondere aber aus aktuellem Anlass, der Unterstützung des CSS3 Module Animations durch die noch in der Entwicklung befindlichen Version 5 des Firefox (Aurora-Channel), wird in dem folgenden Blogbeitrag eine ausschließlich auf CSS3 basierende Animation dieses Computerspiels vorgestellt werden. Da Google Chrome und Safari bereits das CSS3 Module Animations unterstützen und mit dem Firefox dann auch bald der dritte Browser diesen Support anbieten wird, können somit ab Ende diesen Monats somit knapp 85% aller Leser des Webstandard-Blogs, in den Genuss von CSS3 Module Animations kommen.

 (weiter)

HSLA Color Module - RGBA Alternative - CSS3 Adventskalender Tag 22

HSLA Color Module - RGBA Alternative - CSS3 Adventskalender Tag 22HSLA - Bei der Gestaltung von Webseiten kommt der Farbgebung von Elementen oder Schriften eine der wichtigsten Aufgaben zu. Diese wurde bisher fast ausnahmslos mit Hexadezimalwerten (#FFFFFF für weiß) oder durch die Verwendung von Farbangaben des RGB-Farbmodells (255,255,255 für weiß) umgesetzt. Die Realisierung von Transparenzen wurde über das Hinzufügen des Alpha-Kanals definiert (255,255,255, 0.6). Eine Alternative hierzu bietet das bisher weniger bekannte Farbmodell HSL, welches auch Transparenzen unterstüt. Bei diesem bisher noch relativ wenig für die Definition von Webfarben angewandten Farbraum, werden Farben mit Hilfe des Farbtons (Hue), der Farbsättigung (Saturation) und der Helligkeit (Luminance) definiert. Der Vorteil - es wird von allen für uns relevanten aktuellen Browserversionen unterstüzt. Wie man diese Werte bspw. mittels einer Browser-Erweiterung auslesen kann und was diese CSS3 Eigenschaft für das vorgestrige Beispiel, der Vergabe der Farbwerte des Reagenzglases bedeuten kann, erfahrt ihr im weiteren Verlauf dieses Beitrages.

 (weiter)

CSS3 Calc - Rechnen mit CSS - CSS3 Adventskalender Tag 20

CSS3 Calc - Rechnen mit CSS - CSS3 Adventskalender Tag 20Rechnen mit calc() - Auch wenn die kürzlich neu erstellte Liste der schnellsten Top-500 Rechner nun mit China das Land des schnellsten Rechners stellt, kommt aus der erste Browser der Rechenprozesse bspw. auch ohne JavaScript erledigen kann, immer noch aus den Vereinigten Staaten. Die Rede ist vom Firefox und seiner noch in der Betaversion befindlichen Version 4. Denn dieser ist nun endlich in der Lage, den im September 2006 erstellten Entwurf des W3C, umsetzen zu können. Das heißt, er kann addieren, multiplizieren, dividieren und subtrahieren. Das folgende kleine CSS3 Tutorial soll euch daher mit diesen neu zur Verfügung stehenden Eigenschaften und deren Auswirkungen vertraut machen.

 (weiter)

3D Transform - CSS Tutorial - CSS3 Adventskalender Tag 18

CSS 3D Transform - CSS3 Adventskalender Tag 183D Transform - Der vorgestrigen zweidimensionale Verformung von Flächen folgt heute eine kleine Einleitung zum CSS 3D Transforms Module. Mit transform können somit im zweidimensionalen und dreidimensionalen Raum skaliert, verschoben oder gedreht werden. Das hierbei durchaus praxistaugliche Verhaltensweisen der entsprechenden Elemente erzeugt werden können, belegt der hier bereits im Sommer veröffentlichte Artikel Kreatives Webdesign CSS3 Transform. Am Ende dieses Beitrags wird noch ein Ausblick auf die Praxistauglichkeit und möglichen Anwendungsgebiete dieser CSS3 Eigenschaften gegeben, der gern von Euch diskutiert werden kann.

 (weiter)

CSS 2D Transform - Scale, Rotate, Skrew, - CSS3 Adventskalender Tag 16

CSS 2D Transform - CSS3 Adventskalender Tag 162D Transform - Zweidimensionale Flächen wie bspw. das eines Quadrates zu erzeugen, ist für CSS keine sonderlich große Herausforderung. Mittels des 2D Transform Moduls ist es mittlerweile möglichen solch zweidimensionale Flächen zu verschieben (natürlich nicht via padding oder margin), zu skalieren, zu drehen, aber auch zu verzerren. Dieses Set an neuen CSS3 Eigenschaften deren Browser-Support größer ist als gemeinhin angenommen, wird im folgenden kleinen Tutorial auf dem Quellcode des Blogartikels ungleichen Ecken aufsetzen und die verschiedensten Eigenschaften dieses moduls wie die Vergrößerung bzw. Verkleinerung mit (CSS3 Scale), Drehung oder Neigung (CSS3 Rotate) von Elementen näher vorstellen.

 (weiter)

CSS Animation - Morphing Element - CSS3 Adventskalender Tag 14

CSS Animation - Morphing Element - CSS3 Adventskalender Tag 14CSS Animation - Laut Wikipedia ist eine Animation im engeren Sinne jede Technik, bei der durch das Erstellen und Anzeigen von Einzelbildern für den Betrachter ein bewegtes Bild geschaffen wird. Diese Aufgabe wurde in der Vergangenheit zum Leidwesen vieler Anwender, denen das ein oder andere Plugin im Browser fehlt(e), von Flash übernommen. Dass CSS3 Animations unter bestimmten Umständen ein solches im wahrsten Sinne des Wortes "bewegtes Verhalten" durch Eigenschaften von CSS3 übernehmen kann, auch wenn sie das aufgrund der Möglichkeiten der Browser erst einmal auf relativ "einfache" Animationen handeln wird. Um Euch dies am heutigen 14. Tag des CSS3 Adventskalenders näher zu bringen, wird das CSS3 Code-Beispiel der ungleichen Ecken vom 2.Tag des Adventskalender aufgegriffen und um diese neuen Eigenschaften ergänzt.

 (weiter)

Media Queries - CSS Beispiel - CSS3 Adventskalender Tag 12

Media Queries - CSS Beispiel - CSS3 Adventskalender Tag 12Media Queries - Wer bereits Erfahrungen mit dem Einbinden separater Stylesheet Dateien für bestimmte Medientypen (Print, Projektor, Handheld,...) gemacht hat, dem wird das Konzept vertraut sein, wie eine solche zusätzliche CSS-Datei unter bestimmten Bedingungen (bspw. für eine Druckausgabe) implementiert wird. Genau dieses Konzept wird auch von den Media Queries in CSS3 aufgegriffen. Mit Media Queries können die Eigenschaften von Ausgabemedien wie mobilen Endgeräten abgefragt und somit CSS-Eigenschaften speziell für die Fähigkeiten dieser Medien angelegt und somit für den Anwender zielgerichtet optimiert werden. Auf diese Weise können bspw. für iPhone-Nutzer Styles für die horizontale (portrait-view mit max-width von 320px), aber auch vertikale Darstellung (landscape-view mit min-width von 321px und max-width von 480px) der Inhalte optimiert werden.

 (weiter)

CSS3 Multi-column - Mehrspaltiges Layout - CSS3 Adventskalender Tag 10

CSS3 Multi-column - Mehrspaltiges Layout - CSS3 Adventskalender Tag 10Mehrspaltiges Layout - Eine der ersten, wenn auch nicht finalen, veröffentlichten Eigenschaften des W3C bezüglich CSS3, war am 22.Juni 1999 (!) das Multi-column Layout Modul. Das Interessante an dieser hier bereits vor 5 Jahren aufgegriffenen Eigenschaft ist, dass der Textfluss von allein erzielt wird und die Inhalte eines Elementes auf das diese Eigenschaft angewendet wurde, von einer in die nächste Spalte fließen. Anhand eines fiktiven Interviews mit Mozilla, in Kombination mit denen zur Verfügung stehenden CSS3 Eigenschaften für dieses Modul, wird ein mehrspaltiges Layout im weiteren Verlauf dieses 10 Tages des CSS3 Adventskalenders etwas näher vorgestellt.

 (weiter)

CSS3 @font-face - CSS Fonts-Modul - CSS3 Adventskalender Tag 8

CSS3 @font-face - CSS Fonts-Modul - CSS3 Adventskalender Tag 8@font-face - Bei der Gestaltung von Webseiten ist der Einsatz von Typografie immer wieder eine der zentralen Fragen und Herausforderungen denen man sich stellen muss. Aufgrund der technischen Restriktionen der Browser(hersteller) aber, war ein kreativer Umgang mit Schriften die nicht auf dem System des Anwenders aktiviert waren, oftmals stark eingeschränkt. Ausgeholfen haben die verschiedensten Techniken wie bspw. SIFR oder Image-Replacement. Mit dem CSS Fonts-Modul und der unter anderen darin enthaltenen @font-face Regel wurde ein Lösungsansatz geschaffen, der es Webseitenbetreibern nun ermöglicht Schriften bereit zu stellen und diese über die gängigen Browser (nahezu identisch) abzubilden. Bedingung: Die Schrift muss auf einem Webserver zur Verfügung gestellt werden.

 (weiter)

CSS3 Text Overflow - Mit Auslassungszeichen Texte abschneiden - CSS3 Adventskalender Tag 6

CSS3 Text Overflow - Das Auslassungszeichen - CSS3 Adventskalender Tag 6Das Auslassungszeichen (...) Nicht selten steht man vor der Aufgabe Textinhalte nur in bestimmten Ausmaßen abbilden zu dürfen, weil ansonsten das Layout dem Text nicht standhalten würde. Daher müssen diese, oftmals über ein CMS angelegten Inhalte, bei überschreiten bspw. einer Breite gekürzt werden. Dies geschieht nicht selten durch bloßes Abschneiden dieser Inhalte. Nebenerscheinung dieser Herangehensweise - der Text ist oftmals schlecht lesbar. Womit der Webseitenbesucher im schlechtesten Fall nicht die Informationen erhält, die er oder sie gesucht hatten. Das es allerdings mittels der CSS Eigenschaft text-overflow und dem Wert "ellipsis" eine wesentlich elegantere Lösung gibt, ist Bestandteil des heutigen 6. Tages des CSS3 Adventskalenders ...

 (weiter)

Linear Gradient - Detaillierter Farbverlauf - CSS3 Adventskalender Tag 4

Linear Gradient - Der detaillierte Farbverlauf - CSS3 Adventskalender Tag 4Farbverlauf - Wie gestern bereits bei maddesigns gelesen, gibt es dank der CSS3 Eigenschaft gradient mit seinen Ausrichtungen (linear, radial) endlich die Möglichkeit, Farbverläufe bei der Umsetzungen von Webprojekten endlich nicht mehr nur mittels Grafikprogrammen erzeugen und in die CSS-Dateien einbinden zu müssen. Vorteil ist neben der möglichen Reduzierung von HTTP-Requests auch die Zeitersparnis bei der Erstellung einer solchen Grafik. Am vierten Tag des CSS3 Adventskalenders geht es allerdings nicht um den "herkömmlichen Farbverlauf" mittels der Eigenschaft linear-gradient, sondern um Farbverläufe die mittels "Haltepunkten" (color-stop) gezielt "geführt" werden können. Am Ende des Tutorials, gibt es auch einen Lösungsvorschlag für Opera-Anwender. Aber seht selbst.

 (weiter)

Border Radius - Ungleiche Ecken - CSS3 Adventskalender Tag 2

Border Radius - Ungleiche Ecken - CSS3 Adventskalender Tag 2Ungleiche Ecken mit Border-Radius - Am zweiten Tag des Adventskalenders zum Thema CSS3, werden euch heute "schiefe bzw. ungleiche" Ecken etwas näher vorgestellt. Diese "Erweiterung" ist ein Verhalten, welches auf der Eigenschaft Border-Radius aufsetzt und mittlerweile von allen aktuellen Browserversionen Unterstützung erfährt. Um diese CSS3 Eigenschaft aber etwas genauer vorstellen zu können, werden in diesem Beispiel vier Elemente abgebildet (in diesem Fall vier nebeneinander ausgerichtete Listenpunkte), welche durch Hinzufügen entsprechender CSS3-Eigenschaften eine Art Metamorphose vom Quadrat hinzu einem Element mit "ungleichen bzw. schiefen Ecken" vollzieht. Aber seht selbst.

 (weiter)

CSS3 Adventskalender - Animations, Transitions, MediaQueries, Calc, ...

CSS3 Adventskalender - Animations, Transitions, MediaQueries, Calc, ...Die Weihnachtszeit ist vielerorts bereits präsent und auch im Web wird davor nicht halt gemacht. Aus diesem Grund hat sich Sven von maddesigns dazu entschlossen, einen Adventskalender zum immer interessanter werdenden Thema CSS3 zu starten. Ein Vorgehen dem sich der Webstandard-Blog natürlich gern anschließt. Jeden Tag vor Weihnachten wird es daher im Wechsel, Tag für Tag ein für Euch hoffentlich nützliches CSS3-Tutorial geben. Den morgigen Anfang macht natürlich der Initiator dieser Aktion und am 2.Dezember geht es hier weiter. Um der Aktion noch einen zusätzlichen Reiz zu verschaffen, hat sich Sven dazu entschlossen das brandneue englischsprachige Buch "CSS3 For Web Designers" von Dan Cederholm unter all seinen Kommentatoren zu verlosen. Da für die hoffentlich zahlreichen Kommentatoren ein Buch vielleicht zu wenig wäre, packe ich noch eine Ausgabe oben drauf. Allen Teilnehmern und Lesern viel Spaß mit dem CSS3 Adventskalender und viel Erfolg im Umgang mit CSS3!

 (weiter)

CSS-Design - Wie weit sollte man bei der Gestaltung durch CSS gehen?

Wie weit sollte man bei der Gestaltung durch CSS gehen?Mit CSS "Inhalte" gestalten - In Anlehnung an einen kürzlich erschienen Artikel im Blog von Matt Ward, möchte ich seine dort gestellte Frage hier aufgreifen und gern Eure Meinung dazu in Erfahrung bringen. Denn Ward stellt nicht zu Unrecht die Frage - "Ob der ein oder andere mit CSS nicht ein wenig zu weit geht". Insbesondere ins Auge gefasst hat er hierbei die Gestaltung und Erstellung von Logos oder Icons die ausschließlich auf CSS basieren. Das heißt, es werden eine Textinhalte oder Bilddateien via CSS gekonnt gestaltet werden, sondern vollkommen unnötige Div-Konstrukte erzeugt, die keinen semantischen Bezug zu den Inhalten besitzen. CSS3 hingegen, bietet auch in solchen Fällen eine durchaus interessante Alternative und das ganz ohne zusätzlichen und unnötigen Quellcode erzeugen zu müssen!

 (weiter)

CSS3 Animation - The new Flash?

CSS3 Animation - The new Flash?CSS3 Animation - Die Diskussionen ob HTML5 das Ende von Flash bedeutet gibt es bereits seit geraumer Zeit. Und auch wenn HTML5 für die Strukturierung der Inhalte durch entsprechende HTML-Elemente zuständig ist, für den Großteil von Animationen im WorldWideWeb wird in Zukunft neben JavaScript auch CSS3 in Form des Modules Animation zuständig sein. Wobei nicht unerwähnt bleiben sollte, dass man sich die folgende kleine Liste an CSS3 Animationen, auch wenn der Mozilla Browser Firefox Fortschritte macht, in Bezug auf Browser-Unterstützung eher auf auf Google Chrome oder Safari (beide Webkit) ansehen sollte, wenn man in den Genuss der vollständigen Animation kommen möchte.

 (weiter)

Kreatives Webdesign mit CSS3 - Transition und Transform bringen Bewegung ins Spiel

Kreatives Webdesign mit CSS3 - Transition und TransformWebdesign mit CSS3 - Nicht zuletzt aufgrund der zahlreichen neuen Möglichkeiten bei der Umsetzung der Gestaltung von Webseiten mittels CSS3 steigt der Bedarf an Informationen, wie die CSS3 Eigenschaften Transition und Transform angewendet werden. Ob fliessend animierte Übergänge im Slide-Effekt bei Navigationen oder Bilder-Galerien oder aber die Erzeugung von Schatten für Webseiten-Elemente wie für Formulare, die möglichen Einsatzgebiete dieser Eigenschaften sind mehr als umfangreich. Wer einmal die Vorzüge von CSS3 kennen gelernt hat, möchte ungern wieder einen oder auch zwei Schritt zurück machen. Denn das Einsparen von Hintergrundgrafiken, deren Darstellung von CSS3 Eigenschaften übernommen werden kann, die Reduzierung der HTTP-Requests dieser Hintergrundgrafiken, der daraus resultierende "saubere" HTML-Code, als auch das Definieren des Verhaltens von Webseitenelementen (Transform, Transition, ...) sind Argumente, deren Vorteile einfach nicht vom Tisch zu weisen sind.

 (weiter)

CSS3 Formular Tutorial - Webdesign ohne Grafiken dank CSS Transform

CSS3 Formular Tutorial - Webdesign ohne Grafiken dank CSS TransformCSS Transform - Mit dem hier anfangs der Woche vorgestellten CSS Formular Tutorial Formular Design mit CSS3 sollte neben der Präsentation von CSS3 Eigenschaften, insbesondere die Reduzierung von Grafiken die für die Umsetzung von Webseiten-Elementen wie Formularen verwendet werden, im Vordergrund stehen. Diejenigen Browser die die im weiteren Verlauf des Artikels verwendeten CSS3 Eigenschaften nicht unterstützen, bekommen ein Formular welches nicht weniger brauchbar ist. Dank des Tipps eines Lesers, wird euch heute ein Zusatz zu diesem Tutorial vorgestellt, welcher mittels CSS Transform die noch einzig im Tutorial verbliebene Grafik, den gebogenen Schatten unterhalb des Formulars, verzichtbar werden lässt.

 (weiter)

Formular Design mit CSS3 - Visuelle Gestaltung und der Verzicht auf Grafiken

Formular Design mit CSS3 - Gestaltung und der Verzicht auf GrafikenFormular Design mit CSS3 - Durch die Möglichkeiten die einige der Browser-Hersteller mit der Unterstützung von Webstandards wie CSS3 den Anwendern mittlerweile zur Verfügung stellen, sind insbesondere grafisch aufwendige(re) Formulare ohne große Aufwände mittels CSS realisierbar. Vorteil dieser Herangehensweise ist neben der größeren Vielfalt bei der Gestaltung, aber auch die Minimierung von HTTP-Requests durch den reduzierten Einsatz von Grafiken, auf die aufgrund vorhandener CSS3-Eigenschaften verzichtet werden kann. Ausgangspunkt dieses Kommentar-Formulars, welches sich auch im Internet Explorer durchaus sehen lassen kann, ist folgende grafische Vorlage aus Photoshop.

 (weiter)

CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringern

CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringernCSS Sprite bedeutet in der englischen Sprache Kobold oder Geistwesen und ist der Begriff für eine Grafik, die aus mehreren einzelnen Grafiken zu einer einzigen Grafik zusammengefügt wird. Diese Technik ist nicht neu, denn sie wurde bereits früher beim Erstellen von Computerspielen verwenden, da Grafikspeicher damals noch klein waren und das Nachladen lange dauerte. Auch im Webdesign sind CSS Sprites keine "brandneue" Technik, sondern wurde bereits im Jahr 2004 von Dave Shea bei A List Apart vorgestellt. Allerdings erst in den letzten Jahren fand man mehr und mehr Websites, die diese Technik nicht zuletzt auch aufgrund der daraus resultierenden verbesserten Web Performance (Ladezeit) anwenden. Denn der größte Vorteil von CSS Sprites liegt in der Einsparung von HTTP-Requests, der Reduzierung der Gesamtgröße der Bilder und somit in der Verkürzung der Ladezeit von Webseiten.

 (weiter)

Sliding Image Gallery - CSS3 Transition Tutorial

Sliding Image Gallery - CSS3 Transition TutorialSliding Image Gallery - Auf Basis von CSS3 sind auch ohne JavaScript fliessend animierte Übergänge bei Webseiten-Elementen wie Bilder-Galerien möglich. Die hier im Blog bereits vorgestellte CSS3-Eigenschaft Transition ermöglicht ein solches Verhalten. Das folgende Step-by-Step Tutorial soll diesen "Slide-Effekt" anhand einer Bilder-Galerie näher beschreiben. Dieses Tutorial soll aufzeigen was man heute schon mit CSS3-Transition in wenigen Schritten auch ohne JavaScript erreichen kann. Korrekt interpretiert wird dieses Tutorial im übrigen vom aktuellen Safari, Google, Chrome, aber auch von Opera seit Version 10.5. Firefox wird dieses Feature ab Version 3.7 ( siehe Downloadlink unten ) unterstützen, womit dann ca.90% aller Besucher dieses Blogs dieses CSS3 Tutorial in den Genuss von CSS3 Transition kommen dürften.

 (weiter)

CSS Code organisieren und Ladegeschwindigkeit optimieren

CSS Code organisieren und Ladegeschwindigkeit optimierenCSS Code organisieren - Wer Webseiten wie Blogs oder auch Online-Shops erstellt, egal ob im Frontend- oder Backend-Bereich wird unabhängig von den vorherrschenden Standards und Vorgaben durch die Aufgabenstellung seinen Stil haben, Code zu schreiben und zu bearbeiten. Ein ausschlaggebender Grund hierfür ist die Übersicht des Codes und selbst die empfindet nicht jeder Entwickler gleichermaßen. Neben der eigentlichen Strukturierung von CSS-Code steht hierbei oftmals die Frage der Darstellung der einzelnen CSS-Regeln im Vordergrund der Diskussion. Genauer gesagt, die beiden Varianten die hierbei Anwendung finden können - Einzeilig- & Mehrzeiligkeit.

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2Windows 7 Fenster mit CSS3 und jQuery - Schön euch auch beim zweiten Teil des Windows 7 Fenster Tutorials willkommen zu heißen! Die heutige Fortsetzung knüpft nahtlos an den ersten aus HTML- und CSS-Angaben bestehenden gestrigen Teil an. Nach dem das Interfacedesign eines Windows 7 Fensters im Firefox "Look & Feel" im gestrigen ersten Teil nachempfunden wurde, wird im heutigen zweiten Teil JavaScript bzw. das Plugin jQuery (UI) die Hauptrolle in diesem Tutorial-2-Teiler spielen. Hierbei wird insbesondere auf eine mögliche Änderung der Fenstergröße ( resizable ) und -position ( draggable ) durch den Anwender eingegangen.

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1Windows 7 Fenster mit CSS3 & jQuery - Du findest das Interfacedesign von Windows 7 ansehnlich und interessierst dich für CSS3? Dann bist du hier genau richtig. Denn im weiteren Verlauf wird in diesem Tutorial-2-Teilers ein Fenster aus Windows 7 mit Hilfe von CSS3 und jQuery UI erstellt. Im ersten Teil dieses Tutorials geht es hierbei um das Stylen des Fensters, entsprechend den "Interfacedesign-Vorgaben" von Windows 7. Im zweiten Teil dieses Tutorials geht es um das Dragging & Resizing des erstellten Fensters unter Zuhilfenahme von jQuery UI.

 (weiter)

CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop

CSS Box-Reflect - Spiegelung ohne JavaScript und PhotoshopCSS Box-Reflect - Um Reflexionen von grafischen, aber auch von Text-Elementen wie bspw. Überschriften realisieren zu können, wurde hierzu bisher in der Vergangenheit fast ausschließlich auf Grafikprogramme wie Photoshop zurückgegriffen, mit den dann die entsprechenden Bereiche gespiegelt wurden. Dank CSS und der Unterstützung der vom Safari- und Chrome-Browser genutzten Browser-Engine Webkit, gibt es auch hier die ein oder andere Möglichkeit gänzlich ohne Grafikprogramme oder auch JavaScript-Erweiterung für solche Anforderungen auskommen zu können. Denn die CSS Eigenschaft "box-reflect" ermöglicht eine Spiegelung von Elementen die den entsprechenden Wert und die dazugehörigen Eigenschaften erhalten.

 (weiter)

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-StyleCSS-Transitions - Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen wie bspw. einem Menü zu erzeugen, wurde bisher meisten von kleinen Plugins basierend auf einem JavaScript-Framework wie jQuery umgesetzt. Die CSS3-Eigenschaft Transition ermöglicht ein solches "Bewegungsmuster", ebenso wie die hier kürzlich vorgestellte CSS3-Eigenschaft Animation, nur ohne JavaScript. Das heißt, das bspw. "Slide-Effekte" ausschließlich via CSS umgesetzt werden können. Im folgenden kleinen Tutorial wird daher beschrieben wie unter der Verwendung von Border-Radius, Gradient ( Farbverlauf via CSS ) und Transtion, dieser Slide-Effekt in wenigen Schritten ohne JavaScript und ohne Grafiken, ausschließlich mit CSS(3) realisiert werden kann.

 (weiter)

CSS3 Animation Tutorial - Sliding Navigation without JavaScript

CSS3 Animation Tutorial - Sliding Navigation without JavaScriptAufbauend auf dem "CSS3-Tutorial" bezüglich eines Navigations-Konzeptes bei dem die einzelnen Navigationspunkte mittels der CSS-Eigenschaft Border-Radius rund dargestellt werden, ist das Ziel dieses kleinen Tutorials, der Navigation Bewegung in Form eines Slide-Effektes einzuhauchen. Der Unterschied zu anderen hier bereits vorgestellten Variantionen an Navigationen, basiert dieses nicht auf JavaScript, sondern erhält seine Bewegung aus der CSS3-Eigenschaft Animation. Hiermit lassen sich für die entsprechenden Elemente flüssig animierte Bewegungen erzeugen. Weiterhin werden neben der Art der Bewegung, auch die Anzahl der Wiederholungen, die Dauer der Animation und vieles andere mehr festgelegt.

 (weiter)

CSS3 Tutorial - Website-Navigation - Border-Radius

CSS3 Tutorial - Website-Navigation - Border-RadiusCSS3-Tutorial - Inspiriert von dem hier im Webstandard-Blog kürzlich vorgestellten CSS-Tutorial "The hidden power of border-radius" und der vielerorts ausgetragenen Diskussionen zum Thema Progressive Enhancement im Bereich Webdesign bezüglich vorhandener Webstandards, ist das folgende kleine aber hoffentlich für den ein oder anderen Leser inspirierende CSS3-Tutorial mit Hauptaugenmerk auf der CSS3 Eigenschaft Border-Radius und den damit durchaus vorhandenen Gestaltungsmöglichkeiten entstanden. Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS. Aber seht selbst!

 (weiter)

52Framework - HTML5 and CSS3 Framework

52Framework - HTML5 and CSS3 FrameworkHTML5 und CSS3 - Nicht wenige Anwender können es aufgrund der interessanten Features kaum abwarten, neueste Standards wie bspw. HTML5 oder CSS3 endlich testen und dann auch in Projekten einsetzen zu können. Für entgültige Umsetzungen auf Basis dieser Standards ist es aufgrund der ( noch ) fehlenden Unterstützung wie bspw. des Internet Explorers, momentan leider noch ein wenig zu früh. Einen Ausweg aus dieser Misere bietet das 52framework an. 52framework ist ein CSS-Framework welches diese neuen Standards und deren Eigenschaften wie header, nav, section, article, footer, den ::selection Selektoren, Border-Radius, aber auch Text- & Box-Shadow bereits unterstützt und somit für Projekte zugängig macht.

 (weiter)