• News
  • Ratgeber
  • Vergleiche
  • Tests
  • Business & IT
Kurze Auszeit?
Entdecken Sie 
Jetzt spielen!
  • Home
  • Bildergalerie
  • Webseiten verschönern

Galerie

Webseiten verschönern - Webseiten verschönern

11.10.2011 von Sven Hähle

Rechnen mit Datums- und Zeitangaben
© PCMagazin

Webseiten verschönern

Tipp 1: Schatten für Container und Texte

Mit dem CSS3-Attribut box-shadow fügen Sie Containern (<div>-Boxen) Schatten hinzu. Sein Pendant für Textelemente heißt text-shadow.

Aktuelle Browser unterstützen box- und text-shadow: IE 9, Firefox 4, Google Chrome 10 und Safari 5 interpretieren beide CSS3-Eigenschaften. Die Webkit-Browser benötigen ihr Prefix, ebenso Firefox einschließlich 3 Version. Die Notation dafür lautet:

#Schattenbox {
box-shadow: 5px 5px 3px #eee; /* aktuelle Browser */
-webkit-box-shadow: 5px 5px 3px #eee; /* Webkit */
-moz-box-shadow: 5px 5px 3px #eee; /* Firefox <=3 */ }

Das Beispiel fügt dem<div>-Element Beispielbox links und unten einen fünf Pixel breiten Schatten im Grauton #eee hinzu. Dabei verwenden Sie einen Unschärfe-Radius von drei Pixeln. Der erste Wert steht für den horizontalen Schatten. Ist er positiv, wird der Schatten rechts dargestellt, ist er negativ, dann links. Der zweite Wert steht für den vertikalen Schatten.

Positive Werte bedeuten: Schatten unten, negative Werte: Schatten oben. Der dritte Wert gibt den Unschärfe-Radius an (Blur). Für einen inneren Schatten hängen Sie die box-shadow Eigenschaft :inset an. Setzen Sie den ersten und zweiten Wert auf 0, malen Sie an allen vier Seiten der Box einen inneren Schatten mit dem angegebenen Blur-Wert:

#Innenschatten {
box-shadow: 0 0 10px #ccc; /* aktuelle Browser */
-webkit-box-shadow: 0 0 10px #ccc; /* Webkit */
-moz-box-shadow: 0 0 10px #ccc; /* Firefox <=3 */ }

Mit dem Attribut text-shadow schattieren Sie Textelementen bei gleicher Werte-Zuordnung. Sehen Sie dafür die dreifache Notation:

.Textschatten {
text-shadow: 1px 1px 2px #eee; /* aktuelle Browser */
-webkit-text-shadow: 1px 1px 2px #eee; /* Webkit */
-moz-text-shadow: 1px 1px 2px #eee; /* Firefox <=3 */ }

Dies erzeugt eine CSS-Klasse Textschatten für HTML-Tags wie <p>, <h1>, <h2>, um deren Inhalte leicht grau zu schattieren.

Weiter zur Startseite  

Die neue Ausgabe

PC Magazin Super Premium 08/2022

Die neue Ausgabe ist da

Ausgabe 08/2022 jetzt online bestellen

!Windows XXL, 10 Tipps gegen Download-Fallen, Internet-Zensur, Mobilfunk Discounter 2022 u.v.m.

Zum Kiosk in Ihrer Nähe

MyKiosk: So finden Sie einen Kiosk in Ihrer Nähe, der Ihr Lieblings-Magazin führt

Service

Haben Sie das neue PC Magazin schon?

!MyKiosk: So finden Sie einen Kiosk in Ihrer Nähe, der Ihr Lieblings-Magazin führt

Aktuelle Gutscheine

Gutscheine

Eneba – Rabattcode für Spiele, PSN etc.

Gutscheine

Galaxus – Smartphones, Haushalt, u.v.m.

Gutscheine

Lieferando - Lieferservice mit Rabatt

Gutscheine

Aktuelle Rabattcodes, Coupons, Angebote

Lohnt es sich?

Amazon BlitzangeboteAktion Overlay

Hardware, Software und mehr

Amazon-Angebote: Nanoleaf, Huawei FreeBuds Pro 2, Xiaomi 11…

!Die aktuellen Highlights der Amazon-Angebote sind heute: Nanoleaf, Huawei FreeBuds Pro 2, Xiaomi 11 Lite 5G und mehr.

Jobsuche

Jobbörse: Die richtige Stelle finden

IT-Jobbörse

Finden Sie Ihren Traumjob mit Business & IT

!Jobb&ouml;rse: Die richtige Stelle finden

Jobs von PC-Magazin.de

IT-Bereich

Jobs als Netzwerk- und Systemadministrator

Software-Entwicklung

Jobs als Webentwickler oder Web-Developer

Projekte und Produktmanagement

Jobs als IT-Projektmanager

Tests & Kaufberatung

Korb oder Krönung?

Corsair TC200 im Test: Das neue Modell

SATA III Drive

HP SSD S650 im Test
78,0%

Smartwatch

Xiaomi Redmi Watch 2 Lite im Test - Günstiges Fitnessarmband

Notebook über 1000 Euro

Asus Zenbook 14X OLED im Test: Eleganz mit OLED-Display
96,0%

Immer aktuell informiert

Brief

Jetzt bestellen!

Kostenlose Newsletter

!Newsletter

Anzeige

Zum Seitenanfang
  • News
  • Ratgeber
    • Windows
    • Sicherheit
    • Online
    • Hardware
    • Software
    • Office
    • Heimkino
    • Fotografie
    • Heimvernetzung
    • Alle Ratgeber
  • Vergleiche
    • PC
    • Heimkino
    • Fotografie
    • Alle Vergleiche
  • Tests
    • Hardware
    • Software
    • Netzwerk
    • Heimkino
    • Kameras & Zubehör
    • Heimvernetzung
    • Bestenlisten
    • Alle Tests
  • Business & IT
    • IT-Praxis
    • IT-Hardware
    • IT-Software
    • Alle B2B-Themen
  • Downloads
    • Top-Downloads
    • Neuzugänge & Updates
    • Alle Downloads
  • Specials
    • IFA
    • Cebit
    • Themenseiten
    • Games
    • Kachel Chaos Spiel
    • Solitaire
    • Solitär Classic
    • Gewinnspiele
    • Archiv
    • Händlerkarte
  • Service
    • Abo-Shop
    • Kontakt
    • Newsletter
    • Jobbörse
    • Bildergalerien
    • Gutscheine
    • TV-Bestenliste
  • Abos
  • Newsletter
  • RSS
  • Archiv
  • Datenschutz
  • Mediadaten
  • Kontakt
  • Impressum
© 2022 WEKA MEDIA PUBLISHING GmbH. Alle Rechte vorbehalten.