Website selber erstellen - Tools, Widgets, Zubehör

Laufschriften - Praxisbeispiel für Profi mit CSS

Für Fortgeschrittene/Profis ist es möglich die Formatierung mittels CSS zu realisieren und damit auch Möglichkeiten auszuschöpfen, die sonst kaum zu realisieren sind.

Als Beispiel hier die kleine, ganz hübsch gestylte Laufschrift, die euch schon die ganze Zeit da oben nervt.

Auch wer sich noch nicht mit CSS beschäftigt hat, kann das umsetzen und individuell anpassen und einsetzen. Ich erkläre die wichtigsten Sachen. (LINK zu css-erklärung)

Hier erst einmal die CSS-Definitionen im Ganzen:

.myMarquee {width:691px; height:20px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto; animation:20s;

-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

/* runde Ecken */

-o-border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

background:#1ad;

background-image: -webkit-gradient(linear, 0% 0%, 0% 25%, from(rgba(255, 255, 255, 9.7)), to(rgba(255, 255, 255, 0)));

background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

}

.scroller {display:block; height:20px; width:1250px; position:absolute; left:0; top:0;

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-moz-animation-duration:20s;

-moz-animation-name: scroll;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-webkit-animation-duration:20s;

-webkit-animation-name: scroll;

-o-animation-iteration-count: infinite;

-o-animation-timing-function: linear;

-o-animation-duration:20s;

-o-animation-name: scroll;

animation-iteration-count: infinite;

animation-timing-function: linear;

animation-duration:20s;

animation-name: scroll;

}

.scroller div {font-family:arial, serif; font-size:11px; width:350px; font-style:italic; line-height:20px; float:left; color:#000; font-weight:bold; padding:0 10px;}

.scroller div a {color:#c00;}

@-moz-keyframes scroll {

0% {left:0;}

100% {left:-620px;}

}

@-webkit-keyframes scroll {

0% {left:0;}

100% {left:-620px;}

}

@-o-keyframes scroll {

0% {left:0;}

100% {left:-620px;}

}

@keyframes scroll {

0% {left:0;}

100% {left:-620px;}

}

.scroller:hover {

-moz-animation-play-state: paused;

-webkit-animation-play-state: paused;

-o-animation-play-state: paused;

animation-play-state: paused;

}

Hier noch ein paar Erläuterungen für die Einsteiger und Nutzer:

Im ersten Abschnitt . myMarquee die Länge und Höhe der Laufschrift festlegen. Die Höhe sollte korrekterweise identisch sein mit der height-Angabe im Abschnitt .scroller. (Muss theoretisch aber nicht unbedingt, da das Marquee übergeordnet ist und scroller bestimmt, aber Browser sind auch nur Menschen ;) )

Im Abschnitt scroller div die Eigenschaft Line-height sollte den gleichen Wert haben wie die anderen height-Angaben und muß natürlich mit font-size (der Schriftgröße) passen. Ist der Wert identisch läuft die Schrift schön mittig, sonst entsprechend nach oben oder unten versetzt.

Im Abschnitt background kann man die Farben des Farbverlaufs anpassen. Es müssen immer in allen vier Zeilen die Werte geändert werden.

Längen: Die Laufschrift besteht am Ende aus einer Anzahl von div-Tags (abschnitte).

Im Abschnitt scroller kann man die Gesamtlänge des Lauftextes festlegen. Und im scroller div die Länge der einzelnen div-Text-Abschnitte. Die Länge (width) in scroller muss also ein Vielfaches der width-Angabe von scroller div sein zuzüglich von je 50px für die Lücken zwischen den einzelnen Textabschnitten. (Anzahl Abschnitte-1 x 50px)

Soweit die Theorie. Praxis: Wird der Gesamttext länger als die in scroller definierte Länge schneiden die Browser einfach hinten ab. Das heißt der gesamte letzte div-Tag wird nicht mehr angezeigt, weil er ja nicht rein passt. Durch die width-Angabe bei scroller-div wird eine feste Länge für die Abschnitte definiert. Kürzere Texte werden also mit Leerzeichen aufgefüllt – also unterschiedliche Lücken. Entfernt man die width-Angabe werden die Abschnitte hintereinander laufen mit 50px Abstand. Dann muß man etwas experimentieren, da die Länge der Abschnitte ja auch von der Schriftart und –größe abhängen.

Im Abschnitt scroller findet man vier Zeilen mit der Bezeichnung duration und einer sec- Angabe. Hier wird die Laufgeschwindigkeit festgelegt. Je höher der Wert desto langsamer läuft es. Alle vier Werte anpassen.

Im Abschnitt scroller div findet man vier Zeilen mit der Bezeichnung scroll. Mit dem 100% wert (im Beispiel oben 620px) definiert man, wie weit die Laufschrift noch läuft, bevor das ganze wieder von vorne beginnt. Ca. die Hälfte des Wertes der scroller width Angabe bedeutet also, dass die Schrift noch bis zur Mitte ausläuft ohne das neuer Text kommt, bevor das Marquee wieder vorne beginnt.

Wer größere Lücken will, muss in den div-Tags mit „ “ führende Leerzeichen einbauen.

Wer aufgepasst hat, sieht natürlich das praktisch in jedem Abschnitt ein bestimmter Wert jeweils viermal definiert wird. Das ist notwendig, da damit die nicht CSS3-konformen Standards älterer Browserversionen bedient werden.

Nachtrag: Das vorstehende CSS-Script stammt original von Stu Nicolls die die Website http://www.cssplay.co.uk betreibt. Sie hat dieses Script explizit frei gegeben, mit der Bitte um einen Backlink, den ich hier sehr gerne gebe. Sie hat in vielen Jahren eine Menge Scripts erstellt. Meine Hochachtung - dort findet man wirklich tolle Sachen. Und eine Bitte. Falls ihr weitere oder andere Scripte von ihr nutzt, unten auf den Seiten findet ihr immer die Copyright-Anmerkungen. Und wenn eine Spende erbeten wird, dann seid fair und tut es. In dieser Website steckt wahnsinnig viel Arbeit. Und nur ein gelegentlicher Werbeklick ist da wirklich ein bißchen wenig. Ihr wisst ja selber wieviel Zeit man oft schon in „ganz einfache“ Sachen steckt.

Die Einbindung in den HTML-Code:

<--! Abschnitte -->

</div>

Einbindung in Head

Kleiner Tipp: Bei der Arbeit mit Subdomains findet der IE nicht die CSS-Datei. Dann die komplette URL bei href angeben. (am besten generell so machen)

Zwischenzeitlich musste ich feststellen, das die Einbindung mittels css-Datei auch bei Firefox nicht merh klappte. Daher habe ich die css-Definition jetzt direkt im Quelltext eingebunden. Dazu die Definition einfach zwischen <style type="text/css"> und </style> einbinden.