Daniel's Blog

Wenn man bei großen Bildschirmen die komplette Breite ausnutzen möchte, dann sollte man den Text mehrspaltig schreiben, denn lange Zeilen lassen sich sehr schlecht lesen. Glücklicherweise gibt es dafür Unterstützung in CSS3.

Auf kleinen Bildschirmen, werden diese Spalten dann aber sehr schmal, deshalb muss sich das Layout dynamisch an die Bildschirmbreite anpassen. Glücklicherweise gibt es auch dafür Unterstützung in CSS3 in Form von Media Queries.

Zusammengesetzt sieht das ganze dann so aus (Da es sich hierbei noch um keinen offiziellen Standard handelt, sind wieder verschiedene Versionen für die unterschiedlichen Browser nötig):

 1 @media (min-width: 1300px)
 2 {
 3   .entry
 4   {
 5     -moz-column-count: 2;
 6     -moz-column-gap: 40px;
 7     -moz-column-rule: 1px solid white;
 8     -webkit-column-count: 2;
 9     -webkit-column-gap: 40px;
10     -webkit-column-rule: 1px solid white;
11   }
12 }

Wenn man ein schwarzes Desktop-Theme benutzt, zeigt Firefox die Seiten standardmäßig mit weißer Schrift auf schwarzem Hintergrund an. Das wird dann zum Problem, wenn eine Webseite den Hintergrund auf weiß setzt, aber die Schriftfarbe unverändert lässt, denn dann hat man weiße Schrift auf weißem Grund…

Der Workaround

Um das Problem zu lösen, hab ich mir ein kleines Greasemonkey-Skript gebastelt.

Zuerst muss man das Greasemonkey Firefox-Addon installieren und FF neustarten. Dann klickt man auf diesen Link und es sollte sich ein Popup öffnen, in dem die Installation bestätigen muss. Von nun an, sollten die Probleme der Vergangenheit angehören…

Auf manchen Seiten funktioniert es noch nicht ganz hundertprozentig, aber auf den meisten Seiten funktioniert es wunderbar.

Sollte es eine bessere Lösung geben, bitte ich um einen Kommentar ;-)

Die Funktionsweise

Das Skript überprüft, ob explizit ein Wert für Hintergrund und Vordergrundfarbe gesetzt wurde. Ist das nicht der Fall, wird der Hintergrund auf weiß bzw. der Vordergrund auf schwarz gesetzt. Das gleiche passiert dann noch mit Buttons und Texteingabefeldern.

Beim Erkennen, ob schon ein Wert gesetzt ist, hab ich mich bei diesem Skript bedient.

Wie versprochen kommt heute der erste Artikel zum Thema CSS3.

Ich werde erklären, wie man einen 3D-Effekt bei Buttons erzeugt, wie ich ihn bei den Navigationslinks auf meinem Blog verwende.

Dafür gibt es einen einfachen Trick: Ein einfacher Farbverlauf von hell nach dunkel, in Kombination mit abgerundeten Ecken, erzeugt einen relativ plastischen Effekt.

Nun zur Umsetzung:

HTML-Code

1 <a href="http://example.com" class="button" >Button</a>

Mehr ist nicht nötig, der Rest wird nur mit CSS gemacht.

CSS-Code

 1 a.button
 2 {
 3   display: inline-block;
 4   width: 100px;
 5   text-align: center;
 6   -moz-border-radius: 5px;
 7   -webkit-border-radius: 5px;
 8   border-radius: 5px;
 9   border: 1px solid #606060;
10   background-image: -moz-linear-gradient(top, #707070, #404040);
11   background-image: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#404040));
12   background-color: #505050;
13   color: #DDDDDD;
14 }
15 a.button:hover
16 {
17   background-image: -moz-linear-gradient(top, #404040, #707070);
18   background-image: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#707070));
19   background-color: #707070;
20 }

Erläuterungen

Zeilen 3-5

Wenn man mehrere Buttons nebeneinander verwendet, sieht es besser aus, wenn alle Buttons die gleiche Breite haben und der Text zentriert ist. Leider ist dies nicht ohne weiteres möglich:

Bei dem <a>-Element handelt es sich um ein inline-Element. Das Ändern der Breite ist bei inline-Elementen nicht möglich. Deshalb muss das <a>-Element als inline-block-Element umdefiniert werden. Dadurch bekommt man alle Möglichkeiten eines block-Elements an die Hand, mehrere Buttons können aber dennoch in einer Zeile dargestellt werden.

Zeilen 6-8

Hier werden die runden Ecken definiert, in 3 verschiedenen Versionen für verschiedenen Browser.

Zeilen 10-12

Hier wird der Farbverlauf definiert. Leider ist die Syntax von Firefox und Webkit komplett inkompatibel, deswegen sind 2 völlig verschiedene Versionen nötig. Um Benutzer von Browsern ohne Farbverlaufs-Unterstützung nicht im Regen stehen zu lassen, wird auch noch eine einfache Hintergrundfarbe als Fallback definiert.

Ergebnis

Um die Beispiele angucken zu können, ein aktueller Browser nötig (Firefox 3.6, Safari 4.0 oder Chrome 4.0)

Das ganze lässt sich auch beliebig abwandeln:

Herzlich willkommen zu meinem Blog.

Hier möchte ich meine Gedanken zu Programmierung, IT-Security , meinem Studium am Hasso-Plattner-Institut und Politik niederschreiben.

Dieses Blog läuft unter einem leicht modifizierten enki, die Templates sind aber komplett mit HAML neu geschrieben. Demnächst werde ich aber noch weitere Features einbauen.

Ich hab mich dafür entschieden ein Layout zu basteln, dass auf XHTML5 und CSS3 aufsetzt und komplett ohne Bilder auskommt. Um alle erweiterten Effekte anzeigen zu können, ist Firefox 3.6 oder eine neuere Version eines webkit-Browsers (z.B. Safari 4.0 oder Chrome 4.0) nötig. Benutzbar sollte die Seite allerdings mit praktisch allen Browsern sein. Nur der Internet Explorer weigert sich standhaft die Webseite anzuzeigen und ist komplett inkompatibel mit XHTML5.

Bei Gelegenheit werd ich auch nochmal etwas zu dem Thema CSS3 und XHTML5 schreiben.