Am vorletztem Tag des CSS3 Adventskalender will ich nochmal ein paar interessante Einsatzmöglichkeiten von border-radius zeigen. Nicht zuletzt auch durch das Gewinnspiel „Gewinne ein Jahres-Abo des Webstandards Magazin“ hat sich border-radius als das CSS3-Feature herauskristalisiert, auch die Zugriffszahlen zeigen das.
Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23 weiterlesen
Heute im CSS3 Adventskalender mal ein Tutorial „revised“. Bereits im Mai 2010 habe ich zu linear-gradient den Artikel „Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)“ geschrieben und gezeigt, welche Möglichkeiten uns CSS3 heute schon bietet. Dabei habe ich versucht eine Designvorgabe komplett mit CSS3 umzusetzen und bin zu einem akzeptablen Ergebnis gekommen. So konnte ich den Einsatz von 2 Grafiken / 2 http-Requests mit insgesamt 2kb auf 1 Grafik / 1 Request mit 0,2kb reduzieren und habe gleichzeitig auch das Ergebnis gänzlich ohne Bilder gezeigt. Leider musste ich dabei auf eine grafische Feinheit verzichten (das kleine Pfeilsymbol/Dreieck)
Das zum Anlass genommen, habe ich das Tutorial jetzt erweitert und die Vorlage aus Photoshop 1:1 in CSS3 erstellt.
Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9 weiterlesen
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
Mein neuer Artikel über die Verwendung von CSS3 in Formularen wurde diese Woche im Webstandard-Blog veröffentlicht. m Tutorial kommen moderne CSS3-Eigenschaften wie border-radius, box-shadow, text-shadow sowie die neuen Möglichkeiten der Hintergrundgestaltung mit background: linear-gradient (ein Umfangreiches Tutorial zu „Verlauf ohne Bilder (CSS3 linear-gradient)“ habe ich im Marit AG TYPO3 Blog veröffentlicht) zum Einsatz.
CSS-Tutorial „Formular Design mit CSS3 – Visuelle Gestaltung und der Verzicht auf Grafiken“
CSS Tutorial Teil 2: „CSS3 Tutorial – Webdesign ohne Grafiken dank CSS Transform“