3d dugmići

Dragan Filipović Blog Comments (0)

3ddugme

Najlakši način izrade 3d elemenata je pomoću senki.

Počećemo od običnog linka sa klasom dugme3d

3d dugme

 U CSS-u prvo oblikujemo dugme:

.dugme3d {
    padding: 4px 40px;	

 Izaberemo boju teksta i pozadinsku boju

    color: rgba(255,255,255,1);
    background-color: #65a9d7;	
    text-decoration: none;

 Postavimo zaobljenje ivica

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

 I dodamo senku

    -webkit-box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);

 Prva senka služi za 3d efekat, x rastojanje i blur su 0, a y rastojanje imitira 3d efekat. Boja senke treba da bude tamnija varijanta pozadinske boje samog dugmeta. Druga senka predstavlja osenčenost dugmeta.

Kako bi napravili bolji efekat samog klika, dodajemo tranziciju.

	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;

 Sam utisak pritisnutog dugmeta napravićemo pomoću relativne pozicije:

	position: relative;	

 Krajnji CSS je:

.dugme3d {
    padding: 4px 40px;	
	
    color: rgba(255,255,255,1);
    background-color: #65a9d7;	
    text-decoration: none;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
	
    -webkit-box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);
    box-shadow: 0px 9px 0px #28597a, 0px 9px 25px rgba(0,0,0,.7);
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	
	position: relative;	
}

 

Aktivno stanje će nam služiti za simulaciju pritisnutog dugmeta, tako što ćemo dugme u aktivnom stanju pomeriti za nekoliko pixela na dole. Senka će nam služiti za realniji osećaj.

.dugme3d:active {
    -webkit-box-shadow: 0px 3px 0px #28597a, 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px #28597a, 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px #28597a, 0px 3px 6px rgba(0,0,0,.9);
	
    position: relative;
    top: 6px;
}

 Rezultat je pravo 3d dugme:

3d dugme

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.