Homepage-Hilfe - Effekte

HP-Hilfe-Seite 59 - Effekte

seit 27.09.2006:
seit 18.11.2008:
kostenlose Counter bei xcounter.ch


Schatteneffekte bei Schrift:

Hier möchte ich einige einfache Effekte beschreiben. Ich selbst habe nicht wirklich Ahnung von HTML und noch weniger von CSS, aber mit einfachen Mitteln kann man z.B. einen Schatteneffekt bei einer Überschrift realiesieren. Leider zeigt das meist nur der IE an. Die Effekte sind natürlich einfach nur Schrift, der Hintergrund gehört zu der jeweiligen Seite - es sind screenshots!
schwarze Schrift mit braunem Schatten:
grüne Schrift mit grünem Schatten:
weiße Schrift mit violettem Schatten:
schwarze Schrift mit weißem Schatten:
mittelblaue Schrift mit weißem Schatten:
dunkelblaue Schrift mit schwarzem Schatten:
Mein Beispiel mit einer externen CSS-Datei: in die jeweilige Datei kommt im Head folgender Eintrag:
<link rel="stylesheet" type="text/css" href="../start.css"> das bedeutet, daß die CSS-Datei eine Ebene darunter liegt. Bei gleichem Verzeichnis einfach das "../" weglassen.
An die Stelle, wo der Effekt hinsoll, kommt dann: (mittig)
<div align="center"class="oben">Meine Formel 1-Startseite</div>
oder
<div align="center"class="green">Meine Flora-Startseite</div>
oder
<div align="center"class="vio">Meine Download-Startseite</div>
oder
<div align="center"class="black">Meine Perry Rhodan-Startseite</div>
oder
<div align="center"class="blau">Meine Schiffsdaten-Startseite</div>
oder
<div align="center"class="bleu">Meine Luftfahrt-Startseite</div>
Eine externe Datei ist deshalb besser, weil man evtl. Änderungen nur in EINER Datei vornehmen muß!
Der Inhalt der CSS-Datei:
/* DATEI: start.css */

/* von Diethelm Glaser */

.oben { color: black; filter: shadow(color=#800000, direction=135); font: 30pt bold; width: 100%; }

.vio { color: white; filter: shadow(color=#800080, direction=135); font: 30pt bold; width: 100%; }

.black { color: black; filter: shadow(color=#ffffff, direction=135); font: 30pt bold; width: 100%; }

.green { color: green; filter: shadow(color=#008000, direction=135); font: 30pt bold; width: 100%; }

.blau { color: blue; filter: shadow(color=#FFFFFF, direction=135); font: 30pt bold; width: 100%; }

.bleu { color: blue; filter: shadow(color=#000000, direction=135); font: 30pt bold; width: 100%; }
Man sieht, mit einfachen Mitteln kann man seine HP etwas aufpeppen.

Google
 

Counter-Box.de eXTReMe Tracker

wer die Seite direkt aufgerufen hat, bitte hier klicken, um zur Startseite zu kommen!
Diese Seite wurde am 06. März 2006 erstellt, letzte Änderung am 06. August 2011
© Diethelm Glaser, alle Rechte vorbehalten | Seite 3.298

seit 19.05.2007: seit 13.11.2008: