xhtmlFreak 
Foren As
Dabei seit: 07.11.2006
Beiträge: 84
Level: 28 [?]
Erfahrungspunkte: 169.501
Nächster Level: 195.661
 |
|
| Runde Ecken mit CSS ohne Grafiken in allen Browsern |
     |
Es geht in die zweite Runde
Runde Ecken werden allzu gerne von Webdesignern verwendet. Dabei gibt es verschiedene Methoden, dass Herz der modernen Webmaster zurealisieren.
Eine habe ich bereits in einem meiner Workshops vorgestellt. Dabei werden vier Grafiken erstellt, die in vier verschiedenen ausgerichteten Boxen eingerichtet werden.
Eine simpel zu verstehende Variante, die jedoch oft aus mangelnden Grafikbearbeitungskenntnissen nicht im Web bei privaten Internetseiten berücksichtigt werden.
Deshalb hat Alessandro Fulciniti nach anderen Lösungswegen gesucht.
Das Ergebnis ist bemerkenswert, wird aber leider im Web zu wenig Zuachtung geschenkt.
Des Tricks Hintergrund
Dem Webstandard ist CSS nicht mehr wegzudenken.
Ein CSS-Layout basiert dabei auf sog. Container (Boxen). Diese reservieren einen rechteckigen Bereich im Monitor.
Ein Grundlayout wird gerne in 4 verschiedenen Containern gegliedert: Header, Navigation, Inhaltsbereich und Footer.
Alessandro mochte auch hier nicht dem Standard ausweichen und nutze die Funktion der Container aus.
Er "stapelte" mehrere Container aufeinander, welche mit immer kleineren Breiten optisch zusammenfließen. Dabei kann man die Ausrichtung der Container beliebig steuern, sodass man auch runde Ecken hervorrufen kann.
Das ganze kann man zu guter Letzt als "Treppenhaus" bezeichnen.
Die Praxis
Betrachtet man das (Link ist nur für Registrierte User sichtbar), erkennt man den bereits Vorangekündigten Effekt.
Schaut man sich allerdings den Quellentext und Stylesheet an, findet man keine Verweiße auf Grafiken. Es muss also etwas dran sein, an dieser These der "Runden Ecken ohne Grafiken in allen Browsern".
Schauen wir uns mal den XHTML konformen Quellentext an des <body>-Bereiches.
Erkennbar ist ein Container, der dass ganze Experiment umschließt. Da wir uns die runden Ecken jeweils unterhalb und oberhalb der Box wünschen, gliedern wir umschießende Box in drei verschiedenen Ebenen.
Eine Box mit runden Ecken würde nur dann richtig Sinn machen, wenn auch entsprechend Inhalt eingesetzt werden soll.
Dies ist unsere erste Ebene. Das Interessante an dieser ist, dass kein eigener Container für Inhalt & Co. benötigt wird.
Warum?
Die zwei anderen Ebenen umschließen unsere Ebene 1 so, dass es sinnlos wäre, eine zusätzlich unnötige Box zu erstellen. Denn zu den Schlagwörtern im Webentwicklungs-Bereich gehört auch Begriff Barrierefreiheit.
Die Barrierefreiheit versichert das uneingeschränkte Benutzen von Internet-Angeboten, egal, ob der Benutzer körperlich und/oder technisch benachteiligt ist.
Das unnötige Gefummel wie eine Box, zerstören diese Freiheit für einige unsere Gesellschaft und da das Internet eine wichtige Kommunikationsplattform für solche Leute bildert, wollen wir dieses Szenario vermeiden.
Damit unser Treppenhaus den gewünschten Effekt erhält, werden in den zwei anderen Ebenen die Boxen, die die abgerundeten Ecken hervorufen, oberhalb sowie unterhalb platziert.
In diesen drei Ebenen sind weitere rechteckige Bereiche reserviert, die vom Stylesheet im Browser optisch "abgerundet" werden.
Kommen wir nun vom XHTML-Code zum Stylesheet. Mit dem Stylesheet werden wir angeben, wie die Boxen ausgerichtet werden sollen und aussehen.
Der erste Eindruck ist vielleicht etwas abstoßend, aber der Code eigentlich recht einfach zu verstehen.
In diesem Abschnitt werden wichtige Angaben zur Position der Boxen gemacht. Aber auch Farben und Abstände werden mit ins Spiel gebracht. Ebenso feste Höhen und Breiten-Angaben. Damit aus diesem Tutorial keine seitenlange "Wieso-Weshalb-Warum"-Geschichte wird, versuche ich euch zu erklären, was angepasst werden muss, wenn man diese Methode der Abgerundeten Ecken in Praxis anwenden möchte.
Breite und Höhe spielen eine wichtige Rolle, denn sie geben den Ecken die Form (Ein Radius von 15 ist weniger als der Radius 30). Die Angaben im Stylsheet sind azupassen.
Abstände sind zentrale Anhaltspunkte, die gemeinsam mit Breite und Höhe die Form der Ecken bestimmen!
Farben dürfen ebenfalls angepasst werden. Möchte man z.B. eine andere Hintergrundfarbe, muss diese entsprechend angepasst werden. Den der Browser kann zwar CSS verstehen und umsetzten, aber nicht unsere Gedanken (Obwohl dies in weiter Zukunft bestimmt Realisierbar ist ;
).
Je nach Verwendung Schriftgrößen anpassen!
Support
Bei Fragen zum Workshop ist mir eine PM zu schicken.
|
|
Danke. Hatte den Workshop ne Ewigzeit auf meiner Festplatte. Und wieso dann nicht bytenation?
Aber na und? Bald werde ich sowieso einen Hack-Angriff auf bytenation machen; dann bin ich Herrscher der Community