box-shadow (Schatten) – CSS3 Adventskalender Tag 5

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

Flattr this!

linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3

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

Flattr this!

border-radius (runde Ecken) – CSS3 Adventskalender Tag 1

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

Flattr this!

CSS3 Adventskalender + Buchverlosung

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.

Flattr this!

re:publica 2011

Die 5. Auflage der Social-Media-Konferenz „re:publica“ findet wie gewohnt im Berliner Friedrichstadtpalast und der direkt dahinterliegenden Kalkscheune zwischen 13. – 15. April 2011 statt. Ein Ereigniss, das man sich nicht entgehen lassen sollte. Die Anmeldung hat bereits begonnen: http://www.re-publica.de/11/

Flattr this!

optionale Silbentrennung für den TYPO3 Redakteur

Oft steht man vor den gleichen Problemen: ein Wort ist zu lang und könnte doch sinnvoll per Bindestrich auf die neue Zeile getrennt werden, wenn es nötig ist. Als Bespiel hatte ich das Wort „Sehenswürdigkeit“, dass in der Hauptnavigation zu lang gewesen wäre, aber bequem in die Footer-Navigation passt.

Update am Ende des Textes: Shy im RTE von TYPO3 4.4.5 verfügbar
optionale Silbentrennung für den TYPO3 Redakteur weiterlesen

Flattr this!

„CSS & Performance“ Vortrag auf dem TYPO3camp München

Mein Vortrag beim TYPO3camp 2010 in München handelte von CSS und was man beim Stylesheet-Schreiben beachten kann um Dateigröße und Ladezeiten von CSS zu verringern. Nachfolgend die Präsentation: CSS & Performance auf Prezi-Basis.
„CSS & Performance“ Vortrag auf dem TYPO3camp München weiterlesen

Flattr this!