.box {
border: 8px solid #bddaf8; /* Farbe und Dicke des äußeren Rahmens */
width: 200px; /* Breite der Box */
height: 125px; /* Höhe der Box */
background: #7c85a1; /* Hintergrundfarbe der Box */
color: #f5d3f8; /* Schriftfarbe im Inneren */
}
♦Anpassungen: border: → Art, Dicke und Farbe des Innenrahmens (z. B. 4px dashed red) background: → Farbe nach Wunsch anpassen width/height → Größe ändern (achte darauf, dass der Inhalt noch reinpasst)
２. Der Innenrahmen (.rahmen)
Dieser Bereich liegt innen in der Box und hat einen
doppelten Rahmen und eine Umrandung außen herum (outline).
css
.rahmen {
border: 4px double #ffbec8; /* Doppelrahmen in Rosa */
outline: 2px solid #ffbec8; /* Äußere Umrandung */
outline-offset: 8px; /* Abstand zwischen border und outline */
padding: 0; /* Abstand nach innen */
}
♦Anpassungen: border: → Art und Farbe des Rahmens outline: → zusätzliche Umrandung (liegt außen um den border) outline-offset: → wie weit die Outline von der Box entfernt ist
３. Die Laufzeile (.laufzeile + .laufzeile-text)
Hier läuft der NEWS-Streifen oben durch.
css
.laufzeile {
width: 100%; /* Volle Breite des Containers */
overflow: hidden; /* Verhindert Zeilenumbruch und versteckt Überlauf */
white-space: nowrap; /* Text wird in einer Zeile angezeigt */
border-bottom: 2px solid #ffbec8; /* Untere Linie in zartem Rosa */
background: #bddaf8; /* Hellblaue Hintergrundfarbe */
color: #000; /* Schwarze Schriftfarbe */
font-weight: bold; /* Fett gedruckter Text */
font-size: 12px; /* Schriftgröße */
text-shadow: 0px 0px 5px #fff, 1px 1px 0px #fff; /* Weißer Leuchteffekt um den Text */
}
♦Anpassungen: border-bottom: → Farbe und Dicke der unteren Linie background: → Hintergrundfarbe der Zeile text-shadow: → Textfarbe text-shadow: → Leuchteffekt der Schrift font-size: → Größe der Laufschrift
css
.laufzeile-text {
display: inline-block; /* Damit der Text als Block im Fluss bleibt */
padding-left: 100%; /* Startet rechts außerhalb des sichtbaren Bereichs */
animation: laufband 12s linear infinite; /* Animation: 12 Sekunden, gleichmäßig, unendlich */
}
♦Anpassungen: animation: laufband 12s → Laufgeschwindigkeit (kleinere Zahl = schneller)
４. Der Inhalt (id="inhalt")
Das ist der scrollbare Inhalt der Newsbox.
css
#inhalt {
text-align: center; /* Text wird zentriert */
overflow: auto; /* Scrollbalken bei Überlauf (horizontal oder vertikal) */
width: 200px; /* Breite des Bereichs */
height: 125px; /* Höhe des Bereichs */
color: #ffffff; /* Weiße Schriftfarbe */
font-size: 11px; /* Schriftgröße */
text-shadow: 1px 0px 5px #000, 1px 1px 0px #000; /* Schwarzer Schatten um den Text */
}
♦Anpassungen: text-shadow: → Leuchteffekt der Schrift font-size: → Schriftgröße overflow: auto; → Der Scrollbalken wird bei überschüssigem Text automatisch erzeugt.
５. Die Quellenangabe (.Credits)
Das ist der Link ganz unten in der Newsbox, der die Quelle oder den Urheber zeigt.
css
.Credits {
font-size: 7pt; /* Schriftgröße */
font-weight: lighter; /* Dünnere Schrift */
color: #bddaf8; /* Helle, blaue Linkfarbe */
text-decoration: none; /* Kein Unterstrich */
}
.Credits:hover {
text-decoration: underline; /* Unterstrich beim Überfahren mit der Maus */
}
♦Anpassungen: font-size: → Schriftgröße, z. B. größer oder kleiner color: → andere Farbe für den Link text-decoration: → z. B. Unterstrich beim Hover-Effekt
Das war's auch schon von mir. 😊
Verfasst am 13.April 2008, aktualisiert am 17.Juli 2025