HTML + CSS: Einfache Outline um den Text!
Nur mit HTML und CSS kann man einer Schrift ganz einfach einen schönen Outline-Effekt geben: Einen farbigen Rand um die Text-Zeile herum. Das passt gut für Überschriften, aber auch für Text, der auf einem Bild platziert werden soll und dann so aussehen könnte wie in dem Beispiel-Screenshot oben. Für die CSS Outline definiert man dafür einfach einen Schatten um die Schrift – aber in alle vier Richtungen!
Zunächst definieren wir hier eine Klasse “Outline”, die man später dann zum Beispiel der Überschrift zuweisen kann:
<style stype="text/css"> .outline { color:#FFF; text-shadow: 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; } </style> <h1 class="outline">Überschrift</h1>
Die Outline-Klasse enthält als Textfarbe den Wert “weiß” (#FFF oder #FFFFFF) und als Schatten in alle vier Richtungen den Wert “schwarz” (#000 oder #000000). Möchte man die CSS Outline um den Text weniger stark haben, kann man hier einen Grauwert einsetzen, zum Beispiel #E1E1E1. Natürlich funktioniert aber auch jeder andere Farbwert für den Rand um den Text, den man stattdessen in der Outline-Klasse definiert!
CSS Outline: So sieht sie aus:
Outline-Text mit CSS
- HTML-Text ausdrucken
- HTML Slideshow mit dynamischen Text
- Einfache Auftragsverwaltung und Auftragserstellung
Hallo,ich suche nach einer einfachen Methode Aufträge anzulegen, welche- den Kundenname...
- Einfache Videoschnitt-Software unter Win 10
- Partitionsproblem Einfache Partition zu Primär wandeln
Hallo mein Rechner Windows 8.1 Startet immer noch normal.Nur hat er irgendwie meine C,D und E ...
- Tipps für einfache Smart Home Upgrades :)
- datenschutz (44x gelesen)
- windows-mehr-geschwindigkeit (43x gelesen)
- windows-beschleunigen (40x gelesen)
- windows-schneller-starten-autostart-aufraeumen (38x gelesen)
- pc-einsteigerkurs (25x gelesen)
Mehr Tipps zu HTML + CSS: Einfache Outline um den ...
-
Windows 11: Kostenlose Texterkennung in Bildern
Windows 11 kommt mit praktischer, kostenloser Text-Erkennung: Diese Funktion, auch OCR genannt, kann Text auf Bildern erkennen und hervorheben. Damit lässt er sich in ein...
-
Windows 11: Kostenlose Texterkennung in Bildern
Windows 11 kommt mit praktischer, kostenloser Text-Erkennung: Diese Funktion, auch OCR genannt, kann Text auf Bildern erkennen und hervorheben. Damit lässt er sich in ein...
-
Kostenlose Übersetzungs-App: So kann man Texte leicht übersetzen
Um Texte schnell zwischen verschiedenen Sprachen zu übersetzen, helfen verschiedene Übersetzungs-Apps. Damit lassen sich Texte schnell aus dem Deutschen in eine andere Sprache übersetzen: Außerdem...
-
Word Textfeld erstellen: Tipps und Design-Ideen!
Wenn man in Microsoft Word einen Text frei platzieren möchte, hilft ein Textfeld: Das kann man verschieben, drehen und mit Effekten versehen: Zum Beispiel mit...
-
CSS: Text mit Farbverlauf (ohne Bild)!
Mit HTML und CSS lassen sich Texte ganz einfach mit einem Farbverlauf belegen. Dieser wird dann statt der eigentlichen Textfarbe angezeigt und von allen großen...
-
PHP Include in WordPress: Datei oder Text einbinden!
Mit PHP eigene Dateien oder Programm-Code in einem Wordpress-Beitrag einbauen: So geht's! Mit dem Content-Management-System Wordpress lassen sich schicke Webseiten gestalten, die später von anderen...
HTML + CSS: Einfache Outline um den Text!