Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

CSS gumb s prehodom in brez njega
Avtor: NikMan | Objavljeno: dne 29. maj 2013, 12:05
Delite vsebino na Facebooku
Delite vsebino na Twitterju
  Spoznali boste kodo, s katero boste lahko ustvarili zelo lep in zaobljen CSS gumb ter mu dodali dva efekta. Eden s prehodom in eden brez.
 
 
1
  
 
Ustvarite nov HTML dokument.
 
 
2
  
 
Postavite se v kodni način.
 
 
3
  
 
Potem pa premaknite na položaj med značkama <head> in <head>.
 
 
4
  
 
Vpišite oziroma kopirajte naslednjo kodo:

<style>
a.css-button {
font-size:30px;
color:#000;
text-decoration:none;
display:block;
width:350px;
padding:5px;
border:1px solid #DDD;
text-align:center;

-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;

background:#FFFFFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEE));
background:-moz-linear-gradient(0% 90% 90deg, #EEE, #FFF);

-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
a.css-button:hover {
color:#fff;
border-color:#3278BE;

background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4195DD), to(#003C82));
background:-moz-linear-gradient(0% 90% 90deg, #003C82, #4195DD);
}
a.css-button:active {
background:#4195DD;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
}

a.css-button.notransitions {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
</style>
 
 
 
 
 
5
  
 
Postavite se v način oblikovanja.
 
 
6
  
 
Napišite dve besedi ali stavka, ki bosta služila za povezavi.
 
 
7
  
 
Označite nato prvo besedo ali stavek.
 
 
8
  
 
V polje Link dodajte poljubno povezavo (glej sliko).
 
 
9
  
 
Potem dodajte povezavo še k drugi besedi ali stavku.

Premaknite se v kodni način.
 
 
10
  
 
V področju znotraj značke <body> se premaknite na področje, kjer ste ustvarili povezavi in se premaknite za ustvarjeno HTML povezavo (glej sliko).
 
 
11
  
 
Dodajte  class="css-button" (glej sliko).
 
 
12
  
 
Pri drugi povezavi pa dodajte class="css-button notransitions" (glej sliko).
 
 
13
  
 
Shranite stran in si jo oglejte v brskalniku.
 
 
14
  
 
Ko se boste postavili nad prvo, se vam bo ustvaril prehod, pri drugi povezavi pa le barva.

Seveda pa je čar CSS v tem, da se lahko igrate z nastavitvami, katere ste dodali v koraku 4, za več vprašanj pa smo vam na voljo na forumu.
 
 
Komentiraj
  
 
 
 
 
29.5.2013, 18:40
V FF se gradient ozadja in efekt lepovidita, v IE pa je samo enobarvno ozadje, niti efekta ni. V čem je fora?
 
 
 
 
29.5.2013, 21:42
Žal je to še vedno velik problem s kompatibilnostjo brskalnikov.

Internet Explorer je načeloma znan po tem, da ne prikazuje najbolje strani, zato pa mu je delež tudi padel.
 
 
 
 
30.5.2013, 20:17
Ja to je res, da je pri veliko stvareh razlika v prikazovanju, ampak našel sem eno stran, kjer je treba za pravilen prikaz v IE dodati še malo kode. Na temu spodnjem naslovu:

http://webdesignerwall.com/tutorials/css....
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com