De multe ori se poate intampla sa ai nevoie de un buton mai bogat grafic (sa tipe Photoshopu’ din el) dar nu vrei ca la fiecare cerere a clientului sa trebuiasca sa refaci GIF-ul sau JPG-ul respectiv.
Presupunand ca fontul este unul din seria celor folosibile pe web, treaba asta e rezolvabila. Cum?
Folosind doua tag-uri atunci cand definim elementul respectiv, fiecare cu cate un background definit din CSS pe el.
De ce doua? Pentru ca unul sa se ocupe de 2 laturi, iar celalalt de celelalte 2 laturi ale formei (in general dreptunghice) a butonului nostru.
In exemplul dat de mine aici, A-ul ar avea ca background prima imagine, mai lunga (just in case, cine stie cat text o sa fie nevoie sa intre acolo), iar LI-ul ar avea ca background a doua imagine, fiecare cu alinierile date in exemplu.
Mai ai de setat doar niste padding-uri si niste margin-i, si esti gata!
Spor! (si astept comentarii / sugestii / intrebari)
Later edit:
In urma unui comentariu foarte pertinent, Vlad a observat ca abordand asa exemplul asta, partea din dreapta a butonului ramane descoperita, “fara focus”. Asa e.
Rezolvarea vine dintr-o simpla schimbare de background-uri in css: li-ul sa primeasca ca background prima imagine, aliniata left-top, iar A-ul pe a doua, aliniata right-top. In felul asta butonul nostru devine complet acoperit de focus.
Zona verde, cum nu face parte din < a > e inactiva ca link…
Si textul va fi deplasat de pe mijlocul butonului cu cativa pixeli datorita padding-urilor necesare.
Estetica, nu? 🙂
1. Zona verde nu face parte din link, IN CAZUL ASTA, asa e. Daca in schimb, din padding si margin “simetrizezi” situatia si in stanga, faci ca treaba sa fie ceva mai ok.
2. Aceleasi setari de padding si margin pot face ca si textul sa se centreze in buton corect, daca le setezi bine.
3. Un workaround mai putin agreat (pentru ca implica folosirea de cod in plus) este sa adaugi un tag suplimentar la sfarsitul linkului. Ca treaba asta sa mearga bine, trebuie sa stii cate ceva despre cum se pot folosi CORECT pozitionarile absolute intr-un context relativ. Lucru care ma duce la subiectul urmatorului meu mic tutorial.
[…] Scriam acum ceva vreme despre posibilitatea de a crea butoane bogate grafic dar editabile ca text. […]
[…] I used to write some time ago about the possibility to create graphically rich and yet still editable buttons. […]