Danas počinjemo sa CSS-om
CSS čini vaš rad sa HTML-om mnogo lakšim , a vašu stranicu mnogo ljepšom.
Primjer je animacija u CSS-u
Kod izgleda ovako (komentarisan)
<html>
<head> --> CSS kod ide u <head> dio koda
<style type="text/css"> --> Ovime otvaramo CSS dio kod
div -- > Ovim obilježavamo ovaj dio koda i koristiti cemo ga kasnije da ga pozovemo u HTML-u
{ --> Ovim pocinjemo ovaj dio CSS koda
width:100px; --> Širina
height:100px; --> Visina
background:red; --> Pozadina ce biti crvena
position:relative; --> Pozicija
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /*Firefox*/
-webkit-animation:mymove 5s infinite; /*Safari i Chrome*/
}
@keyframes mymove --> kretanje animacije
{
from {left:0px;} --> Od čega počinje animacija
to {left:200px;} --> Gdje završava animacija
}
@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari i Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style> --> Završava CSS kod
</head>
<body>
<p><b>napomena:</b> Ovaj primjer ne radi sa Internet Explorerom i Operom.</p>
<div></div> --> ovo je onaj dio koda kojim pozivamo CSS kod u ovom dijelu HTML-a
</body>
</html>
Kako to izgleda možete pogledati
Sada slijedeći kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
appearance:button; --> U kodu pozivamo komandu na button
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari i Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer i Opera ne podržavaju ovaj kod</p>
<div>Vaš tekst</div> --> pozivamo se na kod iz CSS-a
</body>
</html>
Kako to izgleda možete pogledati OVDJE
Kako apperance : možemo koristiti
appearance: normal|icon|window|button|menu|field;
Eh sada kako sebi da olakšamo HTML kod
Preko CSS-a ćemo podesiti boju ili sliku pozadine :)
div
{
background:url(pozadina.gif) top left no-repeat,
url(slikapozadine.gif) bottom left no-repeat,
url(slikapozadine.gif) bottom right no-repeat;
}
{
background:url(pozadina.gif) top left no-repeat,
url(slikapozadine.gif) bottom left no-repeat,
url(slikapozadine.gif) bottom right no-repeat;
}
U ovom tutorijalu smo koristili samo pokazne kodove , a kasnije nastavljamo sa pravim CSS tutorijalima.
Objavi komentar