background image
glavni reklamni bannerglavni reklamni bannerglavni reklamni bannerglavni reklamni banner
Objavljeno: 12.12.2011 u 12:47.| Izvor: Simple.ba| Autor: Edin Šalja

Kako napraviti elastično dugme? - Verzija:1

Jedna od veoma korisnih css tehnika pri izradi dugme, poznatija kao sliding doors tehnika ili elasticno dugme.
veličina teksta 
Slika: Kako napraviti elastično dugme? - Verzija:1

U ovom članku ću vam pokazati kako da napravite elastično dugme pomoću tehnike sliding doors (klizna vrata). Ova tehnika je veoma jednostavna. Ako želite napraviti dugme koje ima dinamičnu širinu, tj. može da se suzi ili proširi u zavisnosti od količine sadržaja, onda je ovo veoma elegantno rješenje.
Tehnika se sastoji od toga da kreirate sliku koju želite koristiti kao pozadinu za dugme. Zatim treba da tu sliku podijelite na dva dijela – lijevu i desnu pozadinsku sliku. Potrebno je da jedna od slika bude dovoljno dugačka da može obuhvatiti maksimalnu količinu sadržaja, dok druga slika treba da bude što je moguće kraća.

Te dvije slike će se preklopiti i ponašaće se poput kliznih vrata – otuda i naziv same tehnike. Kada se poveća sadržaj dugmeta, povećaće se i širina elementa, a slike koje ste uzeli za pozadinu će se poput kliznih vrata izvlačiti jedna ispod druge.
U zavisnosti od količine sadržaja, dugme će se povećavati i desna slika će se pomjerati u desno. Lijeva slika će biti djelimično prekrivena, u zavisnosti od širine dugmeta. Vidljiv će biti samo onoliki dio koji je potreban da bi dugme obuhvatilo sadržaj. Maksimalna širina ovakvog dugmeta zavisi od dužine ove dvije slike.

1. Priprema slika za dugme

Prvo morate kreirati  jedno zaobljeno dugme u jednom od grafičkih alata, možete za to koristiti Photoshop ili Fireworks.  Potom slike morate podijeliti na dva dijela, na sljedeci način, te ih staviti u folder:

Kada ste to uradili sačuvajte ih u png formatu, sa transparencijom u pozadini.  Sada ćemo polako da pređemo na integraciju ovih slika sa html i css-om. 

 

 

2. Napravite html dokument, u čije je tijelo sajta tj. body tagu smješten link sa ugnježđenim span-om.

<!-- poćetak html dokumenta -->
<html>

<!-- glava html dokumenta -->
  <head>

  </head>
<!-- kraj glave htmla -->

<!-- poćetak tijela dokumenta -->
   <body>
      <a href="#"><span>Link</span></a>
   </body>
<!-- kraj tijela htmla -->

</html>
<!-- kraj html dokumenta -->

3. Nakon toga u ćemo u glavu dokumenta tj. head tag dodati css stil dugmeta i povezati ga sa dugmetom u tijelu html dokumenta.

<head>
    <script type="text/css">
        .elasticno_dugme {}  
    </script>
</head>

4. Povezivanje klase linka sa css stilom dugmeta:

<a href="#" class="elasticno_dugme"><span>link</span></a>

5. Povezivanje spana sa njegovim css stilom

<head>
  <script type="text/css">
        .elasticno_dugme {}   

	.elasticno_dugme > span {} 
  </script>
</head>

Ovo povezivanje html-a i css stila nam je potrebno, zato što ćemo sa atributima koje dodamo stilovima dugmeta i spana, uticati na formiranje ovoga dugmeta.

6. Dodavanje atributa  css stila  klasi "elastično dugme" koji služi za povezivanje pozadinske slike dugmeta služi da zatvari elastično dugme i doda boju slovima unutar linka.

.elasticno_dugme {  background:url(images/sliding-desna-strana.png) no-repeat top right; color:red;.}   
  • atribut background: - definiše pozadinu linka (može biti boja ili slika)
  • vrijednost atributa  url(images/sliding-desna-strana.png) -  u našem slučaju povezuje pozadinsku sliku linka sa css stilom,
  • vrijednost atributa no-repeat  - definiše ponavljanje slike tj. ovo znaći da se slika nijednom neće ponoviti,
  • vrijednost atributa top -  definiše vertikalnu poziciju slike, u ovome slučaju slika će biti pozicionirano prema topu,
  • vrijednost atributa right - definiše horizontalnu poziciju slike, u ovome slučaju lijevo.
  • atribut color - definiše boju slova unutar linka, čija  vrijednost atributa "red" boji slova linka u crveno.
     

Kako ovo izgleda u browseru?

Na slici možete da primjetite, kako pozadinska slika linka nastoji da zatvori dugme, sada bi ovo izgledalo putnije da smo i spanu dodali njegovu pozadinsku sliku, preko koje će ova slika klizati i zatvarati naše dugme. 

Zbog čega naša slika je odsječena?

Naša slika je odsječena radi toga što našem linku nismo definisali visinu, ali do toga ćemo doći postepeno.

7.  Dodavanje atributa css stila ugnježđenom "spanu" unutar linka čija je klasa "elastično dugme", s ciljem da definišemo pozadinsku sliku spana preko koje će kliziti mala pozadinska sličica koja će zatvarati veliku pozadinski sliku spana i stvarati dojam jedinstvenog dugmeta, pored toga ćemo pozicionirati slike na identičan način, zadrživši vertikalno poravnanje slike kao top, a horizontalno poravnanje biće lijevo.

.elasticno_dugme>span {background:url(images/sliding-lijeva-strana.png) no-repeat top left; }

Izgled u browseru:

Sada je slika sa lijeve strane pregazila desnu sličicu. Međutim i ova sličica je odsječena, zato što ni linku ni spanu nije definisan padding i  visina prema visini sličice što je od velike važnosti kako bi elastično dugme dobili svoj pravi izgled i ponašao se kao klizna vrata. 

 

 

 

8. Dodaćemo klasi "elastično_dugme"  atribut height prema visini sličice, te padding ćime ćemo našoj slici dati potpuniji izgled u odnosu na prijašnji i dobiti dugme sa kliznim efektom. 

.elasticno_dugme {  background:url(images/sliding-desna-strana.png) no-repeat top right; color:red; height:24px; padding:3px 3px 3px 0px;}

Izgled u browser:

Sada kada smo definisali  visinu našem linku prema sličici i dodijelili padding top i bottom i desno, vrijednosti 3px dobili smo ovaj izgled. Samo nas korak dijeli da upotpunimo izgled našeg elastičnog dugmeta. 

Atribut height ima vrijednost 24px, prema visini sličice, te padding na svakoj strani osim lijeve. 

 

Zašto element link nema padding 3 sa lijeve strane?

Zato što nam on nebi adekvatno poravnao tj. ravnomjerno poravnao poziciju teksta u odnosu na desnu ivicu manje pozadinske slike u linku koja zatvara naše elastično dugme. 

10. Ostaje nam sada da dodamo visinu našem spanu ugnježđenom unutar linka "elastično_dugme" i dodamo mu padding.

.elasticno_dugme>span {background:url(images/sliding-lijeva-strana.png) no-repeat top left;  height:24px; padding:3px 0px 3px 3px;}

Sada kada smo definisali  visinu našem lspanu prema sličici i dodijelili padding top i bottom i lijevo, vrijednosti 3px dobili smo ovaj izglednašeg elastičnog dugmeta. 

Atribut height ima vrijednost 24px, prema visini sličice, te padding na svakoj strani osim desne, kako bi dobili ujednačen izgled sa svih strana našeg elastičnog dugmeta. 

Ovako naše dugme izgleda kada se u njega doda više teksta.

Naše se dugme neće moći klizati duže od 150px, zbog dužine velike slike u pozadini spana koja je te vrijednosti. Neće mu se moći fiksirati dužina.  Međutim za više teksta u linku koristićemo duže slike od ove u pozadini našeg spana. Naravno ovo je najednostavnija verzija elastičnog dugmeta. S toga ćemo vam pokazati i naprednije tehnike kreiranja dugmadi s efektom elastičnog dugmeta ili kliznih vrata.

 

 

11. Sada nam ostaje samo da napravimo default stanje našeg dugmeta, tako što ćemo klasi "elastično_dugme" dodati atritbut "text-decoration:none;" , kako bi izbrisali liniju ispod linka kod defaultnog oblika linka. Te ćemo klasi "elastično dugme" dodati hover stanje linka time sto cemo dodati atribut "text-decoration:underline;" nasem kodu. 

Defaultno stanje linka

.elasticno_dugme  {background:url(images/sliding-lijeva-strana.png) no-repeat top left;  height:24px; padding:3px 0px 3px 3px; text-decoration:none;}

Hover stanje linka

.elasticno_dugme:hover { text-decoration:underline;}

Sada je naše dugme gotovo. Ovako izgleda njegov kompletni kod i krajnji izgled u browseru.
 

Kod:


<!-- početak html dokumenta -->
<html>
<!-- glava html dokumenta -->
<head>
<style type="text/css">

.elasticno_dugme { background:url(images/sliding-desna-strana.png) no-repeat top right; color:red; height:24px; padding:3px 3px 3px;
text-align:center; text-decoration:none;}

.elasticno_dugme:hover {text-decoration:underline;}

.elasticno_dugme>span {background:url(images/sliding-lijeva-strana.png) no-repeat top left;  height:24px; padding:3px 0px 3px 3px; }

</style>
</head>
<!-- kraj glave htmla -->

<!-- poćetak tijela dokumenta -->
<body>
      <a href="#" class="elasticno_dugme"><span>Link</span></a>
</body>
<!-- kraj tijela htmla -->
</html>
<!-- kraj html dokumenta -->

Konačni izgled u browseru: 

 

 

Ocijenite vijest

Vijest je neocijenjena


Vijesti

proizvodnja_i_prodaja_profesionalnih_rjesenja_za_rastjerivanje_ptica
Alibeg.ba - zaštita od ptica
Proizvodnja i prodaja profesionalnih rješenja za rastjerivanje ptica
prodaja_ribolovne_opreme
Riba.ba - prodaja ribolovne opreme
Prodaja ribolovne opreme
sarajevo_nekad_i_sad
Android aplikacija
Sarajevo nekad i sad
nova_referenca_web_site_kompanije_general_logistic_d.o.o.
Nova referenca
Nova referenca: Web site General Logistic d.o.o.
nova_stara_refenca_redizajn_web_news_portala_televizije_sarajevo
Web portal
Nova stara refenca: Redizajn web news portala Televizije Sarajevo

 

Facebook preporuke

Simple reklame

Google reklame

_ _ _ _ _ _ _ _ _