byt lankar med html-skolan
Google gbghtml.se
index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 responsiv design Böcker om stylesheets Design för din blogg waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

Idag kan du göra utmärkta animationer eller slideshows med hjälp av css3.

 

Vad jag gjort här är att använda det nyare kommandot @keyframes för att ge ett bildspel till animationen. Du kan läsa om denna funktion ute på w3cschools>>>.
Koden ser ut så här:

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}

Själva div:en blir 500% bred här. Det ser du på div #slider figure width: 500%. Jag använder 5 bilder och då bir alltså varje bild 100%. Längre ner ser du animation 30s slidy infine vilket säger att hela animationen tar 30 sekunder. Du kan tänka dig det hela som 5 bilder i rad. För att sedan ladda in bilderna använder du en div där du stoppar in bilderna. Jag har gjort så här:

<div id="slider">
<figure>
<img src="http://www.bjornsfoto.se/wp-content/uploads/2017/04/dwarfcherriesbig.jpg" alt>
<img src="http://www.bjornsfoto.se/wp-content/uploads/2017/04/dwarfcherries.jpg" alt>
<img src="http://www.bjornsfoto.se/wp-content/uploads/2017/04/bumblebee.jpg" alt>
<img src="http://www.bjornsfoto.se/wp-content/uploads/2017/04/nippon2.jpg" alt>
<img src="http://www.bjornsfoto.se/wp-content/uploads/2017/04/bumblebee.jpg" alt>
</figure>
</div>

I början på div:en har jag lagt en id. Den som ser ut så här i stylesheet: div#slider. Detta kan jag göra så länge egenskapen bara skall finnas på ett ställe i html(eller php) dokumentet. Sedan har jag lagt in bilder från min fotoblogg. Jag tycker detta är en väldigt enkel metod att få fram ett bildspel på en hemsida.

copyright © Björn Larsen citygbg.se