Rullande text!
En lite rolig grej man kan ha på sin blogg, är text som rullar eller åker in på sin sida.
Det finns en mängd olika varianter på hur man kan styra texten, och jag tänkte lägga upp koden för några varianter iaf.
Kopiera och klistra in antingen i ett inlägg, eller i din kodmall. Om du ska lägga in det i ett inlägg, så måste du ändra textredigerare först så att du bara kodar i ren HTML (klicka på ändra redigerare nere till höger).
Du kan modifiera koden lite på egen hand om du vill, här har du en liten förklaring:
<style type="text/css">
.marquee {
height:30px; <— höjden på rutan
width:500px; <— bredden på rutan
background-color:ffff33; <— bakgrundsfärg på rutan
font-family:Cursive; <— typsnittet på texten
font-size:12px; <— storleken på texten
color:33cc33; <— färgen på texten
border-width:1px; <— tjockleken på kantlinjen
border-style:solid; <— vilken typ av kantlinje (solid, dotted, dashed, none)
border-color:ff0000; <— färgen på kantlinjen
}
</style>
<marquee
direction="left" <— vilket håll texten ska åka, välj mellan right, left, up, down
behavior="alternate"
scrollamount="5"> <— hastigheten på texten
Lägg in din egen text här…</marquee>
Här har du lite olika varianter:
Text som studsar fram o tbx i rutan
Lägg in din egen text här…
Kopiera koden nedanför
<style type="text/css"> .marquee { height:30px; width:500px; background-color:ffff33; font-family:Cursive; font-size:12px; color:33cc33; border-width:1px; border-style:solid; border-color:ff0000; } </style> <marquee direction="left" behavior="alternate" scrollamount="5">Lägg in din egen text här...</marquee>
Text som åker genom hela rutan
Lägg in din egen text här…
Kopiera koden nedanför
<style type="text/css"> .marquee1 { height:30px; width:500px; background-color:ffff33; font-family:Cursive; font-size:12px; color:33cc33; border-width:1px; border-style:solid; border-color:ff0000; } </style> <marquee direction="left" behavior="scroll" scrollamount="5" >Lägg in din egen text här…</marquee>
Bild som åker genom hela rutan
Kopiera koden nedanför
<style type="text/css"> .marquee3 { height:50px; width:500px; background-color:ffff33; font-family:Cursive; font-size:12px; color:33cc33; border-width:1px; border-style:solid; border-color:ff0000; } </style> <marquee direction="left" behavior="scroll" scrollamount="3" ><img src="adressen till din bild"></marquee>
Text som åker uppåt i en ruta
Lägg in din egen text här…
Kopiera koden nedanför
<style type="text/css"> .marquee2 { height:300px; width:100px; background-color:ffff33; font-family:Cursive; font-size:12px; color:33cc33; border-width:1px; border-style:solid; border-color:ff0000; } </style> <marquee direction="up" behavior="scroll" scrollamount="5" >Lägg in din egen text här…</marquee>
Text som studsar upp och ner i en ruta
Lägg in din egen text här…
Kopiera koden nedanför
<style type="text/css"> .marquee4 { height:300px; width:100px; background-color:ffff33; font-family:Cursive; font-size:12px; color:33cc33; border-width:1px; border-style:solid; border-color:ff0000; } </style> <marquee direction="down" behavior="alternate" scrollamount="5" >Lägg in din egen text här…</marquee>
Nu är det bara att testa dig fram och mixtra med koder och få det som du själv vill.
