«
»

CSS3 gumb (brez Photoshop-a)

Cascading Style Sheets (kratica CSS) nam omogoča izgled spletnih strani, s katerim lahko določamo vizualno predstavitev spletnih strani. CSS3 je zadnji standard za CSS, kateri nam omogoča naprednješe oblikovanje. Na žalost pa CSS3 podpirajo samo novejši brskalniki.

HTML

Z CSS3 bomo naredili in oblikovali gumb. Najprej bomo napisali HTML

PLAIN TEXT
HTML:
  1. <a href="#" id="gumb">Gumb</a>

CSS style

Nato dodamo še CSS style.

PLAIN TEXT
CSS:
  1. a#gumb {
  2.     width: 55px; height: 25px;
  3.     display: block;
  4.     margin: 0px;
  5.     padding: 3px 15px;
  6.    
  7.     color: #aaaaaa;
  8.     text-decoration: none;
  9.     text-align: center;
  10.     font-family: calibri;
  11.     font-size: 15px;
  12.     line-height: 23px;
  13. }

Zgoraj napisana koda je splošna, katera bo delovala v vseh browser-jih. da pa gumb še oblikovno uredimo (brez slik), dodamo še CSS3 kodo.

PLAIN TEXT
CSS:
  1. /* zaobljeni robovi */
  2.     -moz-border-radius: 5px;
  3.     -webkit-border-radius: 5px;
  4.     border-radius: 5px;
  5.     border:1px solid #b5b5b5;   
  6.    
  7.     /* tekst s senco - v našem primeru smo dodali belo barvo */
  8.     text-shadow: 1px 1px 1px #fff;   
  9.    
  10.      /* senca gumba */
  11.     -moz-box-shadow: 1px 1px 3px #cccccc;
  12.     -webkit-box-shadow: 1px 1px 3px #cccccc;   
  13.    
  14.     /* gradient ozadja - deluje tudi v IE7 in IE8 */
  15.     /* Mozilla Firefox */
  16.     background: -moz-linear-gradient(top, #ffffff, #e2e2e2);
  17.     /* Chrome, Safari:*/
  18.     background: -webkit-gradient(linear,
  19.     left top, left bottom, from(#ffffff), to(#e2e2e2));
  20.     /* MSIE */
  21.     filter: progid:DXImageTransform.Microsoft.Gradient(
  22.     StartColorStr='#ffffff', EndColorStr='#e2e2e2', GradientType=0);
  23. }

Gumbu pa na koncu dodamo še hover.

PLAIN TEXT
CSS:
  1. a#gumb:hover {
  2.     cursor: pointer;
  3.     background: #eeeeee;
  4.     color: #4d4d4d;
  5. }

Podobni članki:

  1. LESS CSS
  2. {box-sizing: border-box}
  3. Plačilni sistem Moneybookers v iframe-u
  4. CSS pseudo classes
  5. Odprtje ne-rezidenčnega računa na Hrvaškem brez obiska v poslovalnicah
  6. Dinamično nalaganje slik z jQuerijem

admin || Monday, September 19th, 2011 ob 5:58 am || Oblikovanje, Paketnik.si || RSS 2.0 || Dodaj komentar || Trackback

Dodaj komentar