Kategorie: CSS3

Mobile First & IE8 Fallback mit Sass (Teil2)

Im ersten Teil Mobile First & IE8 Fallback mit Sass ging es darum, wie man mit dem IE8 umgeht, wenn man CSS und Media Querys nach dem „Mobile First“ Prinzip erstellt. Das Mixin-Plugin Sass-IE hilft dabei ein gesondertes Stylesheet für den IE8 ohne @media Angaben zu generieren. Die Lösung hat jedoch ein paar Schwächen, so können z.B. Media Querys nur für einen Wert (min-width bzw. max-width) und ein Medium (@media screen …) generiert werden. Es ist also nicht möglich ein Media Query für zwei Werte zu schreiben. Leider geht @media screen and (min-width: 450px and max-width: 650px) damit nicht.
Mobile First & IE8 Fallback mit Sass (Teil2) weiterlesen

Mobile First & IE8 Fallback mit Sass

Um die Begriffsklärung „Mobile First“ soll es heute nicht gehen. Das ist teils eine philosophische Frage und viele behaupten zurecht, bevor man sich über Design und die Umsetzung Gedanken macht, sollte der Content, für den man gestaltet, vorliegen — also quasi „Content First“. Für viele hat aber „Coffee First“ am Morgen eines Arbeitstages die höchste Priorität. ;)

In dem Artikel geht es um die technischen Möglichkeiten für den Internet Explorer 8 automatisiert eine optimierte ähnlich gute Ansicht der Responsive Website zu generieren.
Mobile First & IE8 Fallback mit Sass weiterlesen

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

Das große Weihnachtsgewinnspiel – Tag 24 im CSS3 Adventskalender 2011

…im Webstandard Blog.
Großartige Preise haben uns www.galileo-videotrainings.de, www.galileo-press.de, www.addison-wesley.de, www.oreilly.de und www.webstandards-magazin.de zur Verlosung an die Leser des CSS3 Adventskalender zur Verfügung bestellt.

Was man muss tun, um gewinnen zu können?!

…wird im Webstandard-Blog erklärt: Das große Weihnachtsgewinnspiel

Allen Teilnehmern viel Spaß, Glück & natürlich auch Erfolg!

Box-Sizing – CSS3 Adventskalender Tag 23

Einer der am meist bekannten vermeintlichen “Bugs” der richtig alten Internet Explorer Versionen (IE6 in “Quirks Mode” oder älter) ist sicherlich die Darstellung von Elementen mit einer bestimmten Breite (width) und definiertem Innenabstand (padding):
Der Box-Modell-Fehler.

Box-Sizing – CSS3 Adventskalender Tag 23 weiterlesen

Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21

Die letzten 3 Jahre haben uns Designern aufregende neue Möglichkeiten für die typografische Gestaltung von Schrift im Internet geschenkt. Schriften über @font-face direkt ins Dokument einzubinden ist mittlerweile zur Selbstverständlichkeit geworden, neue CSS Filter und Transformationen haben unser gestalterisches Vokabular entscheidend erweitert. Darüber hinaus versprechen neue CSS Eigenschaften wie „mask-image“ (derzeit nur Webkit) und Javascript Libraries wie lettering.js nie dagewesene Kontrolle über die Schriftdarstellung im Web.

Und trotzdem reichen alle diese Lösungen noch immer bei weitem nicht aus, um an die Grenzen des Möglichen zu kommen. Jeder, der einmal versucht hat, einen HTML-Text mit einem Verlauf zu füllen, weiss wovon ich rede.

Ich möchte hier eine Methode vorstellen, die zu Unrecht noch nicht die Beachtung gefunden hat, die Sie verdient: das Gestalten von Text mit der HTML5 Canvas.
Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21 weiterlesen

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19

Nachdem CSS 2.1 uns Ende der 90er einigermaßen solide Werkzeuge zum Layouten von Seiten ohne Tabellen an die Hand gegeben hat, ging es bei CSS3 zunächst viel darum, uns mit mehr dekorativen Gestaltungsmöglichkeiten auszustatten. Heute haben wir endlich einbettbare Schriftarten, runde Ecken, Farbverläufe, semitransparente Elemente und Farbwerte, Box- und Textschatten usw. Soweit, so gut.

Der Blick in Richtung Photoshop und dessen Featureset offenbart jedoch immer noch Lücken. In Photoshop haben wir zum Beispiel die Möglichkeit, Bereiche zu entsättigen oder zu schärfen und weichzuzeichnen. Wofür könnten wir diese Effekte brauchen? Nun, ein Entsättigen oder ein Weichzeichnen bestimmter Areale einer Seite hilft dem Benutzer, sich auf unangetastete Bereicher besser zu fokussieren.

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19 weiterlesen