TIPS
by
NETtMAN

News - Ticker Code mit Banderole aus nur CSS für Einbau in Blog oder Webseite

ohne Javascript
pur CSS & HTML
News - Ticker
beliebig viele Schlagzeilen
mit und ohne Link´s
Farben beliebig ändern
Groß, mittel oder klein
Brandneu



Heute wird der News-Ticker aus der Kiste geholt. Nicht nur am Morgen, sondern den ganzen Tag, die neuesten Schlagzeilen, unterlegt mit einer Banderole, vorstellen.

Absichtlich wurde der CSS- und HTML-Code so aufgebaut, das diese beiden Teile leicht trennbar sind. Dadurch kann der Ticker allein, in einem anderen Zusammenhang, verwendet werden. Und ebenso ist es auch mit der Banderole : Sie ist auch separat einsetzbar (z. B. : als "FOOTER", so das die Texte hieraus beim scrollen hervor kommen).

Sehr detailliert werden jetzt alle HTML-Code´s nebst den zugehörigen CSS-Code´s beschrieben. Warum ?

Es wird leichter sein, das Layout und die Größenverhältnisse auf eigene Wünsche umzuschreiben, wenn diese in einen Blog oder eine Webseite eingebunden werden sollen. Eventuelle Änderungen werden mit allen Nebenwirkungen besser erkannt. CSS ist bei einer Fehlersuche leider recht grausam. " Nobody know´s what´s about. "

Beginnen wir mit dem "TICKER" :

Ein  Container mit der ID : "#blatt" umspannt die Schlagzeilen.

Der  Container "scroll" hat´s in sich. Er zeigt immer nur einen Ausschnitt in der Höhe einer Zeile und ist mit einer Animation ausgestattet, deren Art auf " infinite = endlos " gesetzt ist. Sie kann durch "hover´n" pausiert werden. Wie die Animation genau ablaufen soll, definiert der  Block : @keyframes ( genauere Erklärung weiter unten ).

Die  Schlagzeilen -  Inhalte können Sie leicht durch Ihre Aussagen verändern.


<div id="blatt">
<scroll>
<zeile>ohne Javascript</zeile><br>
<zeile>pur CSS & HTML</zeile><br>
<zeile>News - Ticker</zeile><br>
<zeile>beliebig viele Schlagzeilen</zeile><br>
<zeile>mit und ohne Link´s</zeile><br>
<zeile>Farben beliebig ändern</zeile><br>
<zeile>Groß, mittel oder klein</zeile><br>
</scroll>
</div>

#blatt {
position: relative;
margin:0;
padding: 5px 0px;
left: 10px;
top:32px;
width: 238px;
font-variant: small-caps;
background-color: white;
border: 1px solid gray;
box-shadow: 0px 0px 5px rgba(0,0,0,0.55);
overflow: hidden;
line-height: 27px;
height: 27px;
}

scroll {
position: absolute;
text-align: center;
width: 100%;
animation: sprung 17s cubic-bezier(1, 0, 0.9, 0) infinite;
}
scroll:hover {
animation-play-state: paused;
}

zeile {line-height: 27px;}
@keyframes sprung {
0% {margin-top: 0;}
14% {margin-top: -27px;}
28% {margin-top: -54px;}
43% {margin-top: -81px;}
57% {margin-top: -108px;}
71% {margin-top: -135px;}
86% {margin-top: -162px;}
100% {margin-top: -189px;}
}



KEYFRAMES unterteilen eine Animation in %-uale - Schritte, die nach der Animations-Art die eingetragene-(n) Eigenschaft-(en) verändern. In unserem Fall ist es "margin-top" : Der Abstand des Inhaltes, von der oberen Grenze des Container´s aus, in Pixeln berechnet.

Der wird also schrittweise um genau 27 Pixel erniedrigt, was genau einer Zeilen-Höhe entspricht. 27 ist rein zufällig gewählt ( tat meinen Augen am besten ) und gehört zusammen mit den CSS-Definitionen : "zeile {line-height: 27px;}" und beim "#blatt" : " line-height: 27px; height: 27px; ". Bei evtl. Änderung brauchen nur beide Werte übereinstimmen, dann ergeben sich höhere oder niedrigere Zeilen.

Falls eine andere Anzahl Zeilen getickt werden soll, werden die entsprechenden Zeilen in dem Container : "scroll" eingeschrieben. Zusätzlich muss KEYFRAMES angepasst werden. Die %-uale Schrittweite ergibt sich aus einem mehr als Zeilen-Anzahl. Diese geteilt durch 100 ( bei 4 Zeilen also 20% ) wird entsprechend oft mit dem verändertem Randabstand : " {margin-top...} " in den KEYFRAMES-Container " {...} " eingesetzt bis 100% genannt wurde.

Die separate Beschreibung einer  Banderole beginnt mit deren Text-Inhalt und ihrer  Grundform :

Eine " position: relative; " sorgt für Einbindung in den Textfluß, so das vor und nach diesem Element weitere Texte erscheinen können. Mit " font-variant: small-caps; " werden Kleinbuchstaben als Kapitälchen angezeigt. Weitere Größenangaben platzieren den Text und spannen das Element an sich. Die Hintergrundfarbe ergibt sich aus : " background-color: #FFFDCD; ". Ein Schatten in der Farbe : " rgba(0,0,0,0.55) " wird durch " box-shadow " erreicht. Der Wert " 0.55 " bedeutet : 55 % Transparenz. " 0,0,0 " sind die Werte für rot, grün, blau.
<div class="schachtel">
Brandneu
</div>


.schachtel {
position: relative;
font-variant: small-caps;
line-height: 30px;
text-align: center;
background-color: #FFFDCD;
height: 30px;
width: 280px;
left:-10px;
top:30px;
box-shadow: 0px 0px 7px rgba(0,0,0,0.55);
}




Die Ecken, welche einfach nur aus Rahmen von Elementen bestehen, bekommen eine Breite und Hoehe von Null Pixeln, so das sie gar nicht sichtbar sind (Ecke links) / (Ecke rechts). Allein der Rahmen wird angezeigt.

Das Schlüsselwort " outset " sorgt dafür, das die linke Ecke durch den Browser automatisch leicht verdunkelt wird. " solid " würde die Ecken gleichfarbig belassen.

Die rechte Ecke wird sich, im Fall einer Änderung, nicht automatisch der Banderolen-Breite " width: 280px; " angleichen. Ihr linker Einzug " left: 250px; " wird mit Banderolen-Breite minus 30px berechnet

3 Zeilenumbrüche sind genannt, damit nachfolgende Texte nicht gleich dem Banderolentext folgen, sondern etwas tiefer, unter dem Banderolen-Element, einsetzen.


<div class="ecke-links"></div>
<div class="ecke-rechts"></div>
<br><br><br>


.ecke-links,
.ecke-rechts {
border-style: outset;
height: 0px;
width :0px;

}
.ecke-links {
position: relative;
top: -10px;
left: -10px;
border-color: transparent #E5CD89 transparent transparent;
border-width: 10px 20px 0 0;
}

.ecke-rechts {
position: relative;
top: -20px;
left: 250px;
border-color: transparent transparent transparent #E5CD89;
border-width: 10px 0 0 20px;
}


Der gesamte Code in einem Stück für Banderole und News-Ticker sieht wie folgt aus :


<div id="blatt">
<scroll>
<zeile>ohne Javascript</zeile>
<zeile>pur CSS & HTML</zeile>
<zeile>News - Ticker</zeile>
<zeile>beliebig viele Schlagzeilen</zeile>
<zeile>mit und ohne Link´s</zeile>
<zeile>Farben beliebig ändern</zeile>
<zeile>Groß, mittel oder klein</zeile>
</scroll>
</div>
<div class="schachtel">
Brandneu
</div>
<div class="ecke-links">/<div>
<div class="ecke-rechts"></div>
<br><br><br>

<style>
#blatt {
position: relative;
margin:0;
padding: 5px 0px;
left: 10px;
top:32px;
width: 238px;
font-variant: small-caps;
background-color: white;
border: 1px solid gray;
box-shadow: 0px 0px 5px rgba(0,0,0,0.55);
overflow: hidden;
line-height: 27px;
height: 27px;
}
scroll {
position: absolute;
text-align: center;
width: 100%;
animation: sprung 17s cubic-bezier(1, 0, 0.9, 0) infinite;
}
scroll:hover {
animation-play-state: paused;
}
zeile {line-height: 27px;}
@keyframes sprung {
0% {margin-top: 0;}
14% {margin-top: -27px;}
28% {margin-top: -54px;}
43% {margin-top: -81px;}
57% {margin-top: -108px;}
71% {margin-top: -135px;}
86% {margin-top: -162px;}
100% {margin-top: -189px;}
}
.schachtel {
position: relative;
font-variant: small-caps;
line-height: 30px;
text-align: center;
background-color: #FFFDCD;
height: 30px;
width: 280px;
left:-10px;
top:30px;
box-shadow: 0px 0px 7px rgba(0,0,0,0.55);
}
.ecke-links,
.ecke-rechts {
border-style: outset;
height: 0px;
width :0px;
}
.ecke-links {
position: relative;
top: -10px;
left: -10px;
border-color: transparent #E5CD89 transparent transparent;
border-width: 10px 20px 0 0;
}
.ecke-rechts {
position: relative;
top: -20px;
left: 250px;
border-color: transparent transparent transparent #E5CD89;
border-width: 10px 0 0 20px;
}
</style>
24.6.16 14:44
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter