IE9 border-radius right-to-left (direction: rtl) Bug

Wer schon mal Layouts für arabische Websites umgesetzt hat, kennt sicherlich das HTML-Attribut „dir„, das man z.B. im body-Tag einfügen kann um die Leserichtig des Dokuments von links-nach-rechts auf rechts-nach-links zu ändern. In CSS ist die Anweisung „direction“ dafür zuständig. Für beide Möglichkeiten kann man die Werte „rtl“ (right-to-left) oder „ltr“ (left-to-right) sowie „auto“ angeben.

Hat man im Layout, runde Ecken (border-radius) nur an einer Seite, z.B. rechts abgerundet, dann sind im IE9 die Ecken allerdings links abgerundet. Der IE9 dreht von sich aus die runden Ecken im RTL-Modus um. Das ist zwar nett vom IE9, aber nicht richtig und auch nicht immer gewollt. Bei gleichmäßig abgerundeten Ecken kann man den Bug natürlich nicht nachvollziehen, deshalb fällt er selten auf. IE9 border-radius right-to-left (direction: rtl) Bug weiterlesen

Flattr this!

Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23

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

Flattr this!

CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15

Heute am Tag 15 des CSS3 Adventskalender von maddesigns und dem Webstandard Blog geht es weniger um ein Tutorial, sondern eher um ein umfangreiches Beispiel der bisher vorgestellten Eigenschaften. Als HTML-Basis erstellen wir eine Tabelle mit einer Übersicht zum „CSS3 Browser Support“.

CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15 weiterlesen

Flattr this!

Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9

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

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!

Gastartikel im Webstandards-Blog „Formular Design mit CSS3“

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

Flattr this!