SIEBEN – WordPress-Theme | Olli's Theme-Testblog

  • Mein Facebook-Profil
  • Mein Twitter-Profil
  • Mein Google+-Profil
  • Mein Xing-Profil
  • Mein Last.fm-Profil
  • Mein Youtube-Profil
  • Hol dir den RSS-Feed
Navigation anzeigen ↓
  • Herzlich willkommen
  • Shortcodes
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • Gästebuch
  • Impressum
  • ↑ Menü schließen

    Meistkommentierte Artikel

    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 1
      53
    • 14. Mai 2010
      [WordPress] Ein Gästebuch ohne Plugins
      27
    • 30. Dezember 2011
      [XBMC] Der ultimative Einsteiger-Guide - Teil 2
      15
    • 29. Juli 2011
      Hannspree Hannspad SN10T1 und die Custom Roms
      12

    [CSS3] Schatten mit „text-shadow“ und „box-shadow“

    26. April 2011 0 Webdesign css | demo | html | internet | tutorial

    Wie der Name schon vermuten lässt, versieht die Eigenschaft „text-shadow“ Text mit einem Schlagschatten, „box-shadow“ dagegen, stellt Blockelemente mit einem Schlagschatten dar. Mit diesen neuen CSS3-Eigenschaften lassen sich viele lustige Dinge darstellen. Aber seht selbst…

    Die Eigenschaft „box-shadow“

    Syntax

    .box {
    box-shadow: 10px 10px 5px #999;
    }
    

    Shorthand

    Kürzer geht’s nicht.

    Browserunterstützung

    .box {
    -moz-box-shadow: 10px 10px 5px #999;
    -webkit-box-shadow: 10px 10px 5px #999;
    box-shadow: 10px 10px 5px #999;
    }
    
    • Apple Safari 5+
    • Google Chrome 10+
    • Internet Explorer 9+
    • Mozilla Firefox 3.6+
    • Opera 11.1+

    Beschreibung

    Analysieren wir mal das Beispiel:

    .box1 {
    -moz-box-shadow: 10px 10px 5px #999;
    -webkit-box-shadow: 10px 10px 5px #999;
    box-shadow: 10px 10px 5px #999;
    }
    

    1. Wert = Verschiebung X-Achse in Pixel
    2. Wert = Verschiebung Y-Achse in Pixel
    3. Wert = Blur Radius in Pixel (mit Wert 0 ist der Schatten scharf, je höher der Wert, desto unschärfer)
    4. Wert = Farbe des Schattens

    Ein Schlagschatten nach innen lässt sich ebenfalls darstellen. Ergänzt einfach den obigen Befehl um ein inset:

    .box2 {
    -moz-box-shadow: inset 2px 2px 5px #999;
    -webkit-box-shadow: inset 2px 2px 5px #999;
    box-shadow: inset 2px 2px 5px #999;
    }

    Zu diesen fünf Parametern gesellt sich ein optionaler sechster, der zusätzlich die Länge des Schattens bestimmt.

    .box3 {
    -moz-box-shadow: 10px 10px 5px -5px #999;
    -webkit-box-shadow: 10px 10px 5px -5px #999;
    box-shadow: 10px 10px 5px -5px #999;
    }
    

    Auch möglich: mehrere Schatten für eine Box. Trennt die Schatten einfach durch ein Komma:

    .box4 {
      -moz-box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
      -webkit-box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
      box-shadow: 5px 5px 5px #999, -5px -5px 5px #555;
    }
    

    Soll nur eine Seite „beschattet“ werden, erreicht ihr das mit einem identischen Wert für Blur-Radius und Schattenlänge (gleicher Wert im Minus).

    Nur untere Seite:

    .box5 {
    -moz-box-shadow: 0 10px 6px -6px #333;
    -webkit-box-shadow: 0 10px 6px -6px #333;
    box-shadow: 0 10px 6px -6px #333;
    }
    

    Nur rechte Seite:

    .box6 {
    -moz-box-shadow: 10px 0 6px -6px #333;
    -webkit-box-shadow: 10px 0 6px -6px #333;
    box-shadow: 10px 0 6px -6px #333;
    }
    
    Demo ansehen

    Die Eigenschaft „text-shadow“

    Syntax

    .text {
    text-shadow: 2px 2px 5px #999;
    }
    

    Shorthand

    Kürzer geht’s nicht.

    Browserunterstützung

    • Apple Safari 5+
    • Google Chrome 10+
    • Mozilla Firefox 3.6+
    • Opera 11.1+

    Beschreibung

    Der Text-Schatten ist eines der wenigen CSS3-Eigenschaften, die keine browser-spezifischen Präfixe benötigen. Der Aufruf erfolgt mit

    .text {
    text-shadow: 5px 5px 5px #999;
    }
    

    Die Parameter für text-shadow sind identisch zum box-shadow. Allerdings gibt es hier weder die optionale Längenangabe des Schattens noch den Parameter inset. Dennoch kann man einen pseudo-invertierten Schatten erzeugen. Dazu mehr auf der Demo-Seite.

    Demo ansehen

    Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:

    Übersicht CSS3
    Diese Artikel könnten dich ebenfalls interessieren
    • 1
      22. Mai 2012
      [WordPress] Theme „DREI“ steht bereit
    • 0
      19. Mai 2012
      [WordPress] Mehrere Sidebars nutzen
    • 1
      9. Mai 2012
      [WordPress] Mein neues Theme ‚ZWEI‘
    • 1
      23. April 2012
      [WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

    Dein Kommentar zu diesem Artikel

    Abbrechen

    Du musst angemeldet sein, um einen Kommentar abzugeben.

    ← vorheriger Artikel
    nächster Artikel →
    • Archive

      • Juni 2012
      • Mai 2012
      • April 2012
      • März 2012
      • Februar 2012
      • Januar 2012
      • Dezember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • August 2011
      • Juli 2011
      • Juni 2011
      • Mai 2011
      • April 2011
      • März 2011
      • Februar 2011
      • Januar 2011
      • Dezember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • August 2010
      • Juli 2010
      • Juni 2010
      • Mai 2010
      • April 2010
      • Februar 2010
      • Januar 2010
      • Dezember 2009
      • November 2009
      • Oktober 2009
    • Meta

      • Anmelden
      • Beitrags-Feed (RSS)
      • Kommentare als RSS
      • WordPress.org
    • Neueste Beiträge

      • Willkommen zur Testfahrt
      • Letzte Chance nach einem Festplattencrash
      • Kleinstrechner MK802 mit Ice Cream Sandwich; gar nicht mal so teuer
      • [WordPress] Theme „DREI“ steht bereit
      • [WordPress] Mehrere Sidebars nutzen
    • Neueste Kommentare

      • Oliver bei Willkommen zur Testfahrt
      • Olli bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Lars bei [XBMC] Der ultimative Einsteiger-Guide – Teil 1
      • Martin bei Kreiert euren eigenen Button und teilt diesen mit anderen
      • rainer bei [CSS3] Vom Lupeneffekt und drehenden Icons mit „transform“
    • Kategorien

      • Gaming
      • Grafik
      • Sicherheit
      • Sonstiges
      • Technik
      • Web
      • Webdesign
    • Schlagwörter

      active directory android apple css demo dsl dvb games gimp guides hardware html id3-tag internet ipad iphone itunes littlebigplanet medienfreigabe modnation racers mp3 nas office phishing php playstation 3 plugins psn spam sql tablet tutorial tv twonky media server update upnp videos windows 7 windows media player windows server windows vista wlan wordpress xbmc xbox 360

    Seitenanfang ↑

    239 Artikel | 293 Kommentare

    Artikel RSS-Feed | Kommentar RSS-Feed

    © SIEBEN – WordPress-Theme angetrieben von WordPress

    Theme 'SIEBEN' von Oliver Gast