WordPress & Webwork » HTML & CSS

Gastartikel: Modernes Webdesign mit CSS – Kreative, effektive und praktikable Workshops

Vladimir — Thu, 09 Feb 2012 11:15:58 +0000

Dieser Gastartikel stammt von Heiko Stiegert.

Wenn Sie standardkonforme Webseiten mit CSS attraktiv und modern umsetzen wollen, ist dies keine wirklich einfach Aufgabe. Denn Attraktivität ist nicht unbedingt auch gleichzusetzen mit Erfolg und das ist das bevorzugte Ziel eines jeden Webseitenbesitzers, ob Blogger oder Onlineshop-Betreiber. Wissen zu vermitteln, um diese Ziele erreichen zu können, gibt es viele. Eine Möglichkeit der Vermittlung von Wissen und Inspiration sind Bücher.

Mit dem folgenden Artikel möchte ich als Gastautor den Lesern dieses Blogs mein im Sommer letzten Jahres erschienenes Buch Modernes Webdesign mit CSS vorstellen. Der Untertitel "Schritt für Schritt zur perfekten Website" lässt dabei eventuell schon erahnen, dass sich den Ergebnisses der einzelnen über 20 Workshops sukzessiv genähert wird.

Die Workshop Beispiele dieses Webdesign Buches sollen dem Leser, anhand des Quellcodes und den Abbildungen in den einzelnen Kapiteln, einen etwas anderen Blick auf die Umsetzung von modernen Webseiten und ihren Elementen gewähren. Die zahlreichen Profi-Tipps und -Tricks sollten keine Ihrer Fragen offen lassen!

Einblend-Effekte auf Basis von CSS3 Animations

Die Möglichkeit bei der Umsetzung eines Webdesigns für ein Webprojekt nicht nur kreativ, sondern zusätzlich auch strukturell denken und sich in die CSS Workshop versetzen zu können, ist bei den Anwendungsbeispielen die ideale Voraussetzung, um die Vorteile von CSS (und insbesondere die von CSS3) zu erkennen und in Zukunft auch nutzen zu können.

Da beim Besuch einer Webseite oftmals nur Bruchteile von Sekunden über den Verbleib oder das Verlassen des Webseitenbesuchers und damit verbunden auch über dessen Erfolg entscheiden, ist es mittlerweile fast unverzichtbar das beim Designentwurf, sowie bei der umgesetzten Webanwendung eine klare visuelle und hierarchische Struktur und Gliederung deutlich zu erkennen ist.

Entw. von Design für verschiedene Endgeräte auf Basis von CSS3 MediaQueries

Insbesondere aufgrund der Entwicklung von responsiven Webesigns, müssen bei der Umsetzung dieser mehr Vorarbeiten bei der Entwicklung des Quellcodes geleistet werden, damit die Umsetzung des Design auch auf mobilen Endgeräten wie Tablets oder Smartphones optimal erfolgt. Da zahlreiche Workshops des Buches "Modernes Webdesign mit CSS" diesen Ansatz verfolgen, kommen Denkanstöße zu diesen Vorarbeiten in diesem Buch garantiert auch nicht zu kurz.

Zielgruppen des Buches Modernes Webdesign mit CSS

Einsteiger, die sich in Bezug auf den Einsatz von CSS und den damit verbundenen Möglichkeiten sich inspirieren lassen möchten
Fortgeschrittene, die bereits erste Erfahrungen im Umgang mit Webdesign haben, aber Neues über den Umgang und die kreative Gestaltung auf Basis von CSS3 erfahren möchten
erfahrene, professionelle Webdesigner und Screendesigner, die an kreativen Lösungsansätzen im Umgang mit CSS3 interessiert sind

Neue Möglichkeiten mit CSS3

Die Workshops dieses Webdesign Buches sollen die Vorteile des Einsatzes von CSS3-Eigenschaften nicht nur in Bezug auf eine bessere Performance verdeutlichen. Denn derjenige, der die Vorteile von Webstandards und insbesondere die neuesten Entwicklungen in Bezug auf CSS3 kennt (bspw. MediaQueries, Transition-, Transform- und Animations-Module,..), ihre Integration beherrscht und sie bereits bei der Konzeption und dem Webdesign berücksichtigt, kann auf seine Art und Weise dazu beitragen, das Web zukunftsfähiger und effektiver zu gestalten.

Akkordeon-Effekte auf Basis von CSS3 Transitions und ohne JavaScript

Denjenigen, die daran interessiert sind, liefert dieses Webdesign Buch Ansatzpunkte und zeigt mögliche Vorgehensweisen auf.

Aufbau und Darstellung – Einblicke ins Buch

Nach einer Einführung in CSS-Grundlagen die im Laufe des Buches immer wieder abverlangt werden, widmet sich das Buch auch den Themen der Accessibility, Usability, aber auch der Onpage-Optimierung der Elemente für Suchmaschinen, der Layoutgestaltung und natürlich auch immer wichtiger werdenden Performance von Webprojekten. Im zweiten Teilabschnitt des Buches Themen wird dann die Strukturierung und Gestaltung von Seitenelementen wie Navigationen, Datentabellen, Bildergalerien oder auch Formularen in über 20 Workshops vorgestellt.

Onlineformulare benutzerfreundlich und kundenorientiert gestalten

In bisherigen Rezensionen zum Buch, schreiben die Leser das diese mit CSS3 nur so gespickten Webdesign-Workshops den Drang transportieren, das Gelesene direkt umsetzen zu wollen. Das Ziel des Buches "Modernes Webdesign mit CSS" den Lesern somit das Zusammenwirken von HTML und CSS auf Basis kreativer, effektiver und vor allem praktikabler Workshops (siehe Abbildungen ) näher zu bringen, dürfte somit aufgehen.

Allgemeine Informationen zum Buch

Modernes Webdesign mit CSS – Schritt für Schritt zur perfekten Website
Seiten: 444
Verlag: Galileo Design
Buch: gebunden, komplett in Farbe, inkl. DVD
Preis: 39,90 Euro
ISBN:978-3-8362-1666-1

Heiko Stiegert ist seit Ende der 90er Webdesigner und -entwickler, Buchautor des unter anderem hier vorgestellten Buches Modernes Webdesign mit CSS (*), als auch Betreiber des Webstandard-Blogs und beschäftigt sich dort seit Jahren rund um Themen wie Webdesign, Webentwicklung, Usability, SEO, Trends, Inspirationen u.v.a.m.

* = Partnerlink des Gastautors

Der CSS3-Test für Browser

Vladimir — Thu, 02 Feb 2012 15:40:26 +0000

Auf css3test.com kann man seinen Browser auf die Unterstützung von CSS3 testen. Es werden 735 Testreihen durchgeführt und an Hand der erfolgreich absolvierten, wird eine Prozentzahl errechnet. Hier ein paar Browser im Durchlauf auf Windows Vista SP2.

Zuerst der Internet Explorer 9:

Dann kommt der Kandidat aus Norwegen Opera 11.61:

Anschließend Mozilla Firefox 10:

Und zum Schluss der aktuelle Google Chrome in Version 16.x:

Auf der Seite werden die Ergebnisse aufgeschlüsselt wie hoch die Unterstützung für einzelne Bereiche (Hintergründe, Selektoren, Media Queries etc.) ist.

Gefunden auf Google+.

Und wie schauen die Ergebnisse bei euch so aus?

HTML5, bitte und HTML KickStart

Vladimir — Tue, 24 Jan 2012 16:17:11 +0000

Zwei HTML-Links zum Ende des Arbeitstages. Den ersten Link entdeckte ich gestern beim Kollegen Jens Grochtdreis. Die Seite heißt HTML5 Please und bietet einen Überblick über moderne Webtechniken und eine Abschätzung zum praktischen Einsatz.

Den zweiten Link HTML KickStart entdeckte ich auf Google+ bei Sergej. Bei HTML Kickstart handelt es sich um ein fertig geschnürtes Paket an HTML-, CSS- und Javascript-Dateien um einen schnelleren Start beim nächsten Webprojekt zu ermöglichen.

CSS Usage: welche CSS-Regeln sind im Einsatz?

Vladimir — Fri, 20 Jan 2012 13:08:44 +0000

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden.

Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man AutoScan dann kann man mehrere Unterseiten der gleichen Website aufrufen und die Erweiterung berücksichtigt dies.

CSS Usage listet alle eingebundenen CSS-Dateien komplett auf. Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden sind dunkelgrün und rot sind die Regeln, die gar nicht zum Einsatz kommen.

CSS3 Click Chart: Code, Zusatzinfos, Beispiele

Vladimir — Thu, 19 Jan 2012 17:13:08 +0000

Auf CSS3 Click Chart kann man sich durch 30 CSS3-Eigenschaften durchklicken. Dabei wird jeweils erklärt was die Eigenschaft bewirkt, es wird ein Beispiel-Code ausgegeben, eine Live-Vorschau angezeigt und es wird zum passenden Abschnitt auf W3C verlinkt.

Darüber hinaus wird zu passenden Tutorials und Zusatztools/Polyfills verwiesen. Bei Polyfills handelt es sich um Tools bzw. Erweiterungen, die bestimmte Techniken auf Browser nachrüsten. CSS3 PIE ist so ein Tool und es rüstet für den Internet Explorer 6-9 die Unterstützung für eine Reihe von CSS3-Eigenschaften nach.

Gefunden bei Jens

Großes HTML5-Referenz-Poster

Vladimir — Mon, 16 Jan 2012 12:09:19 +0000

Auf XHTML-Lab gibt es eine HTML5-Referenz als Poster im PDF, welches man kostenlos herunterladen kann. Das Poster ist umgerechnet 59,4 cm breit und 84,1 cm hoch.

In Adobe Reader gibt es beim Drucken eine sog. Poster-Funktion und das HTML5-Poster würde sich über neun DIN-A4-Seite erstrecken.

Via Designer in Action

Linkchecker, Button mit CSS3, neue Cursors in CSS3

Vladimir — Sat, 14 Jan 2012 13:08:53 +0000

Auf drlinkcheck.com kann man bis 1.000 Links einer Seite prüfen. Nach der Prüfung kann man die Links nach mehreren Kriterien auflisten lassen: intern, extern und nicht mehr erreichbar. Dabei zeigt das Online-Tool auch direkt auf welcher Unterseite sich der Link befindet so das man sehr schnell zu den ungültigen Links gelangen kann.

Momentan befindet sich das Tool in Beta-Phase. Ob es später kostenpflichtig wird, ist auf der Website nicht ersichtlich.

Einfacher Button mit CSS3

Auf UsabilityPost gibt es ein nettes Tutorial wie man mit Hiilfe von CSS3 ein einfaches, aber dennoch einen sehr ansehnlichen Button stylen kann. Dabei wird unter anderem auf abgerundete Ecken, Box-Schatten und Transitionen gesetzt.

Auf Webkrauts.de gibt es eine nette Transitionen-Anleitung.

Neue Cursor-Styles in CSS3

Bereits in CSS2 gab es einige Sylemöglichkeiten für den Cursor. In CSS3 sind noch ein paar hinzugekommen, wie zum Beispiel das Cursor-Zeichen für nicht erlaubt – einfach den Mauscursor über das hervorgehobene "nicht erlaubt" halten.

Auf SitePoint werden diese und noch weitere Cursor-Styles aufgelistet.

CSS: browserspezifische Eigenschaften, Pseudo-Elemente und Pseudo-Klassen von Mozilla

Vladimir — Mon, 02 Jan 2012 12:30:30 +0000

Mozilla bietet für die Produkte die auf die Gecko-Engine setzen – wie zum Beispiel Firefox, SeaMonkey, Thunderbird – eine Fülle von browserspezifischen CSS-Eigenschaften, Pseudo-Elementen und Pseudo-Klassen. Eine ausführliche Liste findet man unter Mozilla CSS Extensions.

Eine recht interessante Pseudo-Klasse ist ::-moz-list-bullet. Damit kann man das Aussehen, des Auflistungszeichens per CSS steuern. Hier ein Beispiel:

li::-moz-list-bullet {
    color: #900;
    font-size: 9px;
}

Diese Regel angewendet ergibt folgendes:

Links im Bild ist das normale Aussehen der Liste aus dem Artikel DokuWiki installieren und rechts im Bild ist die Liste nach dem man die CSS-Regel eingebaut hat. Nach dem gleichen Prinzip kann man auch das Aussehen der nummerierten Liste mit Hilfe der Pseudo-Klasse ::-moz-list-number beeinflussen.

Einen Überblick, allerdings nur bei den Eigenschaften, über die browserspezifischen Angaben liefert Vendor-prefixed CSS Property Overview. Neben Gecko (Mozilla) werden dort WebKit (Chrome, Safari), Presto (Opera) und Trident (IE) berücksichtigt.

Sublime Text 2: sehr interessanter Code-Editor

Vladimir — Sat, 31 Dec 2011 13:33:26 +0000

Ich benutze schon seit mehreren Jahren WeBuilder als meinen Code- bzw. HTML-Editor und bin damit zufrieden. Dennoch schaue ich ab und an was es sonst noch so an Text- und Code-Editoren auf den Markt gibt.

So habe ich gestern den Code-Editor Sublime Text entdeckt und es vorhin installiert und zwar die Beta der 2er Version.

Der Code-Editor hat ein paar sehr interessante Funktionen, die auf jeden Fall es Wert sind, dass man sich das Programm mal näher anschaut und testet.

Es bietet Syntaxhervorgebung für viele relevante Sprachen, kommt mit sehr vielen Code-Schnippseln daher, die man auch erweitern kann, es bietet Projektverwaltung, Suchen und Ersetzen kann man auch datei-übergreifend und mit Hilfe von regulären Ausdrücken, Macro-Recorder ist eingebaut, man kann Wörterbücher einbauen um die Rechtschreibung zu prüfen und man kann den Code "falten" und darin Lesezeichen setzen.

Also nichts was andere kommerzielle Code-Editoren nicht auch hätten. Aber da ich weiß, dass auch Kleinigkeiten entscheidend sind ob man sich für ein Code-Editor entscheidet und dabei auch eine große Portion Bauchgefühl mitspielt, habe ich mich entschieden dieses Programm vorzustellen.

Zwei Sachen hat es dennoch, die ich in anderen Text- und Code-Editoren so nicht gesehen habe. Zum einen ist dies eine "Vogelperspektive" (Minimap) des Codes eine Datei … im Grund sieht man eine Miniatur, die einem hilft schnell zu bestimmten Abschnitten zu springen:

Am rechten Rand der Abbildung sieht man die Minimap der gesamten Datei.

Das Programm gibt es für (32- oder 64-Bit), Mac OS X (10.6 oder 10.7) und für Windows (32- oder 64-Bit). Für Windows gibt es auch eine portable Version. Das Programm kostet 59 US-Dollar, wobei die Test-Version ohne Funktionseinschränkungen nutzbar ist. Somit kann man es ausgiebig und in Ruhe testen, bevor man sich entscheidet zu kaufen.

Multimediatreff 29 in Köln: HTML5, CSS3 und Co

Vladimir — Sun, 25 Dec 2011 11:54:53 +0000

Der 29. Multimediatreff in Köln findet am 24. März 2012 statt und das Thema ist Webtechnologien – HTML5, CSS3 & Co.

Die Liste der Vorträge ist interessant und ich finde es gut, dass die Veranstalter größere Pausen zwischen den Vortragsblöcken eingebaut haben, damit man auch Zeit hat sich mit Kollegen zu unterhalten, die man sonst nicht so oft zu Gesicht bekommt.

Patternify: ganz einfach Hintergrundgrafiken erstellen

Vladimir — Thu, 22 Dec 2011 20:12:41 +0000

Auf Patternify.com kann man ganz einfach und komfortabel Hintergrundgrafiken bzw. Muster (engl. Pattern) erstellen:

Links oben kann man das Muster erstellen oder darunter auf einen Satz vorgefertigter Muster zurückgreifen und die anpassen. Rechts bekommt man das Ergebns in Form einer PNG-Grafik oder als Base64-Code welches man direkt in die CSS-Datei einbinden kann.

Unten rechts kann man mit Klick auf Get Pattern URL kann man den Permalink generieren um später wieder zum gleichen Muster zurückkehren zu können

Präsentationen in HTML5

Vladimir — Mon, 12 Dec 2011 17:09:15 +0000

Wer eine einfache und leicht verständliche Möglichkeit sucht Folien für seinen Vortrag zu erstellen, der sollte sich html5slides mal genauer anschauen.

Man arbeitet in einer einzelnen HTML-Datei und die einzelnen Folien bzw. deren Inhalte befinden sich innerhalb der jeweiligen article-Elemente. Man kann auf eine Reihe von Klassenwerte zurückgreifen: class="smaller" macht die Schrift kleiner und wenn man dem Elternelement class="build" vergibt dann werden die Kinderelemente nacheinander (per Klick) eingeblendet.

Im übrigen ist das Prinzip, dass man seinen Vortrag in HTML erstellt nichts neues, ich habe schon vor einigen Jahren etwas darüber geschrieben.

CSS-Links: Generator, Buttons, 100% vs. auto

Vladimir — Sun, 11 Dec 2011 13:11:27 +0000

CSS-Generatoren gibt es sehr viele, aber der Generator auf css3gen.com fällt unter anderem deswegen positiv auf, weil er zum einen ein paar grundlegende Infos bietet. Somit ist das ganze auch für Anfänger verständlich und zum anderen sagt er welche Browser-Versionen die Vendor-Präfixe nicht mehr brauchen:

Den nächsten Link dürfte der eine oder andere schon kennen:

Bei Button Maker kann man Buttons erstellen, die nur HTML und CSS3 benötigen. Die Erstellung mit dem Generator ist kinderleicht.

In einem Artikel erklärt Roger Johansson den Unterschied bzw. die Auswirkungen von width: auto; und width: 100%;

Damit das ganze nicht trocken bleibt, gibt es auch einen Link zu einem Beispiel.

CSS: automatische Nummerierung von Überschriften

Vladimir — Wed, 07 Dec 2011 13:47:14 +0000

Die CSS-Eigenschaften content, counter-reset und counter-increment sind alte Bekannte, da sie ja zum Umfang von CSS 2.1 gehören … und dieses existiert schon ein paar Jährchen. Auch dieser kurzer Artikel ist nicht der erste seiner Art. Es ist lediglich eine kleine Erweiterung meiner Anleitung, wo es darum geht mit Hilfe eines HTML-Editors Dokumente für den Kindle zu erstellen.

Da man in so einem Fall mit langen HTML-Dokumenten arbeitet, die durch viele Überschriften strukturiert sind, würde es sich anbieten auch die Überschriften durch einen Automatismus zu nummerieren. Sicherlich, das geht auch manuell, aber das ist bei längeren Dokumenten zu einem fehleranfällig und zum anderen nicht sonderlich komfortabel wenn z. B. bei 50 Überschriften eine mittendrin mal wegfallen sollte.

Man stelle sich folgenden Aufbau vor:

Buchtitel
Kapitel
Abschnitt
Abschnitt
Kapitel

Das passende CSS dazu würde folgendermaßen aussehen:

body {counter-reset: ebene1;}

h1:before {
    content: counter(ebene1) " ";
    counter-increment: ebene1;}
h1 {counter-reset: ebene2;}

h2:before {
    content: counter(ebene1) "." counter(ebene2) " ";
    counter-increment: ebene2;}
h2 {counter-reset: ebene3;}

h3:before {
    content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
    counter-increment: ebene3;}

Als Ergebnis bekommt man dann folgendes:

Siehe auch die Demo-Datei.

Erklärung des Codes

Zuerst wird im body der Counter (ebene1) auf 1 gesetzt. Anschließend wird mit dem Pseudoelement :before jeder Überschrift erster Ordnung eine Nummer verpasst, die um eins steigt (counter-increment). Anschließend wird beim jeden Vorkommen von h1 der Counter für die zweite Ebene zurückgesetzt, damit wir das gewünschte 1, 1.1, 1.2, 2, 2.1, 2.2 erreichen und nicht 1, 1.1, 1.1, 2, 2.1, 2.1 bekommen.

Um bei den Zählern Punkte, Leerzeichen und andere Zeichenketten einzufügen muss man Sie in "Anführungszeichen" verpacken: "." für ein Punkt und " " für ein Leerzeichen.

Wem die Dezimalzahlen nicht reichen, der kann auch auf andere Zählweisen ausweichen:

content: counter(ebene1, upper-roman) " ";

Mit upper-roman wird in großen römischen Zahlen gezählt. Unterstützt werden die Zählweisen, die man auch von den Listen her kennt.

Unterstützt wird die automatische Nummerierung von allen modernen Browsern und diesmal ist sogar auch der Internet Explorer 8 mit von der Partie.

Weiterführende Links

CSS3 im praktischen Einsatz

Vladimir — Mon, 28 Nov 2011 15:08:04 +0000

CSS3 im praktischen Einsatz ist ein sehr guter Vortrag von Sven Wolfermann. Die Folien sind nicht nur schön gemacht sondern auch sehr informativ. Was bei sehr vielen Voträgen leider nicht der Fall ist.

Behandelt werden u.a. abgerundete Ecken, Schatten für Boxen und Text, Content-Generierung und Hintergrund-Verlauf.

CSS: jede Unterseite auf 100% Höhe

Vladimir — Wed, 23 Nov 2011 14:52:35 +0000

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website "wackelt".

Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste erzwingt. Hier eine Methode um dies zu realisieren:

html, body {
    height: 100%; /* Streckt den angezeigten Bereich auf 100% */
}
#container {
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height: auto !important; /* Für moderne Browser */
    height: 100%; /* "Mindesthöhe" für IE <7 */
}

Gefunden auf CSS Div height: 100%.

Zuerst streckt man sowohl body als auch html, den Hauptknoten im Dokumentbaum, auf 100%. Anschließend vergibt man ein Mindesthöhe von 100% und weist der Höhe an sich einen automatischen Wert zu. Da aber der Internet Explorer 6 und kleiner nichts mit der Eigenschaft min-height anfangen können wird denen height: 100%; ... da die ja die Angaben zu Höhe als "Mindesthöhe" interpretieren.

Das obere Code-Beispiel war noch um die CSS-Deklaration overflow: hidden !important; reicher. Diese Deklaration bewirkte bei Firefox, dass der div-Kontainer, wenn er über den Anzeigenbereich hinausgeht, sich auch bis zum Bildschirmende ausbreitet. Ich konnte bei Firefox 8 keinen Unterschied feststellen mit und ohne diese Deklaration.

Farbverläufe (Gradients) mit CSS3

Vladimir — Sun, 20 Nov 2011 14:19:33 +0000

Mit Hilfe von CSS3 Farbverläufe zu realisieren ist nichts Neues. Hier ein sehr einfaches Beispiel:

.verlauf {
    background: -moz-linear-gradient(top, #900, #079);
    color:      #fff;
    padding:    2.5em 3em;
}

Dieses Beispiel sieht nachher im Mozilla Firefox folgendermaßen aus:

Das ist bei weitem nicht alles was mit CSS3 möglich ist, wie der Artikel CSS gradients for all web browsers und der Eintrag in der Mozilla-Dokumentation es deutlich zeigen. Es ist nicht nur möglich lineare sondern auch radiale Verläufe zu erzeugen.

Das ganze ist nicht nur in Firefox sondern auch in anderen Browser möglich. Mit Hilfe von -webkit-gradient kann man die WebKit-Browser (Safari, Chrome), Opera ab 11.10 mit -o-linear-gradient und sogar den Internet Explorer bedienen.

Wobei man bei dem Internet Explorer einiges beachten muss, je nach dem welche Version eingesetzt wird:

-ms-linear-gradient IE 10
filter: progid:DXImageTransform.Microsoft.gradient(...); IE 5.5-9

Während der Internet Explorer 10 auf CSS3 zurückgreift muss man bei den älteren Versionen noch auf Microsoft-Filter zurückgreifen. Wer keine Lust hat, sich die ganzen "Extrawürste" für die die diversen Browser zu merken, der kann auf den Ultimate CSS Gradient Generator zurückgreifen:

Dieser Generator ist nicht nur komfortabel sondern bietet auch sehr viele Funktionen und vor allem generiert man damit Code, mit dem man Geckos (Firefox, SeaMonkey), WebKits (Safari, Chome), Opera und den Internet Explorer berücksichtigt.

CSS3: Pseudoklasse :nth-child()

Vladimir — Tue, 15 Nov 2011 10:23:07 +0000

CSS3 bringt einige neue und interessante Sachen mit sich, so auch die Pseudoklasse :nth-child(), damit kann man jedes x-te Element eines bestimmten Elternelements ansprechen … nicht verstanden? OK, hier ein Beispiel. Nehmen wir mal an, du möchtest bei Tabellen erreichen, dass jede zweite Tabellenzeile einen anderen Hintergrund bekommt:

tr:nth-child(2n) {background: #eee;}

das würde folgende Auswirkung haben:

Den :nth-child-Visual-Calculator habe ich drüben bei Jens entdeckt. Damit kann man sehr gut die Auswirkungen der verschiedenen Werte von :nth-child() sichtbar machen. Der Wert 2n spricht jedes zweite Element an, wobei die Zählung bei 0 anfängt. Dagegen spricht 2n+1 schon das erste Element an und ab da dann jedes zweite.

Man kann auch hierbei auf Schlüsselwörter zurückgreifen, der Wert even entspricht 2n und odd entspricht 2n+1. Der Wert 3n spricht jedes dritte Element an und setzt man als Wert 4 ein, dann wird nur das vierte Element angesprochen.

Phoenix in Firefox: Codeeditor mit Syntaxhervorhebung

Vladimir — Sun, 13 Nov 2011 15:43:46 +0000

Fragt mich nicht auf welchen Weg ich dahin gekommen bin, aber ich habe gestern im Verzeichnis der Erweiterungen für Mozilla Firefox den Codeeditor Phoenix entdeckt. Nach der Installation ist Phoenix über das Kontextmenü und über das Icon in der Addon-Leiste (früher auch Statusleiste genannt) aufrufbar. Damit kann man sehen wie viele CSS- und Javascript-Dateien in der jeweiligen Seite eingebunden sind und man kann diese Phoenix aufrufen:

Phoenix bietet Syntaxhervorhebung für HTML, CSS und Javascript und stellt einige Tools, wie z. B. Code komprimieren, und Infos bereit. Man hat auch die Möglichkeit die Änderungen abzuspeichern.

HTML5 und Firefox: Kontextmenü erweitern

Vladimir — Thu, 10 Nov 2011 17:59:19 +0000

Die Idee per HTML auch das Kontextmenü einer Website zu beeinflussen, finde ich sehr gut. Deswegen habe ich mit Freude ein Code-Beispiel ausprobiert welches ich auf browsomatic.com gefunden habe. Hier gibt es eine Demo.

Ich habe das Beispiel leicht angepasst und folgendes erstellt:



Hier kommt irgendein Inhalt…

Wenn man dann auf der entsprechenden Seite mit dem Rechtsklick das Kontextmenü aufruft, dann gibt es zwei zusätzliche Einträge, siehe folgende Abbildung:

Klickt man auf einen der beiden zusätzlichen Punkte, wird man auf die entsprechende URL weitergeleitet. Funktioniert in Firefox 8 und afaik in Safari. So weit so gut.

Das Problem ist aber, dass menuitem nicht zum Umfang von HTML5 gehört sondern zu WAI-ARIA. Ich habe versucht das menuitem testweise durch command zu ersetzen, so wie es hier an einem Beispiel gezeigt wird, aber das klappte genau so wenig wie das Ersetzen durch li oder durch button.

Vielleicht werde ich nach dem nochmaligen Lesen des Bugzilla-Eintrages zu dieser Funktion schlauer.

WordPress & Webwork » HTML & CSS

Gastartikel: Modernes Webdesign mit CSS – Kreative, effektive und praktikable Workshops

Zielgruppen des Buches Modernes Webdesign mit CSS

Neue Möglichkeiten mit CSS3

Aufbau und Darstellung – Einblicke ins Buch

Allgemeine Informationen zum Buch

Verwandte Beiträge:

Der CSS3-Test für Browser

Verwandte Beiträge:

HTML5, bitte und HTML KickStart

Verwandte Beiträge:

CSS Usage: welche CSS-Regeln sind im Einsatz?

Verwandte Beiträge:

CSS3 Click Chart: Code, Zusatzinfos, Beispiele

Verwandte Beiträge:

Großes HTML5-Referenz-Poster

Verwandte Beiträge:

Linkchecker, Button mit CSS3, neue Cursors in CSS3

Einfacher Button mit CSS3

Neue Cursor-Styles in CSS3

Verwandte Beiträge:

CSS: browserspezifische Eigenschaften, Pseudo-Elemente und Pseudo-Klassen von Mozilla

Verwandte Beiträge:

Sublime Text 2: sehr interessanter Code-Editor

Verwandte Beiträge:

Multimediatreff 29 in Köln: HTML5, CSS3 und Co

Verwandte Beiträge:

Patternify: ganz einfach Hintergrundgrafiken erstellen

Verwandte Beiträge:

Präsentationen in HTML5

Verwandte Beiträge:

CSS-Links: Generator, Buttons, 100% vs. auto

Verwandte Beiträge:

CSS: automatische Nummerierung von Überschriften

Buchtitel

Kapitel

Abschnitt

Abschnitt

Kapitel

Erklärung des Codes

Weiterführende Links

Verwandte Beiträge:

CSS3 im praktischen Einsatz

Verwandte Beiträge:

CSS: jede Unterseite auf 100% Höhe

Verwandte Beiträge:

Farbverläufe (Gradients) mit CSS3

Verwandte Beiträge:

CSS3: Pseudoklasse :nth-child()

Verwandte Beiträge:

Phoenix in Firefox: Codeeditor mit Syntaxhervorhebung

Verwandte Beiträge:

HTML5 und Firefox: Kontextmenü erweitern

Verwandte Beiträge: