find-templates

Leuchtreklame

zurück zur Übersicht

animierte Leuchtreklame



für Browser Safari (ab Version 5), Google Chrome (ab 10), Mozilla Firefox ab Version 5

find-templates.de.tl



Schritt 1: Der CSS Code mit den Eigenschaften



Design CSS ? Code einfügen Feld "css ohne style tags"
Alle anderen Baukasten-Designs: Einfügen im Feld "Text über Design", vor dem --></style>




@keyframes neon {
 0% { text-shadow: 0; }
 50% { text-shadow: 0 0 20px #FFFFFF, 2px 2px 10px #FFFFFF,
 2px 2px 10px #006464, 2px 2px 40px #006464,
 2px 2px 70px #006464, 2px 2px 80px #006464,
 2px 2px 100px #006464; }
 100% { text-shadow: 0; }
}

/* Aussehen Text und Hintergrund */
.text {
 color: #FFFFFF;
 background-color: #202020;
 font-size: 52px;
 font-weight: bold;
 padding: 40px;
 overflow: hidden;
 border-radius: 15px;
 animation-name: neon;
 animation-duration: 4s;
 animation-iteration-count: infinite; }

Der Text (im CSS-Code unten bei .text ) hat hier weiße Schriftfarbe (#FFFFFF)
Daher habe ich als erste Schattenfarbe (erste 3 CSS-Codes) ebenfalls weiß (#FFFFFF) gewählt.
Als zweite Schattenfarbe habe ich hier ein Türkis-Ton (#006464;) gewählt.
Beide Farben könnt Ihr natürlich frei bestimmen / anpassen an eure Textfarbe



Schritt 2: HTML-Code für den Text


Im Seiteninhalt einfügen (im Editor auf "Quellcode" klicken) : 

<p class="text"> HIER DEIN TEXT </p>




Geht das mit dem Titel im Header ?


Header-Titel mit Leuchteffekt ? Auch das ist möglich.
Ihr benötigt dann nur den CSS-Code von Schritt 1.

  • siehe im CSS-Code die Klasse .text
  • Klassennamen einfach umbenennen
  • Design Iceblue ? Titel im Header hat Klasse .headline
  • Design CSS ? Titel im Header hat ID #header
  • ihr müsstet auch das padding: 40px; entfernen
  • ihr müsstet die Hintergrundfarbe background-color: #202020; entfernen
  • und die Schattenstärken im CSS Code anpassen, bis es passt



Sollte bei Euch der "Titel im Header" nicht zu sehen sein, dann weil ihr diesen mit einem CSS-Code unsichtbar gemacht habt. User mit Design Iceblue müssten dann in ihrem CSS Code suchen : .headline { display: none; } . Und diese Codezeile entfernen. User mit den DEsign "CSS" müssten in ihrem CSS-Code die Codezeile suchen #header { display: none; } . Und diesen ebenfalls erst entfernen.

Wenn der Header-Titel sichtbar ist, einfach nur den CSS-Code von Schritt 1 einfügen und den Klassennamen .text umbenennen in den Namen, den der Headertitel hat. Sowie Hintergrundfarbe und Innenabstand (padding) entfernen, Schattenstärke anpassen.



Heute: 7 Besucher