Generated Content

geschrieben von Pawel

Eine der Highlights der CSS-Spezifikation ist für mich generated content. Damit wird es möglich Text aber auch Bilder hinzuzufügen, die eher Design, der Lesbarkeit u.ä. dienen, aber keinen inhaltlichen Charakter haben und daher auch nicht ins Markup gehören. Alle modernen Browser beherrschen diesen Standard, der Internet Explorer seit der Version 8.

Natürlich lassen sich darüber auch die beliebten Liststyle-Symbole einfügen, kleine Grafiken, häufig auch via Sprites. Wenig bekannt und genutzt sind Unicode-Charakter. So fügt

a.email:before{position:absolute; top:0; left:-25px; content:"\002709 \0000A0"}

einen ✉ (envelope) vor die E-Mail-Adresse ein. Das Unicodezeichen 2709 (Suchtipp: U+2709) ist der Umschlag, das Zeichen danach ein Leerzeichen.

Es gibt Wikipediaseiten, die einen guten Einstieg ermöglichen. Ein bisschen Vorsicht ist bei der Entwicklung für mobile Seiten geboten. Einige Androidfonts unterstützen den Briefumschlag nicht.

Die Unicode-Symbole haben gegenüber den Bildern nicht nur den Vorteil, dass kein Request nötig ist, sondern das sie auch bei der Skalierung der Seiten ihre Wirkung nicht verlieren.

Viel Spass, bei eigenen Experimenten. Wie wäre es z.B. mit U+2263 in Verbindung mit einer border?

Eine gewisse Dynamik beim eingefügten Content ermöglicht die Nutzung von Attributen.

h1:after{content: ""attr(title)"";}

In diesem Fall wird davon ausgegangen, dass das h1-Element einen title hat. In HTML5 könnte man auch data-text als Attribute verwenden. Was damit möglich ist, zeigt folgendes Beispiel einer

Textreflexion nur mit CSS

Kategorie: CSS | Trackbacks (0) | Permalink

@media in SVG

geschrieben von Pawel

Immer mehr Seiten nutzen SVG zur Darstellung von Diagrammen. Das hat einen großen Vorteil, lassen sich doch SVG's direkt aus Datenbanken erzeugen. Das ist zwar nach meiner Meinung bisher nur ein Bruchteil, was damit machbar ist, aber ein typisches Problem wird jetzt schon deutlich: Die Ausgabe der Grafik an verschiedene Ausgabegeräte.

Hier zeigt sich ein weiterer Vorteil des Formates - @media-Regeln werden interpretiert.

Ebenso, wie bei HTML ist es dazu nötig, innerhalb des CSS z.B @media print zu formulieren. Verwirrend ist es vielleicht, das CSS in SVG nicht ganz so mächtig ist. Viele Stile lassen sich auch als Atrribute formulieren, was typischerweise die älteren Programme zur Erstellung von SVG-Grafiken nutzen. Ein fill="red" ähnelt style="fill:red". Stile überschreiben die Attribute, wie

dieses Beispiel

illustriert. Filter, Farben usw. lassen sich bequem über Styles zuweisen und damit zwischen Druckansicht und Bildschirmansicht differenzieren.

Diese Geschenkebox

zeigt, wie so etwas aussehen könnte. In Verbindung mit media-queries sind hier auch unterschiedliche Größen der Grafik in Abhängigkeit vom Endgerät vorstellbar.

Kategorie: CSS , SVG | Trackbacks (0) | Permalink

Weniger Bilder durch CSS Icons

geschrieben von Pawel

Vor langer Zeit gab es eine Arbeitsgruppe, die sich mit der Zukunft beschäftigte, die XHTML2 heißen sollte. In den Entwürfen war auch mal die Abschaffung des img-Tags angedacht. Zunächst mutet es skurril an, sich eine Website ohne Bilder auszudenken. Stellt man jedoch den Inhalt in den Vordergrund, dann ist es nicht mehr so absurd. Der Entwurf sah ja ohnehin vor, Medieninhalte über das object-Tag einzubinden, wozu dann auch ausgewählte Bilder gehören können. Schmuckbilder im Markup sollten der Vergangenheit angehören.

Die Zeiten haben sich geändert und jeder Gestalter nutzt Schmuckbilder nur innerhalb der CSS. Damit diese nicht zuviel Ladezeit kosten, werden sie fachgerecht in eine einzige Bilddatei zusammengesetzt und an verschiedenen Stellen mit verschieden Teilen eingeblendet. Diese sogenannten Sprites erleichtern die optische Hervorhebung von Zitaten, Aufzählungen, Loginfeldern usw. . Damit schienen alle Möglichkeiten des modernen Webdesigns ausgereizt, bis Nicolas Gallagher mit seinen CSS-GUI-Icons nachwies, dass moderne Seiten anscheinend doch ohne Bilder auskommen können, ohne nach digitaler Steinzeit anzumuten.

Nicolas Idee beruht darauf, dass er bis zu 4 Pseudoelemente erzeugt, die er innerhalb der Liste absolut positioniert. Hauptsächlich werden die Ränder der neuen Elemente gebogen und gedreht, um typische Icons damit zu erzeugen. Es geht nicht in alten Internet Explorern, funktioniert aber problemlos in der kommenden Version 9, die mittels -ms auch CSS-Transformationen beherrscht.

Bei der Konzeption einer heutigen Website muss noch berücksichtigt werden, dass mit Opera einer der wichtigsten Mobilbrowser border-radius noch nicht interpretiert. Wohl deshalb kennzeichnet der Erfinder seinem Vorschlag noch als experimentell.

Wer in der beeindruckenden Vielfalt noch etwas vermisst, findet genügend Anregungen für eigene Experimente:

/* PAGE CURL */
/* a rectangle, border-radius should hide the topright corner */
.page a:before {
    left:5px;
    width:8px;
    height:12px;
    border:2px solid #c55500;
    -moz-border-radius-topright:7px
    -webkit-border-top-right-radius:7px;
    border-top-right-radius:7px;
    background:transparent;
}

/* a triangle with position on the top right corner of the rectangle */
.page a:after {
    left:11px;
    border-width:3.5px;
    border-style:solid;
    border-color:transparent transparent #c55500 #c55500 ;
    margin-top:-10px;
    background:transparent;
}

/* lines on the page*/
.page:after {
    left:8px;
    width:5px;
    height:1px;
    margin-top:-2px;
    border-top:2px double;
    border-bottom: 2px double;
    border-color:#c55500;
    background:transparent;
}

.page a:hover:before,
.page a:focus:before,
.page:hover:after,
.page a:active:before {
    border-color:#730800;
    background:transparent;
}

.page a:hover:after,
.page a:focus:after,
.page a:active:after {
    border-color:transparent transparent #730800 #730800;
}

Mein Icon stellt ein stilisiertes Blatt mit umgeknickter Ecke dar. Nicolas Idee lässt sich auch auf andere HTML-Elemente übertragen, wie die

Demo einer Loginbox

ohne Bilder zeigt. Seine Idee ist damit ein Meilenstein, der das Weblayout ähnlich voranbringen wird, wie 2003 die "Sliding Doors".

Kategorie: CSS , Ideen , Layout | Kommentare (0) | Trackbacks (0) | Permalink