Forum - Glow - Leuchtender Text mit CSS3 "text-shadow"

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Glow - Leuchtender Text mit CSS3 "text-shadow" - Teil 1+3!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Glow - Leuchtender Text mit CSS3 "text-shadow" - Teil 1+3! datum

27.02.2017 00:16 (zuletzt bearbeitet: 06.05.2023 23:11)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Glow - Leuchtender Text mit CSS3 "text-shadow" - Teil 1!
Aktualisiert 06.05.23

Ab den Browser-Versionen Internet Explorer 10, FireFox 3.5, Google Chrome 4 und Opera 9.6 ist es möglich die CSS3-Formatierung zu nutzen.
Mit Hilfe von text-shadow lassen sich viele Text-Effekte darstellen, unter anderem, beschrieben in Teil 1, ein glühender, bzw. leuchtender Text!

Einbau in die Iconbar mit eigener Gruppe:

Iconbar aufrufen unter "Admin > Layout > Iconbar"
Gruppe anlegen mit Namen (z.B. Glow), Breite (220px), Grafik (https://files.homepagemodules.de/b104774/a_537_e5e95b15.jpg)
"Weitere Einstellungen" öffnen und unter "Versatz", "-170px" eintragen!
Wenn notwendig, die Gruppe an eine passende Stelle verschieben!
Unter "HTML", Namen (z.B. Glühender Text) vergeben und in das Textfeld "HTML" die unten stehenden Zeilen 1-19 eintragen!
Den erstellten HTML-Code in die erstellte Gruppe "Glow" schieben!

Einbau in die Iconbar in Gruppe "Farben":

Iconbar aufrufen unter "Admin > Layout > Iconbar"
Unter "HTML", Namen (z.B. Glühender Text) vergeben und in das Textfeld "HTML" die unten stehenden Zeilen 1-15 eintragen!
Den erstellten HTML-Code in die Gruppe "Farben" unter die Reihe [schwarz] [/schwarz] schieben!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<br>
 
<div style="margin: -5px 0 10px 0;clear:both;cursor:pointer; display:flex; ">
 
<div title="Rot" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red;color:#333333;padding:0 5px 0 5px;">Rot</span></div>
 
<div title="Blau" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue;color:#333333;padding:0 5px 0 5px;">Blau</span></div>
 
<div title="Grün" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green;color:#333333;padding:0 5px 0 5px;">Grün</span></div>
 
<div title="Gelb" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 70px yellow]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 70px yellow;color:#333333;padding:0 5px 0 5px;">Gelb</span></div>
 
<div title="Gold" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 70px #d49f00]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 70px #d49f00;color:#555555;padding:0 5px 0 5px;">Gold</span></div>
 
<div title="Weiss" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;padding:0 5px 0 5px;">Weiss</span></div>
 
<div title="Schwarz" onclick="xob_insert('[style=letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee]','[/style]')"><span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee;padding:0 5px 0 5px;">Schwarz</span></div>
 
</div>
 

Schlie�en

Iconbar:
• Große Farbauswahl / Super Color-Picker - Mit Glow-Effekt erweitert!

Online-Generator:
• Text Shadow Generator

Weitere interessante Links zur Iconbar:

  • Meine komplette Forum-Iconbar zum herunterladen
  • Beiträge nur für Mitglieder in der neuen Iconbar
  • Versteckte Kommentare in Forum-Beiträgen nutzen!
  • Smileys in der Schnellantwort
  • Glow - Leuchtender Text mit CSS3 "text-shadow"
  • Kleine Bildergalerie in der Iconbar
  • Kopiersperre / Markierungssperre / Eigenes Kontextmenü
  • Iconbar fixieren - gut für lange Beiträge
  • Suche "Iconbar"
  • Große Farbauswahl - Super Color-Picker

Bis dann und viel Erfolg beim Umsetzen!

Wolfgang

Antworten

#2 | Schatten - 3D-Effekt mit CSS3 "text-shadow" - Teil 2! datum

27.02.2017 00:46 (zuletzt bearbeitet: 24.03.2019 23:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Schatten - 3D-Effekt mit CSS3 "text-shadow" - Teil 2!
Aktualisiert 26.08.22

In Teil 2 wird die Iconbar mit einem 3D-Effekt erweitert!
Er kann in ein vorhandenes DropDown-Menü geschoben werden oder mit einem eigenen Icon aufgerufen und in den Beitrag eingefügt werden!

Einbau in die Iconbar mit eigenem Icon:

Iconbar aufrufen unter "Admin > Layout > Iconbar"
Unter "HTML", Namen (z.B. 3D-Schrift) vergeben und in das Textfeld "HTML" die unten stehende Zeile 1 eintragen!
Wenn notwendig, den erstellten HTML-Code an eine passende Stelle verschieben!

1
 
<div onclick="xob_insert('[style=text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;]','[/style]')" class="xob_icon_cont"><img alt="3D-Schrift" title="3D-Schrift" class="xob_icon" src="https://files.homepagemodules.de/b104774/bhnetfiles-kr03-7w-cd2f.jpg"></div>

Schlie�en

Erweiterung DropDown-Menü:

• Die folgende Zeile 1 braucht nur in ein vorhandenes DropDown-Menü (mit "<option></option>") eingefügt werden!

1
 
<option value="xob_insert('[style=text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;]','[/style]')" style="text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;font-size:16px;font-family:verdana;">Text-Schatten</option>

Schlie�en

Online-Generator:

• Text Shadow Generator (Realistic 3D)

Bis dann und viel Erfolg beim Umsetzen!

Wolfgang

Antworten

#3 | Forencode minimieren - CSS3 "text-shadow" - Teil 3! datum

01.03.2017 07:11 (zuletzt bearbeitet: 24.03.2019 23:19)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Forencode minimieren - CSS3 "text-shadow" - Teil 3!

Die Forencodes der in Teil 1 und Teil 2 vorgestellten Texteffekte, sind sehr lang und können das Editieren eines Beitrages unübersichtlich machen und erschweren!
Die vorgestellten Varianten haben allerdings den Vorteil, dass man die Effekte noch nachträglich anpassen und verändern kann!
Habe die Foprencodes nochmal um "leuchtendes Weiss & Schwarz" erweitert!
Der Foren-Code für leuchtend Rot würde dann so aussehen:

[leuchtrot] ... [/leuchtrot]

Minimierter Forencode für die Leuchtschrift:

  • Iconbar aufrufen unter "Admin > Layout > Iconbar ".
  • Reiter "Forencode" anklicken!
  • Untenstehende Forencodes eintragen!
  • Sollten die Forencodes nicht umgesetzt werden, "Weitere Einstellungen" aufrufen und in "Reihenfolge" eine Null eintragen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
Ersetze: [leuchtrot] ... [/leuchtrot]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px red, 0 0 14px red, 0 0 16px red, 0 0 25px red, 0 0 60px red, 0 0 80px red;"> ... </span>
 
Ersetze: [leuchtblau] ... [/leuchtblau]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px blue, 0 0 14px blue, 0 0 16px blue, 0 0 25px blue, 0 0 60px blue, 0 0 80px blue;"> ... </span>
 
Ersetze: [leuchtgruen] ... [/leuchtgruen]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px green, 0 0 14px green, 0 0 16px green, 0 0 25px green, 0 0 60px green, 0 0 80px green;"> ... </span>
 
Ersetze: [leuchtgelb] ... [/leuchtgelb]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px yellow, 0 0 14px yellow, 0 0 16px yellow, 0 0 25px yellow, 0 0 60px yellow, 0 0 70px yellow;"> ... </span>
 
Ersetze: [leuchtgold] ... [/leuchtgold]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 25px white, 0 0 25px white, 0 0 10px #d49f00, 0 0 14px #d49f00, 0 0 16px #d49f00, 0 0 25px #d49f00, 0 0 60px #d49f00, 0 0 70px #d49f00;"> ... </span>
 
Ersetze: [leuchtweiss] ... [/leuchtweiss]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px white, 0 0 14px white, 0 0 16px white, 0 0 25px white, 0 0 60px white, 0 0 80px white;color:#222222;"> ... </span>
 
Ersetze: [leuchtschwarz] ... [/leuchtschwarz]
Mit: <span style="letter-spacing: 0.08em; text-shadow: 0 0 20px white, 0 0 20px white, 0 0 10px black, 0 0 14px black, 0 0 16px black, 0 0 25px black, 0 0 60px black, 0 0 80px black;color:#eeeeee;"> ... </span>
 

Schlie�en

Minimierter Forencode für die 3D-Schrift:

1
2
 
Ersetze: [3d-schrift] ... [/3d-schrift]
Mit: <span style="text-shadow: 1px 1px 0px #aaaaaa, 1px 2px 0px #a7a7a7, 1px 3px 0px #999999;"> ... </span>
 

Schlie�en

Einbau in die Iconbar:

  • Iconbar aufrufen unter "Admin > Layout > Iconbar "
  • Wie in Teil 1 + Teil 2 beschrieben alles eintragen!
  • Neuen Forencode wie folgt ersetzen !

1
2
3
4
5
6
7
8
9
 
z.B.:
Ersetze:
...... ('[style=....]','[/style]') .......
 
Mit:
...... ('[leuchtrot]','[/leuchtrot]') .......
 
Oder:
..... ('[3d-schrift]','[/3d-schrift]') ......
 

Schlie�en

Wolfgang

Antworten

Laufschriften mobil ausblenden! � � Schneeflocken im Forum mit JavaScript und Marquee

�hnliche Themen

Antworten

Letzter Beitrag

Versuche den HTML - Code zu teilen - Spoiler für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

24.09.2024 19:04
von

Anne • Zugriffe: 920

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 1936

Xobor-Webfonts fürs Forum installieren
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 4 02.01.2022 22:49
Mato • Zugriffe: 572

Für die Iconbar: Smileys mit einstellbarer Größe!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

02.02.2020 15:37
von

Wolfgang • Zugriffe: 1144

Multi-Dialog-Assistent für die Iconbar
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 20 16.11.2024 08:53
Anne • Zugriffe: 10242

Iconbar: "Inhalte integrieren" und "addPics" ausblenden!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

10.12.2023 14:14
von

Nara • Zugriffe: 3079

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.06.2023 18:30
von

Kipper-Spedition • Zugriffe: 2292

Text-Effekte / Teil 1-4
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Jürgen 12 07.12.2021 22:04
Wolfgang • Zugriffe: 4253

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

29.05.2024 10:24
von

Wolfgang • Zugriffe: 2371

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

36%