Texteffekte mit CSS3

Seit CSS3 hat man nicht nur die Möglichkeit Multiple-Backgrounds zu benutzen, sondern auch Mehrfach das text-shadow Attribut zu nutzen. Dieses führt zu schönen Text Effekten. Die Parameter bei der Verwendung von text-shadow sind:

text-shadow: <Verschiebung x-Richtung><Verschiebung y-Richtung><Stärke Weichzeichner><Farbe>;

Neon

.neon {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff, 0 0 30px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de,
0 0 150px #ff00de;
}

Giftig

.giftig {
color:#fff;
background:#000;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #06ff00,
0 0 70px #06ff00,
0 0 80px #06ff00,
0 0 100px #06ff00,
0 0 150px #06ff00;
}

Feuer

.feuer {
color: black;
text-shadow: 0px 0px 4px #fff,
0px -5px 4px #FF3,
2px -10px 6px #FD3,
-2px -15px 11px #F80,
2px -25px 18px #F20;
}

3D Brille

.dreiDBrille {
color:rgba(255,0,0,0.5);
background:#fff;
text-shadow: 8px 0px 0 rgba(0,255,0,0.5);
}

3D Text

.dreiDText {
background:#404040;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,0.1),
0 0 5px rgba(0,0,0,0.1),
0 1px 3px rgba(0,0,0,0.3),
0 3px 5px rgba(0,0,0,0.2),
0 5px 10px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.2),
0 20px 20px rgba(0,0,0,0.15);
}

Letter

.letterpress {
background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010,
1px 1px 0px #505050;
}

DEMO

Quellen:

http://wsmithdesign.wordpress.com/2010/11/15/practical-reasons-for-css3-shadows/
http://markdotto.com/playground/3d-text/
http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

Flash in HTML5 konvertieren

Bis gestern habe ich mich immer davor gedrückt in die Flash Welt abzutauchen. Aber gestern habe ich dann zum ersten mal auch Adobe Flash CS5 meiner Adobe Suite geöffnet. Adobe Labs hat nämlich Wallaby Technology Preview veröffentlicht. Damit ist es möglich FLA Dateien in HTML5 Webseiten umzuwandeln. Dabei wird die Animation als Canvas umgewandelt werden die einzelnen Layer als SVG exportiert und mit CSS3 Keyframe Animation und jQuery animiert. Die Animationen sind allerdings nur mit Webkit Browsern wie Chrome oder Safari anzusehen.

Wallaby kann man hier runterladen. Das Programm kommt in gewohnter Adobe Manier als Air Anwendung für Mac und Windows daher. Das Interface ermöglicht es eine FLA Datei zu laden und zu konvertieren. Eventuelle Fehler werden auch angezeigt.

ActionScript wird bisher nicht unterstützt. Die gesamte Feature und Support Liste gibt es hier.

Zu Testzwecken habe ich eine kleine Animation erzeugt und diese auch konvertiert. Leider sind meine Flash Skills sehr bescheiden, aber zu Testzwecken sollte diese kleine Animation reichen.

DEMO DOWNLOAD (FLA, HTML5)

Multiple Backgrounds mit CSS3

Seit CSS3 hat man als Benutzer die Möglichkeit mehrere Hintergründe für eine Box setzen. Vorher war man darauf angewiesen mehrere Boxen ineinander zu verschachteln und jeder dieser Boxen ein neues Background Attribut hinzuzufügen. Mit CSS3 ist das weit aus eleganter.

body {
background: url(images/background_grass.png)  bottom repeat-x,
url(images/background_stone.png)  bottom right no-repeat,
url(images/background_clouds.png) left top repeat-x,
url(images/background_sun.png) right top no-repeat,
url(images/background_sky.png) top repeat-x rgba(255,255,255,1);
}

Diese paar Zeilen CSS reichen aus, um dem body Element fünf verschiedene Hintergrundbilder zuzuordnen. Das „oberste“ Element wird als vorderstes Element angezeigt. Die einzelnen Attribute werden einfach Komma-getrennt angefügt. Über die Eigenschaften top, bottom, left, right kann man ihre Position festlegen.

The background of a box can have multiple layers in CSS3

Quelle: http://www.w3.org/TR/css3-background/#layering

Das ganze funktioniert für folgende Browser.

Foto: http://fmbip.com/

DEMO DOWNLOAD

FSK Kennzeichnungen mit CSS3


Um seine im Internet angebotenen Inhalte bald mit Alterskennzeichnungen zu versehen, habe ich die FSK Kennzeichnungen in CSS3 umgesetzt. Dank rgba Farbwerten und border-radius, ist das ziemlich einfach. Zunächst benötigt man eine passende Struktur.

<div class="fsklogo fsk18">
<div class="kreis">
<div class="fsk">FSK</div>
<small>ab</small><br />
<div class="alter">18</div>
<small>freigegeben</small> </div>
</div>

Einen großer Kasten mit leicht runden Ecken, der 50% Transparenz aufweist beinhaltet einen Kreis mit den Worten FSK ab 18 Jahre freigegeben.

Der große Kasten .fsklogo beinhaltet die Größe der Box, den border-radius, margin und padding, sowie text-align als CSS Attribute. Je nach Alterskennzeichnung (.fsk18) bekommt der Kasten außerdem noch die passende Hintergrundfarbe und Randfarbe. Beim Farbwert für die Hintergrundfarbe ist darauf zu achten, dass der Alphakanal 0.5 enthält. ( rgba(255,0,0,0.5) )

.fsklogo {
padding:0;
margin:20px;
width:140px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
text-align:  center;
float:left;
}
.fsk18 {
background:  rgba(255,0,0,0.5);
border:2px solid rgba(255,0,0,1);
}

Was jetzt noch fehlt ist der Kreis in der Mitte der Kennzeichnung. Hierfür wählt man eine feste Größe. z.B. 100px x 100px und setzt den border-radius auf die Hälfte der Breite bzw. Höhe (50px). Dadurch erhält man einen Kreis.

.fsk18 .kreis {
background:  rgba(255,0,0,1);
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border:1px solid black;
margin:20px;
}

Jetzt fehlt nur noch der Style für die Inhaltselemente.

.fsk {
margin-top:10px;
line-height:3px;
}
.alter {
font-size:50px;
line-height:30px;
font-weight:bold;
padding:-5px;
}
small {
font-size:10px;
}

Die passenden Farbwerte für die unterschiedlichen Alterskennzeichnungen lauten.

FSK 18:
rgba(255,0,0,1)
FSK 16:
rgba(0,164,224,1)
FSK 12:
rgba(0,190,105,1)
FSK 6:
rgba(255,231,72,1)
FSK 0:
rgba(255,255,255,1)

Hier gehts zur Demo.

20 Things I Learned About Browsers and the Web

Viele Menschen sehen HTML5 und CSS3 noch in weiter Ferne. Sie verschanzen sich hintern ihren veralteten Internetexplorern und wollen weiter in ihrer alten Flash Welt leben. Als stolzer Apple Gerätebesitzer darf ich mir täglich anhören, kann dein MacBook überhaupt Flash? Guck mal, mein Android braucht für Google Streetview keine App. Ich muss nur dieses Männchen auf die Karte… ahh mist, geht nicht. Und das ist der Punkt. Flash ist einfach nicht mehr zeitgemäß. Zumindest nicht im Kontext mobiler Geräte.

Google hat gestern ein sehr schönes Beispiel dafür geliefert, dass man Flash nicht mehr braucht. Zusammen mit der Firma Fi haben sie ein wunderschönes Buch mit dem Titel „20 Things I Learned About Browsers and the Web“ herausgegeben, welches komplett auf Flash verzichtet. Auf den ersten Blick ist das nicht zu glauben. Seiten, die man mit Effekten umblättern kann, Abdunkeln des Bildschirms, bewegte Charaktere. Aber es stimmt. Das interaktive Buch kommt allein mit PHP, CSS3, HTML5 und Javascript aus.

Das Buch beschreibt auf 61 wirklich hübsch illustrierten Seiten verschiedene Technologien, Protokolle und interessante Erkenntnisse, die die Macher von Google Chrome durch ihre Arbeit erlangt haben. Wer schon immer mal wissen wollte, was „Cloud Computing“ ist oder was diese „Web apps“ sind, von denen alle reden, der sollte mal einen Blick in das Buch werfen.

Sehr schön ist auch das Feature, dass sich die URL ändert, ohne dass die Seite neu geladen wird. Um dieses Geheimnis zu ergrunden reicht ein Blick in Datei http://www.20thingsilearned.com/js/twentythings.history.js

window.history.pushState();

Das Buch nutzt viele Features der neuen Technologien. HTML5 wird unter anderem in dem Buch verwendet um sich den „state“ des letzten Besuches mittels der Offline storage database zu merken. So bekommt man am Anfang die Möglichkeit an die Stelle zurückzukehren, wo man das Buch verlassen hat.

CSS3 wird z.B. beim Blättern des Buches verwendet oder bei den animierten Illustrationen. Ein Besuch des Buches lohnt sich auf jeden Fall. Die Zukunft ist ein Stück näher gerückt.

Danke Google!

Umblättern

CSS3 Helper

Wer bei seiner Webseite jetzt schon auf Grafiken verzichten  und stattdessen CSS3 verwenden möchte, findet im Internet eine menge Werkzeuge. Das Web 2.0 ist längst bei dem Standart angekommen, welcher noch gar keiner ist. Viele Browser ermöglichen die Anzeige von CSS3 / HTML5 basierten Webseiten.

Die folgenden Seiten sind tolle Beispiele für Tools, um sich CSS3 Verläufe, Schatten oder Rahmen zu erzeugen. Continue reading