WebsiteKlempner.DE

Webseite Ladezeit « Webdesign » SEO

 

Designen mit CSS

Das Layout, sprich das Aussehen einer Webseite, von den eigentlichen Inhalten zu trennen ist mittlerweile selbverständlich. Die Zeiten in denen Tabellen und Framesets für die Anordnung von Elementen herhalten mussten gehören der Vergangenheit an. Content Management Systeme wie WebsiteBaker, Typo3 und viele andere machen es vor.

Trotzdem lässt sich hier und da etwas "Spaghetti Code" oder doch noch mal 'ne Tabelle für bestimmte Sachen nicht so einfach vermeiden. Von der Bequemlichkeit den Quellcode umzuschreiben mal abgesehen.

 

Andere Unzulänglichkeiten kommen dann eher von der Browserfront. Denn längst nicht alle Browser sind bereit das was im Stylesheet steht umzusetzen und so anzuzeigen wie es gewünscht wird.

 

Für das Layout dieser Seiten habe ich neben den gängigen Deklarationen aus CSS 2.1 auch einige Elemente aus dem neuen CSS 3 hinzugefügt:

 

Abgerundete Ecken

Die runden Ecken entstehen z.B. durch die Formatierung mit "Element-Name" { -moz-border-radius:5px; }. Die fünf Pixel stehen dabei für den Radius mit dem die Ecken gekrümmt werden. Für Firefox oder ähnliche Browser ist hier das "-moz" gedacht.

Für Safari heißt das Teil dann { -webkit-border-radius:5px; }.

Googles Chrome und Firefox ab 5.x schaffen es mit der einfacheren Deklaration "Element-name" { border-radius:5px; }.

"Mein Freund der Internet Explorer" - wie ich ihn gerne nenne - wird es wohl erst in der Version 9 aufwärts richtig darstellen - bleibt also nur abwarten.

 

Text mit Schatten

Die Textschatten in der Navigation werden durch die Deklaration text-shadow: -1px -1px 2px rgba(0,0,0,5); erreicht.

Firefox, Safari und Google Chrome stellen die Textschatten korrekt dar.

Die Zahlen stehen hier für (v.l.n.r.)

• Schatten in X-Richtung - wobei ein Minus den Schatten weiter nach Links rückt
• Schatten in Y-Richtung - wobei ein Minus den Schatten weiter nach oben rückt
• Blurradius - die Weite des Verwischeffektes für den Schatten
• Die Zahlen in Klammern hinter rgba geben die Farbwerte und Farbintensität des Schattens wieder. Das heißt erste Zahl = Farbwert für Rot, zweite Zahl = Farbwert für Grün, dritte Zahl = Farbwert für Blau und letzte Zahl = Intensität.

Außnahme bildet wiedermal "Mein Freund der Internet Explorer" - hier könnte man z.B. mit der Deklaration filter:DropShadow(color=#666666, offx=-3, offy=-3) arbeiten. (sieht allerdings hässlich aus)

 

Schlagschatten

Die Schlagschatten am Hintergrund der Contentboxen sind mit -moz-box-shadow: 0.2em 0.2em 0.7em #333; formattiert. Die Angaben lauten ähnlich denen der Textschatten. Wobei der Farbwert hier Hexadezimal angegeben ist. Das Ganze funktioniert wie bei den runden Ecken genannten Browsern.

 

Farbverlauf (Gradient)

Die Farbverläufe für die Hauptnavigation und die Hintergründe der Contentboxen basieren ebenfalls auf CSS 3-Regeln. Das spart wiederum das Laden von Grafiken - bei entsprechenden Browsern - was der Ladezeit zugute kommt.

 

Der CSS-Code lautet z.B. wie folgt:

/* Legacy browsers */
    background: #75230d url("gradient-navi-hvr.png");
    background-repeat: repeat-x;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
/* Internet Explorer */
    *background: #75230d;
    background: #75230d\0/;
    filter: progid: DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF75230d, endColorstr=#FFda907d);
/* Opera */
    background: #75230d url("gradient-navi-hvr.png") repeat-x top;
/* Recent browsers */
    background-image: -moz-linear-gradient(top,#75230d,#da907d);
    background-image: -webkit-gradient(linear,left top, left bottom,from(#75230d), to(#da907d));

 

Eine deutsche Beschreibung bietet die Website unter:

http://blog.marit.ag/2010/05/04/teaserboxen-mit-verlauf-ohne-bilder-css3-linear-gradient/.

 

Schriftarten mit @font-face

Für die Überschriften H1 und H2 habe ich eine freie Truetype-Schriftart mit der Regel @font-face {font-family:'UndercoverNormal'; src:url(uncr-webfont.ttf);} eingesetzt. Diese ist natürlich nicht auf meinen Systemen installiert - was den Test verfälschen würde. Bei der Darstellung in den Browsern ergibt sich das gleiche Resultat wie mit den Textschatten.

 

Ein sehr gutes Tool zu Einbindung von Schriftarten fondet man z.B. auf der Website fontsquirrel.com. Hier lassen sich die unterschiedlichen Formate für verschiedene Browsertypen in einem Zug erstellen.

 

Fazit:

Mit CSS lässt sich einiges an mehr oder weniger nützlichen Effekten - ist wie Vieles Geschmackssache - auf einer Webseite realisieren. Das es noch nicht alle gängigen Browser schaffen alles korrekt darzustellen ist nicht wirklich problematisch und sicher nur eine Frage der Zeit. Bemerkenswert ist hier das es den Opensource Entwicklern - wie denen des Mozilla Projektes - schneller und offenbar besser gelingt neue Standards umzusetzen.