Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Auf die offizielle Veröffentlichung von CSS 3 darf die Webdesign-Gemeinde wohl noch etwas warten. Kein Grund jedoch sich nicht einige der neuen Funktionen etwas genauer anzuschauen:
In diesem Artikel zeige ich anhand simpler Beispiele die CSS 3-Funktionen „rounded courners“, „multiple backgrounds“, „box-shadow“, „text-shadow“ und „multi-column-layout“.


Safari 3+ User können (dank Safaris CSS 3-Interpretation) alle Beispiele im Browser sehen, Firefox 2+ User können einige Beispiele sehen.
Internet Explorer User können (wen wundert’s?) an den neuen Features leider nicht teilhaben. Weitere Browser stehen mir aktuell nicht für Testzwecke zur Verfügung. Alle Beispiele habe ich zur Veranschaulichung jedoch bebildert.

Abgerundete Ecken (rounded courners) mit CSS 3

Abgerundete Ecken (rounded courners) mit CSS 3

Mit CSS3 wird es endlich möglich sein auch ohne lästige DIV-Verschachtelungen und diverse Hintergrundgrafiken abgerundete Ecken zu erzeugen.

Benutzer von Firefox und Safari werden beim folgenden Absatz um 5 Pixel abgerundete Ecken erkennen können.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Für diesen grafischen Effekt ist lediglich folgender CSS-Code von Nöten:


p {
 background: #c2bdb2;
 border: 1px solid #a29a8d;
  -moz-border-radius: 5px; /* with mozilla prefix */
  -webkit-border-radius: 5px; /* with safari prefix */
 padding: 15px;
}

Mehrere Hintergründe (multiple backgrounds) mit CSS 3

Mehrere Hintergründe (multiple backgrounds) mit CSS 3

Mit CSS3 wird es möglich sein einem Element mehrere Hintergrundgrafiken zuzuweisen. Dem gewöhnlichen Hintergrund werden einfach mit Komma getrennte Hintergründe zugewiesen und im Element positioniert.

Safari-User werden beim folgenden Absatz einen interessanten Effekt beabachten können.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Wie beschrieben reicht folgender CSS-Code:


p {
 height:100px;
 padding:90px 15px 15px 15px;
 background:
  url(../bild-oben.jpg) top center no-repeat,
  url(../bild-unten.jpg) bottom center no-repeat,
  url(../bild-mitte.jpg) center repeat-y;
}

Schlagschatten für Block-Elemente (box-shadow) mit CSS 3

Schlagschatten für Block-Elemente (box-shadow) mit CSS 3

CSS3 erleichtert zudem die grafische Aufwertung von Blockelementen. Mit der Funktion „box-shadow“ kann Elementen ein Schlagschatten hinzugefügt werden. Die Eigenschaft besteht aus vier Werten: der horizontalen- sowie vertikalen Position des Schattens zum Ausgangselement, dem Weichzeichnungsgrad und der Schattenfarbe.

Der folgende Absatz wirft bei Safari-Usern einen netten Schlagschatten.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Der Code ist wie bereits zu erwarten sehr schlicht gehalten:


p {
 -webkit-box-shadow: 2px 2px 3px #000; /* with safari prefix */
 padding: 15px;
 background:#fbfaf6"
}

Schlagschatten für Texte (text-shadow) mit CSS 3

Schlagschatten für Texte (text-shadow) mit CSS 3

Wie Blockelementen kann auch Texten ein Schlagschatten zugewiesen werden. Soweit ich informiert bin existiert diese Möglichkeit bereits seit CSS 2, wird jedoch bisher nur von Firefox 3.1a und Safari interpretiert. Mit ein wenig Experimentierfreude lassen sich so erstaunliche Effekte erzielen …

Der folgende Text scheint förmlich zu glühen! Geil oder? (Passt übrigens gut zum Sunset-Theme ;)

Lorem ipsum!

Für das Beispiel wurde folgender Code verwendet:


p {
 text-shadow: 0 0 5px #ff6600; /* hor., vert., blur, color */
 color:#ffba00;
 font-size:50px;
 font-weight:bold;
 background:black;
 padding:30px;
}

Mehrspaltiger Text (multi-column-layout) mit CSS 3

Mehrspaltiger Text (multi-column-layout) mit CSS 3

Mehrspaltiger Text ist mit aktuellem CSS und dynamischen Content ein echter Krampf. CSS3 schafft hier Abhilfe und fügt die Eigenschaft „multi-column-layout“ ein. Nun kann auch im Web der Text in mehreren Spalten dargestellt werden.

Die Funktion beinhaltet erneut mehrere Eigenschaften: Es kann die Spaltenbreite (column-width), der Spaltenabstand (column-gap) und die Spaltenzahl (column-count) angegeben werden. Ebenso kann zwischen den Spalten eine Linie (column-rule) definiert werden.

Benutzer von Firefox und Safari können den Effekt beim folgenden Beispiel erkennen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Für diesen dreispaltigen Absatz habe ich folgenden Code verwendet:


p {
 -moz-column-count: 3; /* mozilla prefix */
 -webkit-column-count: 3; /* safari prefix */
 -moz-column-gap: 15px; /* mozilla prefix */
 -webkit-column-gap: 15px; /* safari prefix */
 -moz-column-rule: 1px solid #aea898; /* mozilla prefix */
 -webkit-column-rule: 1px solid #aea898; /* safari prefix */
}

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 29 Kommentare

  1. Dominik
    schrieb am 12.04.2011 um 19:56 Uhr:

    Wäre cool wenn da noch mehr kommt^^

    Antworten
  2. Google startet eigenen Browser namens "Chrome" | kulturbanause blog
    schrieb am 03.04.2011 um 21:26 Uhr:

    […] Die gute Nachricht zu Beginn: Neben dem Apple Browser Safari nutzt auch Google Chrome die Open Source Bibliothek "Webkit". Webkit eröffnet umfangreiche Möglichkeiten wie beispielsweise CSS3 Unterstützung, sofern man die entsprechenden Befehle kennt. In meinem Artikel zu CSS3 könnt Ihr Euch einige davon anschauen. […]

    Antworten
  3. Dominik
    schrieb am 27.03.2011 um 12:04 Uhr:

    Ich würde das jetzt schon alles so gerne verwenden das Problem ist nur es dauert noch soooo lange bis das jeder sehen kann und jeder den aktuellsten Browser unterstützt wirklich schade denn es sind wirklich tolle neue Funktionen.

    Antworten
    • Jonas Hellwig
      schrieb am 27.03.2011 um 12:10 Uhr:

      @Dominik: Das sehe ich nicht so. Ich setze CSS3 in allen Projekten ein. Auch diese Seite hier ist mit richtig viel CSS3 gestaltet. In älteren Browsern oder dem IE<9 sieht es dann eben nicht so schön aus – funktioniert aber trotzdem.

      Antworten
  4. Andreas
    schrieb am 29.01.2011 um 17:47 Uhr:

    Die Möglichkeiten von CSS 3 erfüllen endlich die Träume von jedem, der etwas im Web baut. Schaut mal mit aktuellem Firefox oder Chrome auf diesen Blog mit Musik Reviews, da sieht man in praktischer Anwendung, was alles möglich ist. Runde Ecken, Transparenzeffekte, Farbverläufe, Schatten, CSS3-Buttons. Eine wahre Freude!

    Antworten
  5. Weekly Links #22. | claudio schwarz – c.schwarz – claudioschwarz.com
    schrieb am 03.06.2010 um 10:22 Uhr:

    […] Einführung in CSS3 Alles was man wissen muss. […]

    Antworten
  6. CSS3 als Photoshop Ersatz? Buttons und Grafiken. | kulturbanause blog
    schrieb am 02.05.2010 um 11:25 Uhr:

    […] ist zurecht in aller Munde und ich habe bereits vor einiger Zeit die neuen Möglichkeiten von CSS3 aufgegriffen. In letzter Zeit haben sich jedoch die allgemeinen Blog-Posts zum Thema CSS3 Buttons […]

    Antworten
  7. Maximusweb
    schrieb am 17.04.2010 um 14:45 Uhr:

    Nun bin ich nur noch gespannt wann sich auch ie an solche Standards hält…

    Antworten
  8. CSS3-Wiederholung: Rounded corners | kulturbanause blog
    schrieb am 26.10.2009 um 20:27 Uhr:

    […] einiger Zeit habe ich ja bereits ein paar CSS3-Features vorgestellt. Nichts desto trotz möchte ich Euch diesen kurzen Artikel vorstellen der ausschließlich die […]

    Antworten
  9. Thomas Weise
    schrieb am 07.09.2009 um 19:29 Uhr:

    He, dein Design haut mich ja von den Socken (das musste ig gleich ma loswerden).
    Jetz les ich erstmal deinen Artikel ;-)

    Antworten
  10. Lukas
    schrieb am 26.05.2009 um 18:29 Uhr:

    Danke für den Kurzeinblick.
    Ich surfe gerade mit Google Chrome und kann auch alle CSS3-Features sehen!
    Grüsse!

    Antworten
  11. euler
    schrieb am 16.01.2009 um 16:57 Uhr:

    hi was für eine tolle seite mir ist beim anblick kalt geworden .

    hast du ein link wo css befhele steen die chrom ander ferstet

    Gruss Heuler

    Antworten
  12. CSS3 - Vor dem Endspurt? | Webzeugkoffer Webdesign
    schrieb am 14.12.2008 um 16:29 Uhr:

    […] Zum Zeitvertreib für Zwischendurch und zum Träumen bietet sich der Artikel des Kulturbanausen an: Einführung in CSS3 […]

    Antworten
  13. Tobias
    schrieb am 04.10.2008 um 19:12 Uhr:
  14. Jonas
    schrieb am 04.09.2008 um 15:15 Uhr:

    @Jan: Die offizielle Veröffentlichung kann leider keiner auch nur annähernd erahnen. Das W3C ist da bekanntermaßen etwas .. langsam.
    Wenn CSS3 bereits jetzt eingesetzt wird, dann sinnvollerweise als i-Tüpfelchen für eine Seite. Die Seite sollte in jedem Fall auch ohne CSS3 optimal dargestellt werden.

    Antworten
  15. jan
    schrieb am 04.09.2008 um 11:47 Uhr:

    Danke für den guten Artikel! Wann kann man den mit einer offiziellen Veröffentlichung von CSS3 rechnen? Und macht es denn jetzt schon Sinn CSS3 mit in die Stylesheets zu schreiben?

    Antworten
  16. Elli
    schrieb am 05.08.2008 um 21:11 Uhr:

    Finde ich richtig gut in Firefox implementiert. Aber ich habe ca. 60 % Internetexplorer-Besucher und der Rest Firefox – es hält sich also die Waage. Eine Zwischenlösung muss her..

    Antworten
  17. Moris Müller
    schrieb am 01.08.2008 um 11:48 Uhr:

    Einiges von CSS 3 wurde in Firefox bereits gut implementiert.
    Wenn eine Webseite einen hohen Anteil an Besuchern mit Firefox hat, dann lohnt es sich CSS 3 schon jetzt zu verwenden.

    Antworten
  18. Matthias MAuch
    schrieb am 26.07.2008 um 20:04 Uhr:

    Als Ergänzung sollte vielleicht erwähnt werden, das die

    -moz-*
    -webkit-*

    Erweiterungen der Browserhersteller sind und nach einer Validierung mit dem W3C Validatoren als fehlerhaft markiert werden. Sie entsprechen zwar in den meisten Fällen den W3C CSS 3 Elemente, sind aber Browserabhängig und nicht offiziell.

    Antworten
  19. Daishi
    schrieb am 20.07.2008 um 12:44 Uhr:

    Hey super, mal schauen ob ich von css3 was verwenden will. :D

    Bitte mehr! :D ;)

    Antworten
  20. Kleine CSS 3 Code-Beispiele « WEBKRAM.de
    schrieb am 19.07.2008 um 01:31 Uhr:

    […] bin grad über einen Beitrag des Kulturbanausen gestolpert, der eine kleine Einführung in CSS 3 mit Codebeispielen bereit hält. Ich kenne diese Dinge zwar schon, aber ich möchte sie euch nicht […]

    Antworten
  21. Ausblick auf CSS 3
    schrieb am 18.07.2008 um 11:55 Uhr:

    […] Jonas Helwig hat in seinem außergewöhlich schön und originell gestaltetem Blog, mit dem ebenso originellen Namen “Kulturbanause.de” einige CSS-Elemente unter die Lupe genommen. [anschauen] […]

    Antworten
  22. Ausblick auf CSS 3
    schrieb am 18.07.2008 um 11:55 Uhr:

    […] Jonas Helwig hat in seinem außergewöhlich schön und originell gestaltetem Blog, mit dem ebenso originellen Namen “Kulturbanause.de” einige CSS-Elemente unter die Lupe genommen. [anschauen] […]

    Antworten
  23. Jens
    schrieb am 18.07.2008 um 10:52 Uhr:

    Hallo Jonas,
    bei Punkt 4 habe ich etwas total durcheinander gebracht, sorry! Ich wollte auf die neue Funktion border-outline hinweisen. Das ist ein Attribut, was zusätzlich zum normalen Rand (border) noch eine Umrandung um ein Element zeichnet und individuell gestaltet werden kann. Mehr dazu erfährt man auf der im oberen Kommentar verlinkten Seite bei Mozilla. Das erwähnte Attribut gibt es ja schon „ewig“ und das kann sogar der IE ;-)
    Sorry, nochmals!

    Gruß,
    Jens

    Antworten
  24. Jonas
    schrieb am 18.07.2008 um 09:55 Uhr:

    @ Jens: Danke für den Tip mit KHTML, wusste ich bisher nicht. Was die fehlerhafte Darstellung des multi-column-layout angeht so passieren da auch mit Text pur wirklich unschöne Sachen.
    Was Details wie einzelne Ecken etc. angeht so wollte ich bei diesem Einführungsartikel nicht weiter darauf eingehen. Ich habe auf jeden Fall Fortsetzungen in Planung.

    Antworten
  25. Jens
    schrieb am 18.07.2008 um 09:50 Uhr:

    Hallo Jonas,
    so ein Zufall! Einen ähnlichen Artikel hatte ich fürs Wochenende geplant. Schön, dass Du es schon getan hast! Hier noch einige Tipps, die ich auf meiner Liste hatte:
    1. Wenn man bei border-radius noch -khtml-border-radius hinzunimmt, hat man fast alle Browser mit diesem Feature abgedeckt (außer dem IE natürlich).
    2. Mit border-radius-[topleft][topright][bottomleft][bottomright] können mit dem Firefox gezielt die einzelnen Ecken angesprochen werden
    3. Mehrspaltige Layouts haben mich auch fasziniert, aber da ist schon noch Entwicklungsarbeit gefragt. Probiere mal, ein Bild einzufügen, welches über die Spaltenbreite hinausgeht. Das sieht grausam aus! ;-)
    4. Was auch schon im FF funktioniert: separate Farben für jede Seite festlegen mit -moz-border-[top][right][bottom][left]-color, so können z.B. 3D-Effekte für buttons simuliert werden.
    5. Es empfiehlt sich, diese Anweisungen in eine separate CSS-Datei auszulagern, so bleibt die Hauptdatei W3C-konform.
    6. Eine schöne Übersicht für den Firefox, wenn auch noch nicht komplett dokumentiert, findet man auf http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
    Ansonsten ist das ein toller Artikel, werde den gerne weiterempfehlen!

    LG,
    Jens

    Antworten
  26. STK
    schrieb am 18.07.2008 um 02:09 Uhr:

    Schön … ich freu mich. Und wieder etwas, wo Microsoft hinterherhinken wird. Aber naja … der Vorsprung der Guten muss ja gewahrt werden. :)

    Antworten
  27. Matthias
    schrieb am 17.07.2008 um 22:56 Uhr:

    Absolut geil, ich kann’s kaum abwarten.

    Echt toller Artikel, Jonas!

    Antworten
  28. Adrian
    schrieb am 17.07.2008 um 22:44 Uhr:

    Super klasse! Danke dafür. Wieder was gelernt :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →