Dieser Beitrag nimmt am Dr. Web Autorenwettbewerb teil. Sie helfen dem Autor durch Ihr Feedback und Ihre Kritik in Form eines Kommentars. Diese fließen ebenso wie der erzielte Traffic und eventuelle Verlinkungen in die Entscheidung über die zu gewinnenden Preise ein.
von Maximilian Zimmer
Eine benutzerfreundliche, suchmaschinenoptimierte und gleichzeitig schöne Webseite zu erstellen, die auch noch konform mit aktuellen Webstandards ist, kann eine ganz schöne Herausforderung sein.
Glücklicherweise ist die, sich seit Jahren in Entwicklung befindliche, dritte Auflage von CSS (Cascading Style Sheets) auf dem Vormarsch und immer mehr moderne Webbrowser unterstützen neue Eigenschaften, die uns helfen können Webseiten optisch ansprechend und barrierefrei zu gestalten.
In diesem Artikel werden wir anhand von konkreten Beispielen einige CSS3-Eigenschaften kennen lernen, die eine Webseite erstaunlich verschönern können ohne dabei die Funktionalität der Webseite im Falle eines Webbrowsers ohne CSS3 Unterstützung zu beeinträchtigen. Jedes Beispiel kommt außerdem mit zwei Screenshots, einer des Effekts mit CSS3-Unterstützung und einer mit der Ausweichlösung.
Schönere Webtypografie
Einer der am ungeduldigsten erwarteten Funktionen von CSS3 ist die @font-face Eigenschaft. Sie erlaubt es zu Schriftarten, genau wie bisher zu Bildern, zu verweisen und diese dann bestimmten Elementen (zum Beispiel Überschriften oder gar dem Body-Text) zuzuschreiben. Auf diese Weise erhält man regulären, komplett selektierbaren Text ohne dabei auf die üblichen, sicheren Schriftarten wie Arial, Georgia oder Verdana oder komplizierte Ersatztechniken wie sIFR, cufón oder FLIR angewiesen zu sein.
In folgendem Codebeispiel wird mit der Hilfe von @font-face zunächst eine neue Schriftartenfamilie definiert und daraufhin dem Body als Standardschriftart zugewiesen. Dabei wird mehr als ein Schriftartenformat definiert, um eine Anzeige der Schriftart in möglichst vielen Webbrowsern sicherzustellen. Außerdem ist es wichtig Ausweichschriftarten zu definieren, im Falle, dass der Webbrowser des Endnutzers die @font-face Eigenschaft nicht unterstützt.
@font-face {
font-family: 'NotethisRegular';
src: url('fonts/Note_this.eot');
src: local('Note this Regular'), local('Notethis'), url('fonts/Note_this.woff') format('woff'), url('fonts/Note_this.ttf') format('truetype'), url('fonts/Note_this.svg#Notethis') format('svg');
}
body {
font-family: NotethisRegular, Verdana, Geneva, sans-serif;
}
Realistische Tiefe mit Schatten
CSS3 führt gleich zwei Eigenschaften ein, die es erlauben Schattenwürfe zu verschiedenen Elementen auf der Webseite hinzuzufügen. Um Texten einen Schatten zu verleihen wird text-shadow verwendet und für andere Elemente, wie Bilder und Divs, box-shadow.
h1, h2 {
text-shadow:2px 2px 3px #000;
}
div#schein {
-moz-box-shadow:0px 0px 10px #FFF;
}
Für Beide gilt das gleiche Prinzip, der erste Wert gibt die horizontale (x) Achsversetzung an, der Zweite die vertikale (y) Achsversetzung und der dritte Wert die Größe der Unschärfe an. Der letzte Wert gibt die Farbe des Schattens an. Durch geschickten Einsatz negativer Werte und verschiedener Farben können neben äußeren Schatten auch innere Schatten oder inneres und äußeres Scheinen simuliert werden. Da CSS3 noch kein offizieller Standard ist muss die box-shadow Eigenschaft zur Zeit noch Browser-spezifisch (-webkit- für Apple Safari und Google Chrome und –moz für Mozilla Firefox) angesteuert werden.
Ansprechende Layouts mit runden Kanten
Die letzte Eigenschaft, die wir begutachten werden, ist border-radius. Diese gibt uns endlich die Möglichkeit Elementen runde Kanten zu verpassen ohne dabei auf komplizierte CSS-Hacks zurückgreifen zu müssen. Wir müssen nur den gewünschten Radius der Kantenrundung angeben um wunderschöne, gerundete Ecken auf unserer Webseite zu erhalten. Für noch mehr Flexibilität können den einzelnen Kanten eines Elements individuelle Werte zugewiesen werden.
div#runde_kanten {
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
Dies waren nur drei von vielen nützlichen CSS3-Eigenschaften, die wir hoffentlich bald auf einer breiteren Basis für unsere Webseiten verwenden können. Der Marktführer Internet Explorer hat CSS3-Unterstützung für die nächste Version seines Webbrowsers (IE9) angekündigt. Für mehr Informationen und Beispiele weiterer Eigenschaften sollte man die englischsprachige Webseite css3.info besuchen.
(sl)
Für den Wettbewerb können keine Beiträge mehr eingereicht werden, über Autoren freuen wir uns trotzdem. In dem Fall: bitte hier entlang.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
die bilder sind etwas groß, das ließ sich nicht mehr sinnvoll ändern. dafür erkennt man alles gut ^^
ich finde jedoch dass das bis jetzt der beste Text ist.
Ich vermissen die CSS3 Eigenschaften…
@font-face ist z.B. eine CSS 2 Eigenschaft und diese ganzen -moz sind browserspezifische Eigenschaften die recht wenig mit CSS3 gemein haben.
Ein Beitrag mit Fakten – so schätze ich das
Super Beitrag!
Danke für diese schöne Auflistung! Die runden Ecken kannte ich schon, aber der Rest ist neu für mich. Auch die anderen neuen Features von CSS3, die auf css3.info zu finden sind, werden schon heiß und innig erwartet (zumindest von mir =D).
@Tim: Die -moz- und -webkit-Eigenschaften sind CSS-Eigenschaften, die noch nicht dem aktuellen Standard entsprechen, aber schon unterstützt werden, d.h. sie gehören doch in diesen Artikel.
Etwas komisch nur, dass der Internet Explorer in der nächsten Version noch nicht standardkonforme CSS3-Eigenschaften unterstützen will, obwohl er noch nicht einmal alle CSS2-Eigenschaften beherrscht!
@Florian: Das wundert dich?
Microsoft hat schon bei der Veröffentlichung von IE8 gesagt, wo sie es endlich geschafft haben CSS2 voll zu unterstützen, dass sie erst mit der Veröffentlichung der kompletten CSS3-Spezifikationen mit der Implementierung dieser Features in den IE anfangen werden. Sprich wenn dann kann man damit rechnen das erst der IE10 runde Ecken darstellen kann – sofern man sich IRGENDWANN einmal auf einheitliche CSS-Eigenschaften einigt.
Mit Grauen erwarte ich @font-face.
10 Absätze in z.B. Old English, das muss ich nicht haben.
Solange man die Funktion nur bei Überschriften benutzt, OK.
Leider wird dann wieder übertrieben, wie mit web2.0.
Fehlt nur noch, dass die Schrift gespiegelt wird.;-)
Endlich!!! Guter Artikel und fast genau die Punke herausgesucht, die für mich relevant sind.
Ich lese in der Einleitung: “Eine benutzerfreundliche, suchmaschinenoptimierte und gleichzeitig schöne Webseite zu erstellen, die auch noch konform mit aktuellen Webstandards ist, kann eine ganz schöne Herausforderung sein.”
Wer tatsächlich Websites machen will, die konform zu aktuellen Webstandards sein sollen, muss allerdings auf CSS3 noch komplett verzichten, weil das noch gar kein Webstandard ist.
Die Herausforderung, Standardkonformes zu beschreiben, kann der Text daher nicht erfüllen. Abgesehen davon werden im Text auch browserspezifische Erweiterungen beschrieben, die es als erlaubte Browsererweiterung in CSS3 nicht gibt.
Wenn sich der Text an Bastler, die mit den neusten, schicken Sachen spielen wollen, gerichtet hätte, wäre er ok gewesen. Aber als Ratgeber um “gute, standardkonforme” Webseiten zu erstellen ist er etwas am Thema vorbei.
Ich kann mir auch nicht vorstellen das bei @font-face im allgemeinen was sinnvolles dabei raus kommt…
Der Schatten… hmm naja ich finds nicht so schön oO
Das einzige was mir wirklich gut gefällt sind die runden Ecken.
Aber eines ist sicher. CSS 3 nimmt einige Arbeit in Photoshop ab
Sollte Windows 7 ähnlich lang am Markt präsent sein wie XP, wird der MSIE 9, bzw. MSIE 10 wohl lange auf sich warten lassen. Es ist leider so, dass viele Leute ihren PC nur mit einem Neukauf aktualisieren und oft nicht wissen, was ein “Browser” ist!
Ich dachte, CSS-3 ist eine landgestützte ballistische Mittelstreckenrakete der Volksrepublik China …
Vor rund zehn Jahren konnte ich auf vielen Internetseiten ähnliches lesen wie “Optimiert für Netscape” oder “Optimiert für Internet Explorer”. Für den Besucher zum einen der Hinweis den “optimalen” Browser zu benutzen, aber auch der Hinweis das es überhaupt die bessere Wahl gibt, durch einen anderen “optimalen” Browser die Website besser nutzen, betrachten zu können.
Etwa zeitgleich mit dem Aussterben des Netscape und der aufkommenden Monopolstellung des MSIE 6, wurde dieser Hinweis immer mehr verpöhnt. Websites mussten jetzt auf allen Browsern gleich aussehen – gute Webdesigner können das. Dem Kunden wurde versprochen, dass seine Homepage mit jedem auf dem Markt befindlichen Schrottbrowser gleich gut zu benutzen wäre.
Ich meine, dass sich die Webdesigner durch diese Haltung selbst den größten Stein in den Weg gelegt haben! Der MSIE kann seit Jahren die Entwicklung bremsen, weil bei der Websiteentwicklung immer nur zurückgeschaut wird. Die aktuellen und alten Browser müssen die Website darstellen können, weil es ja noch so viele Menschen gibt, die sie benutzen.
Wie sollen die auch darauf kommen, das es neue Browser gibt, wenn nicht dafür wird richtig geworben wird!
Danke für die vielen Kommentare. Großartig, dass es sogar zu einigen kleinen Diskussionen kommt.
@Sven Lennartz:
Tut mir leid mit den großen Bildern. Ich dachte, dass ich im originalen Kode, den ich euch zugeschickt hatte kleine Versionen der Bilder implementiert hatte, die dann zur kompletten Version linken.
@Tim:
Es stimmt, dass @font-face ursprünglich für CSS3 vorgeschlagen wurde, aber außer Internet Explorer(5+) wurde es bisher nicht wirklich unterstützt. Es wird zusammen mit CSS3 sozusagen wieder eingeführt und ist eine der Eigenschaften, die bisher von den meisten Browsern unterstützt wird.
Wie Florian bereits angemerkt hat, sind die anderen Eigenschaften durchaus gültige CSS3-Eigenschaften. Sie müssen zur Zeit eben auf diese Weise angesteuert werden, da CSS3 ja doch noch einige Zeit auf sich warten lässt.
@rene:
Ich denke gute Webdesigner werden @font-face zu ihrem Vorteil zu nutzen wissen. Natürlich muss man mit der ein oder anderen Amateurseite rechnen, die es übertreibt und 30 unleserliche Schriftarten auf einmal verwendet.
@Andreas F:
Ich muss dir recht geben, dass es nicht möglich ist diese Eigenschaften zu verwenden und w3c-validierten CSS-Code zu erhalten, aber so weit ich weiß wird keine dieser Eigenschaften Probleme in den Browsern kreeieren, die CSS3 nicht unterstützten, wohingegen Webseiten sehr viel ansprechender aussehen können, wenn ein Browser die Eigenschaften denn unterstützt.
Ohnehin ist dies mehr oder weniger ein Ausblick auf die Zukunft und eines Tages wird es hoffentlich möglich sein diese Eigenschaften zu verwenden und gleichzeitig gültigen und standardkonformen Kode zu erhalten.
@elcurina:
Die Eigenschaften die in diesem Artikel vorgestellt wurden bieten ja den Vorteil, dass sie vollkommen unabhängig vom Inhalt und den Grundfunktionen der Webseite angewendet werden (das ist ja ohnehin die Idee von CSS). Das bietet den enormen Vorteil, dass alle Browser unterstützt werden können, aber die Nutzer, die einen modernen Browser nutzen mit einer noch schöneren Webseite belohnt werden.
Noch einmal vielen Dank, sowohl für Lob als auch Kritik.
prima text – danke!
Danke
Super, am besten finde ich dass es bald möglich sein wird, runde Ecken ohne großen Aufwand einzubauen! Danke für die kleine Einführung!!
Hallo,
ich bin sicher ‘text-shadow’ wird etwa so “populaer” werden wie damals
< marquee > , oder vor nicht allzu langer zeit dieser “Frisch gebohnert!” spiegeleffekt auf allen seiten die irgendwie web2.0 sein wollten. sieht zwar nett aus, man sollte es damit aber nicht uebertreiben um den effekt nicht zu sehr abzunutzen.
dennoch sollte man beachten das css3 immer noch kein offizieller standard ist.
Gefällt mir sehr gut, da ich diese Techniken noch gar nicht kannte und alles super einfach erklärt ist.
Guter Artikel. Hätte mir allerdings gerne gewünscht, dass bei den Eigenschaften auch angemerkt wird, welche Browser diese unterstützen. Da gibt es ja teilweise erhebliche Unterschiede.
@Daniel
Natürlich muss man alle genannten Effekte mit Vorsicht und behutsam verwenden, aber text-shadow kann ein Design wirklich aufs nächste Level bringen. Im Beispiel habe ich sehr große Werte gewählt um den Effekt zu verstärken
@fanfarian
Leider war ich auf 500 Worte begrenzt und ich habe das Limit bereits ein wenig überschritten, anderfalls hätte ich auch die Browserunterstützung erwähnt.
@font-face wird zur Zeit von allen gängigen Browsern unterstützt (inkl. IE5+), muss aber mit Hilfe von verschieden Schriftdateitypen implementiert werden.
text/box-shadow und rounded-corners werden zur Zeit nur in der neueren Versionen von Mozilla Firefox, Google Chrome und Apple’s Safari unterstützt.
Danke auch für die weiteren Kommentare
@elcurina
Das Schlimme ist: Den Hinweis “Optimiert für Internet Explorer” sehe ich heute noch. Und nicht mal im IE wird die Internetseite dann ansprechend serviert.
Und ich finde nicht, dass sich Webdesigner einen Stein in den Weg legen, wenn die Seite bei einem möglichst großen Publikum gut aussieht (und funktioniert!).
Es kommt doch auch niemand auf die Idee, Werbung in 3D im Fernsehen zu zeigen und dann dem Kunden zu sagen: “Alle, die zu Hause in diesem Moment eine 3D-Brille aufgesetzt haben, können die Werbung sehen.”
Aber nichts spricht gegen das Einbauen eines Skripts WIE von http://www.ie6nomore.com/ (natürlich lokalisiert). Leider finde ich ein anderes eleganteres, dezenteres im Moment nicht mehr, das mir deutlich besser gefallen hat.