MiniBox News

HTML

✦ NEWS --- NEWS --- NEWS ✦

✦Beispiel:

✓ Neue Tutorials

✓ Download-Ecke

✓ Feedback Ecke

:•.Viel Spaß mit der Box.•:

Newsbox by DarkNickli

Kopiere den folgenden Code und setze ihn in den <body>-Bereich Deiner Webseite.

html

<!-- Newsbox -->
<div class="mini-newsbox">
<img alt="" height="150" src="img/avatar.jpg" style="width: 150px">

<div class="ticker-wrapper">
<div class="ticker-text">✦ NEWS --- NEWS --- NEWS ✦</div>
</div>

<div class="scroll-content">
<p>✦Beispiel:<br /><br /></p>
<p>✓ Neue Tutorials<br /></p>
<p>✓ Download-Ecke<br /></p>
<p>✓ Feedback Ecke<br /><br /></p>
<p>:•.Viel Spaß mit der Box.•:<br /><br /></p>
<p><a target="_blank" href="https://phantasygraphics.blogspot.com" class="Credits">Newsbox by DarkNickli</a></p>
</div></div>
<!-- Newsbox End -->

Kopiere den Stil-Code in Deine CSS-Datei.
Du kannst die Farben anschließend an Dein Design anpassen.

css

/* Newsbox */ 
.mini-newsbox {
width: 150px;  /* → Hier kannst du z. B. 300px draus machen */
border: 2px solid #3f2e40;
background-color: #ded6e7;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #010100;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 8px rgba(0,0,0,0.35);
margin: 20px auto;
}

.mini-newsbox img {
width: 100%;
display: block;
border-bottom: 1px solid #e9e7fc;
}

.ticker-wrapper {
height: 24px;
overflow: hidden;
position: relative;
background-color: #c9cff1;
border-top: 1px solid #030409;
border-bottom: 1px solid #030409;
}

.ticker-text {
position: absolute;
white-space: nowrap;
animation: scroll-left 8s linear infinite;
font-weight: bold;
padding-left: 100%;
margin-top: 5px;
}

@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

.mini-newsbox .content {
padding: 10px;
text-align: center;
}

.mini-newsbox .content p {
margin: 6px 0;
}

.scroll-content {
height: 90px;
overflow-y: auto;
padding: 8px;
text-align: left;
background: #ded6e7;
scrollbar-width: thin;
scrollbar-color: #3f2e40 transparent;
}

.scroll-content p {
margin: 6px 0;
}
/* Für Chrome, Edge, Safari */
.scroll-content::-webkit-scrollbar {
width: 8px;
}

.scroll-content::-webkit-scrollbar-track {
background: transparent;
}

.scroll-content::-webkit-scrollbar-thumb {
background-color: #3f2e40;
border-radius: 4px;
}
.Credits {
font-size: 7pt;
font-weight: lighter;
color: #342542;
text-decoration: none;
}

.Credits:hover {
font-size: 8pt;
text-decoration: none;
}

１. Die Hauptbox

Das ist das Grundgerüst der Newsbox.
Hier legst Du Größe, Hintergrundfarbe, Schriftart und Rahmen fest.

css

.mini-newsbox {
width: 150px; 				  /* Breite der Box */
border: 2px solid #3f2e40; 		  /* Dunkler Rahmen */
background-color: #ded6e7;		  /* Helllila Hintergrund */
font-family: Arial, Helvetica, sans-serif;/* Standardschrift */
font-size: 10px;			  /* Schriftgröße */
color: #010100;				  /* Textfarbe */
border-radius: 8px;  			  /* Abgerundete Ecken */
overflow: hidden; 			  /* Inhalt bleibt in der Box */
box-shadow: 0 0 8px rgba(0,0,0,0.35);	  /* Schatteneffekt */
margin: 20px auto;		 	  /* Abstand + zentriert */
}

♦Anpassungen:
width → Damit passt Du die Breite der Box an.
border: → Hier legst Du die Rahmenart und -farbe fest.
background: → Damit legst Du die Hintergrundfarbe fest.
font-family: → Damit änderst Du die Schriftart.
font-size: → Legt die Schriftgröße fest.
color: → Passe die Schriftfarbe an Dein Design an.
border-radius: → Hier bestimmst Du, wie stark die Ecken abgerundet sind.
box-shadow: → Damit verstärkst Du den Schatteneffekt der Box.

２. Lauftext

Der äußere Bereich:.ticker-wrapper und der bewegte Lauftext: .ticker-text.

css


.ticker-wrapper {
height: 24px; 			  /* Höhe des Ticker-Bereichs */
overflow: hidden; 		  /* Alles, was zu groß ist, wird abgeschnitten */
position: relative; 		  /* Positioniert das Kind-Element absolut */
background-color: #c9cff1; 	  /* Hintergrundfarbe */
border-top: 1px solid #030409;	  /* Obere Linie */
border-bottom: 1px solid #030409; /* Untere Linie */
}


.ticker-text {
position: absolute; 		 /* Wird relativ zum Wrapper platziert */
white-space: nowrap; 		 /* Kein automatischer Zeilenumbruch */
animation: scroll-left 8s linear infinite; /* Laufanimation */
font-weight: bold; 		 /* Fetter Text */
padding-left: 100%; 		 /* Startet außerhalb des sichtbaren Bereichs */
margin-top: 5px;		 /* Abstand nach oben */
}

♦Anpassungen:
height: → Höhe des Ticker-Bereichs.
background: → Farbe des Hintergrunds.
border-top:/border-bottom: → Art, Farbe und Dicke des oberen/unteren Rahmens.
animation: → Steuert die Bewegung des Textes (Ticker-Effekt).
Beispiel: 8s = Standardgeschwindigkeit. → 5s = schneller, 12s = langsamer.

Der bewegte Lauftext:

Dieser Text läuft von rechts nach links durch die Newsbox.
Du kannst ihn direkt im HTML eintragen oder ändern.

html

<div class="ticker-wrapper">
<div class="ticker-text">✦ NEWS --- NEWS --- NEWS ✦</div>
</div>

→ Beispiel: Statt „✦ NEWS --- NEWS --- NEWS ✦“ kannst Du z. B. schreiben:
„ ✦ Neues Tutorial ist jetzt online --- Neues Bilder kommen dazu ✦ “

３. Der Scrollbereich:

Das ist der scrollbare Inhalt der Newsbox.

css

.scroll-content {
height: 90px;          /* Höhe des sichtbaren Textbereichs */
overflow-y: auto;      /* Vertikales Scrollen aktivieren */
padding: 8px;          /* Innenabstand zum Rand */
text-align: left;      /* Text linksbündig */
background: #ded6e7;   /* Hintergrundfarbe */
scrollbar-width: thin; /* Dünne Scrollbar (für Firefox) */
scrollbar-color: #3f2e40 transparent; /* Farbe der Scrollbar (für Firefox) */
}

♦Anpassungen:
height: → Höhe des Textbereichs.
background: → Farbe des Hintergrunds.
scrollbar-width und scrollbar-color → Aussehen der Scrollbar in Firefox.

４. Optional: Scrollbar für WebKit-Browser

Damit der Scrollbalken auch in Chrome, Safari und Edge angezeigt wird.

css

.scroll-content::-webkit-scrollbar {
width: 8px; 		   /* Breite der Scrollbar */
}

.scroll-content::-webkit-scrollbar-track {
background: transparent;   /* Hintergrund der Scroll-Spur */
}

.scroll-content::-webkit-scrollbar-thumb {
background-color: #3f2e40; /* Farbe der Scroll-Leiste */
border-radius: 4px; 	   /* Abgerundete Ecken */
}

♦ Du kannst die Farbe der Scrollbar hier ebenfalls ändern.

５. 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; 		/* Leichte Schrift */
color: #bddaf8; 		/* 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 25.Mai 2008, aktualisiert am 17.Juli 2025

>Web-Coding Tutorials<

>Home<