kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI â€¦

Einführung in CSS 3

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".

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!


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 */
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

29 Kommentare

  1. Adrian

    Verfasst am 17. Juli 2008 um 22:44 Uhr.

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

  2. Matthias

    Verfasst am 17. Juli 2008 um 22:56 Uhr.

    Absolut geil, ich kann’s kaum abwarten.

    Echt toller Artikel, Jonas!

  3. STK

    Verfasst am 18. Juli 2008 um 2:09 Uhr.

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

  4. Jens

    Verfasst am 18. Juli 2008 um 9: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

  5. Jonas

    Verfasst am 18. Juli 2008 um 9: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.

  6. Jens

    Verfasst am 18. Juli 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

  7. Daishi

    Verfasst am 20. Juli 2008 um 12:44 Uhr.

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

    Bitte mehr! :D ;)

  8. Matthias MAuch

    Verfasst am 26. Juli 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.

  9. Moris Müller

    Verfasst am 1. August 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.

  10. Elli

    Verfasst am 5. August 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..

  11. jan

    Verfasst am 4. September 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?

  12. Jonas

    Verfasst am 4. September 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.

  13. Tobias

    Verfasst am 4. Oktober 2008 um 19:12 Uhr.

    Hab dich mal auf http://www.tobiaskoelligan.de/html-und-css/einfuehrung-in-css-3/ verlinkt :)

  14. euler

    Verfasst am 16. Januar 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

  15. Lukas

    Verfasst am 26. Mai 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!

  16. Thomas Weise

    Verfasst am 7. September 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 ;-)

  17. Maximusweb

    Verfasst am 17. April 2010 um 14:45 Uhr.

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

  18. Andreas

    Verfasst am 29. Januar 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!

  19. Dominik

    Verfasst am 27. März 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.

    • Jonas Hellwig

      Verfasst am 27. März 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.

  20. Dominik

    Verfasst am 12. April 2011 um 19:56 Uhr.

    Wäre cool wenn da noch mehr kommt^^

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.