Wie schon im CSS3 Adventskalender Tag 5 über box-shadow (Schatten) beschrieben, ist die Syntax zwischen text-shadow und box-shadow gleich.
.text-shadow {
text-shadow: 2px 2px 5px #999;
}
text-shadow – Text-Effekte – CSS3 Adventskalender Tag 7 weiterlesen
…im Webstandard Blog zum Thema “Text Overflow – Das Auslassungszeichen – CSS3 Adventskalender”!
Einen Schatten hinter Elemente zu generieren unterstützen heutzutage alle moderneren Browser, selbst für den Internet Explorer 6-8 kann man einen Schatten zaubern. Wie schon im CSS3 Adventskalender Tag 3 – linear-gradient (Hintergrundverlauf) beschrieben, kommt auch hier wieder eine proprietäre CSS-Eigenschaft filter des IE zum Einsatz.
Die CSS3-Eigenschaft orientiert sich am Syntax des text-shadow. Angegeben wird der Versatz auf x- und y-Achse, der Blur-Faktor sowie die Farbe. Auch hier kann man mit Transparenzen, also einem Alphawert arbeiten. Der Versatz kann auch negative Werte annehmen, der Schatten wird dann in die andere Richtung generiert.
box-shadow (Schatten) – CSS3 Adventskalender Tag 5 weiterlesen
…im Webstandard Blog zum Thema “Linear Gradient – Detaillierter Farbverlauf – CSS3 Adventskalender”!
Einen einfachen Farbverlauf für Hintergünde in CSS3 zu erstellen bedarf schon etwas Schreibarbeit… Als Webkit 2008 begann die Eigenschaft umzusetzen, orientierten sie sich an der Spezifikation für Canvas. Mozilla entwarf daraufhin einen einfacheren Syntax und dieser Syntax ist derzeit auch der empfohlene des W3C. Bisher ist der Syntax nicht angeglichen.
Als Farbwerte können definierte Farbnamen, Hexadezimalwerte, RGB und HSL, oder RGBa und HSLa verwendet werden (aber was das alles bedeutet, zeigen wir in einem anderen Adventskalender Türchen). Jetzt erstmal ein Code-Beispiel:
linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3 weiterlesen
…im Webstandard Blog zum Thema “Border-Radius – Ungleiche Ecken – CSS3 Adventskalender”!
Runde Ecken (border-radius) sind das langersehnte Feature, das CSS lange Zeit gefehlt hat. Zumeist musste man auf Grafiken und abstruse HTML-Konstrukte zurückgreifen um zum gewünschten Ergebnis zu kommen. Um einen kleinen Wermutstropfen vorweg zu nehmen, wer runde Ecken sauber im Internet Explorer 6-8 darstellen will, muss weiterhin auf Grafiken etc. zurückgreifen, erst der IE9 setzt die Eigenschaft border-radius um. Firefox und Webkit-Browser bieten durch den Einsatz von Vendor-Prefixen schon seit längerem die Möglichkeit border-radius einzusetzen.
border-radius (runde Ecken) – CSS3 Adventskalender Tag 1 weiterlesen
Alle Jahre wieder möchte man fast sagen… Adventskalender an jeder Ecke. Mal mit Schokolade, mal mit lustigen Figuren, mal mit 24 Bierdosen und manchmal selbstgebastelt. Ich möchte dieses Jahr jeden Tag vor Weihnachten ein CSS3-Trick Türchen öffnen. Es wird ab dem 01.12.10 mal kleine und mal größere Beispiele zum praktischen Einsatz von CSS3 geben.
Und obendrauf gibt es noch eine Verlosung für den Gabentisch. Unter allen Teilnehmern, die hier einen Kommentar hinterlassen, verlose ich das englischsprachige Buch „CSS3 For Web Designers“ von Dan Cederholm (Vorwort von Jeffrey Zeldman). Ich wünsche allen Teilnehmern und Lesern viel Spaß!
Update: Der Webstandard-Blog beteiligt sich am CSS3 Adventskalender und legt noch ein Buch oben drauf! Es wird also im Wechsel Tag für Tag einen tolles CSS3-Tutorial hier im Blog und im Webstandard Blog geben. Mehr Infos folgen…
Teilnahmeschluß ist der 24.12.2010 um 24 Uhr.
Der Rechtsweg ist ausgeschlossen. Die Auslosung erfolgt unter Zuhilfenahme von random.org.