Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Eine Laufschrift erstellen und ein- sowie Ausfaden lassen...



Ranking: +6   Kommentare: 2   |   Bewertung: Keine Berechtigung!  

Servus, in diesem Tutorial möchte ich euch zeigen, wie man einen solchen Effekt erzielen kann:
Ein und Ausfaden
Ein und Ausfaden

Wie ihr vielleicht seht, wird der schöne Text "Vorbeifarh'n, Schießen" beim reinsliden eingefaet, d.h. es wird langsam sichtbar, und genauso verschwindet es auch wieder.



Step 1 - 2 Grafiken machen...


Wir brauchen 2 einfache PNG Grafiken, die eine ist die Linke, die den Text ausfadet, die andere die Rechte, die ihn einfadet, oder umgekehrt, wie es bei euch eben sein soll. Wir nehmen diese beiden hier, ihr könnt sie euch gern Speichern...
Fade Links
Fade Links

Fade Rechts
Fade Rechts


Ansonsten erstellt ihr sie euch einfach mit Photoshop selber, falls ihr nicht wisst wie das geht schaut hier nach oder googlet ein bisschen, dann werdet ihr fündig, sucht am besten nach "Ebenen Transparenz", ansonsten könnt ihr euch gern bei mir per email melden, addresse unten...


Step 2 - in HTML einbetten...


Nun kommen wir zum ersten wichtigen Teil. Wir müssen die beiden Grafiken in nun auf "Papier" bringen, das geht so:

Code:




<div title="ABC" style="position:absolute; left: 254px; top: 59px; height: 23px; width: 308px; z-index: 1;">

   <table width="348"> 

  <tr> <td width="151"> <img src="images/fadelinks.png" alt="a" /></td>

  <td width="133"></td>

  <td width="48"> <img src="images/faderechts.png" alt="a" /></td> 

  </tr> </table></div>



Nun zur erklärung: als erstes erstellen wir ein Div Element, welches den Titel ABC trägt, was natürlich nur als Joke dient. *g* Dieses Element hat ber Style-Tag und den Style-Atrributen zugewiesen bekommen, dass man es anpassen kann, das umschreibt im groben "position:absolute".
Die anderen Attribute inkl. Werte sollten sich selbst erklären, left beschreibt den Abstand der linken Seite, Top den Abstand von oben, die höhe und die Breite, etc.... Die Höhe ist glaub ich wichtig, für die Tabelle, die sie jetzt gleich bekommt, hab das aber nicht extra getestet...
Weiter gehts mit der Tabelle Strucktur. Als erstes erstellen wir eine Tabelle, danach kommen drei, ich nenn sie mal "Subtabellen" weil mir keine andere Bezeichnung dazu einfällt, Subtabellen. *g*
Die erste Tabelle bekommt die Grafik "fadelinks.png", die dient dazu später den Text ausfaden zu lassen, die zweite Tabelle enthält nichts ( wichtig ) und die dritte wiederum "faderechts.png", die den Text einfaden lässt.
Nun haben wir den Wichtigsten teil hinter uns.. naja, fast.


Step 3 - Etwas zum Faden erstellen... ;)


Das ist dann wohl doch der Wichtigste Teil, weil ohne Text, grafik etc, lässt sich schwer was faden. :P
Das kann man nun auf die altmodische HTML weiße machen, oder eben mit PHP, ich habs mit PHP, aber für die PHP-Newbies unter uns mach ich mal 2 Beispiele. ;)

Nummero 1: HTML Version - Wir setzen den Text wie gehabt mit HTML fest...

Code:


  <div style="position:absolute; left: 258px; top: 59px; height: 21px; width: 334px;">

   <div align="right"><marquee behavior="slide" scrollamount="3">

Dein Text hier...

   </marquee></div>

 </div>


Hier setzten wir nun den Text, der gefadet werden soll. Die Variablen, also eben left etc sollten soweit gleich bleiben, sonst wird das nix. :)

mit PHP einfach nur anstadt "Dein Text hier...." die PHP Variable einsetzen, mit <? echo $var; ?>, fertig. :)


Fertig..


So, das wars, mein erstes Tutorial... ;) Für Kritik bin ich immer offen, insofern sie Konstruktiv ist, meine email ist
info@androidhell.de, ihr könnt mir gern eine eMail schreiben, aber bitte schreibt in die Betreffzeile worum es geht, also "Tutorial auf DN" o.ä., damit sie nicht gleich in meinem "Löschen!!!" Ordner landet. :)
Eine Live - Prevwie gibts hier: http://web4.v127.ncsrv.de/dn/.



Ich hoffe ich konnte euch irgendwie helfen. ;)
MfG,

Besserwisserchen aka Anthrax // LDSK

Das kopieren dieses Tutorials ist nicht gestattet, außer es erfolgt eine Benachrichtigung + Einwilligung durch mich.

Veröffentlicht von: Besserwisserchen
Veröffentlicht am: 23 Mar. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Fade fading HTML marquee textfade


Themenverwandte Tutorials


Kommentar(e) (2)


YellowCheeseMachine sagt:

Zitat Marc-B.:

Marquees waren vor 5 Jahren mal was schönes. Jetzt sind sie absolut fehl am Platz!



Ticker sind auch heute noch aktuell, und es muss nicht zwingend eine website sein, für ein Forum genauso gu zu gebrauchen.

Kommentare ohne Überlegung jedoch wirklich fehl am Platz. ;)

8 Jul. 2010 20:26:11 • Antworten


deleted_1456821596 sagt:

Marquees waren vor 5 Jahren mal was schönes. Jetzt sind sie absolut fehl am Platz!

16 Jun. 2009 23:47:59 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder