Webdesign mit CSS

Webdesign mit CSS Webdesign 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.

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 durch die Formatierung mit "Element-Name" und zum Beispiel

{border-radius: 5px;}

..oder auch

{border-radius: 5%;}

Die fünf Pixel bzw. Prozent stehen dabei für den Radius mit dem die Ecken gekrümmt werden.
Die meisten der modernen Browser schaffen es mit der einfachen Deklaration.
Ältere Browserversionen benötigen ein so genanntes Präfix wie -moz (Firefox), -webkit (Safari), -o (Opera).

"Mein Freund der Internet Explorer" - wie ich ihn gerne nenne - gelingt die Darstellung seit der Version 9.
Für die IE-Versionen 7 und 8 funktionieren die runden Ecken nur über Umwege. Hier bietet sich z.B. die PIE.htc an. Eine Anleitung dazu findet sich auf der Homepage unter www.css3pie.com .

Farbverlauf (Gradient)

Die Farbverläufe für die Buttons und Schaltflächen basieren ebenfalls auf CSS3-Regeln. Das spart wiederum das Laden von Grafiken - bei entsprechenden Browsern - was der Ladezeit der Website zugute kommt.

button,.button,select {
  background:#BBCF5B; // Fallback
  background:url( '../img/button.png ') repeat-x center; // Fallback
  background:linear-gradient(to bottom,#BBCF5B 5%,#8B9F29 100%); // W3C Standard
}
button:hover,.button:hover {
  background:#EAEAEA; // Fallback
  background:url( '../img/button_hover.png ') repeat-x center; // Fallback
  background:linear-gradient(to bottom,#8B9F29 5%,#BBCF5B 100%); // W3C Standard
  color:#58680D;
}

Um Gradienten auch für den IE 7/8 zu realisieren, leistet die PIE.htc auch hier gute Dienste.
Der CSS-Code lautet z.B. wie folgt:

button,.button,select {  
  -pie-background:linear-gradient(#BBCF5B 5%,#8B9F29 100%);
  behavior: url("PIE.htc");
}
button:hover,.button:hover {
  -pie-background:linear-gradient(#8B9F29 5%,#BBCF5B 100%);
}

Die PIE.htc muss sich dabei im gleichen Verzeichnis wie die entsprechende Seite befinden.

Schlagschatten

Der Schlagschatten am Bild oben ist zum Beispiel mit

box-shadow:0px 8px 10px -5px rgba(0,0,0,0.5);

formatiert. Die Angaben lauten ähnlich denen der Textschatten. Die Schatten funktionieren mittlerweile in jedem modernen Browser - beim IE ab Version 9.

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
  • eine weitere Zahl bestimmt die Stärke des Schattens
  • 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 der Internet Explorer. Hier könnte man mit der Deklaration filter:DropShadow(color=#666666, offx=-3, offy=-3) arbeiten (sieht allerdings hässlich aus).

Schriftarten mit @font-face

Für die Überschrift H2 habe ich eine freie Truetype-Schriftart mit der Regel @font-face eingesetzt. Diese ist nicht auf meinen Systemen installiert - was den Test verfälschen würde. 

Der CSS-Code hier lautet:

@font-face {
font-family: 'JournalRegular ';
src:url( '../font/journal-webfont.eot '); // Internet Explorer
src:local( ' ? '),
url( '../font/journal-webfont.woff ') format( 'woff '),
// ältere Firefox
url( '../font/journal-webfont.ttf ') format( 'truetype '),
//je nach Browserversion
url( '../font/journal-webfont.svg#webfontxNXoptyW ') format( 'svg '); // Opera
}


Auf der Website fontsquirrel.com gibts ein sehr gutes Tool zur Einbindung von Schriftarten. Die verschiedenen Browserformate werden dort mit einem Klick erstellt. Eine Blacklist sorgt zudem dafür, dass nicht lizenzierte Schriftarten nicht verwendet werden können.

Schriftarten per Google-Webfont

Eine andere Möglichkeit bietet Google Web Fonts . Hier kann aus mehreren hundert Schriftarten gewählt werden. Die Einbindung in die eigene Website ist sehr einfach.

Zu einem wird die Schriftart (oder auch mehrere) per CSS-Link geladen:

link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" media="screen" rel="stylesheet" type="text/css" 

... und im Stylesheet wie gehabt angegeben:

h1,h3{
font-family:'Yanone Kaffeesatz',sans-serif;
font-weight:normal;
}

Für jede Browserengine wird der entsprechende Webfont automatisch geladen.

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.