Butoanele W3C fără imagini
Nota: Butoanele W3C de pe aceasta pagina sunt facute fara imagini folosind XHTML pur si Cascading Style Sheets (CSS), care nu sunt in mod corespunzator suportate de browsere ca Internet Explorer 4 si Netscape Navigator 4.
Icoane originale W3C
Doar de trimitere, butoanele originale (imagini) sunt aici:
Uita-te la ele indeaproape, aceasta este ultima data cand puteti vedea o imagine de pe aceasta pagina.
Un un pixel perfect, aproape...
Desi este posibil sa se faca pe butonul W3C CSS pixel aproape perfecte utilizand numai, dupa cum puteti vedea in exemplul de mai jos, aceasta abordare are o multime de neajunsuri.
XHTML 1.0 v W3C XHTML 1.0 vCele mai importante aspecte sunt:
- Numai stanga (alb) jumatate se poate face clic in Internet Explorer (butonul ansamblu este clickable in Mozilla si Opera).
- Stil diferit este necesar pentru butonul cu un nume mai spec. (cum ar fi XHTML 1.0) si cu unul mai scurt (de exemplu, CSS).
- Imaginea pauze, in cazul in care un utilizator schimba dimensiunea fontului.
De aceea am aruncat aceasta solutie si am incercat altul.
Butoane Redimensionabil
Ieri am ajuns sa Antipixel (prin Zeldman ) si a fost impresionat de butoanele W3C subtire acolo. Singura lor dezavantaj a fost faptul ca acestea au fost imaginile. Deci, aici sunt similare cu butoane subtire facut cu XHTML si CSS numai:
Acestea sunt fluide, si anume aveti posibilitatea sa modificati dimensiunea fontului din browser-ul si schimba marimea lor, de asemenea. Ei au doua parti clickable (una alba pe partea stanga si unul galben de pe dreapta), care pot legatura intr-doua tinte diferite. Acestea ar trebui sa arate bine in Internet Explorer 5 +, Opera si Mozilla. Fara a CSS acestea sunt link-uri pur si simplu text.
Cod
XHTML
XHTML (sau HTML, daca il preferati) codul este foarte simplu:
<div class="w3cbutton1">
<a class="w3c1" href="...">W3C</a>
<a class="spec1" href="...">XHTML 1.0</a>
</div>
<div class="w3cbutton1">
<a class="w3c1" href="...">W3C</a>
<a class="spec1" href="...">CSS</a>
</div>
Fara a foi de stil butoanele sunt doar link-uri simplu:
Sugestie: Pentru a preveni problemele de context dependente in IE5/Win, includeti fiecare buton pe un alt <div>.
CSS
CSS este un pic mai sofisticate:
div.w3cbutton1 {
position: relative;
margin: 1em 0;
font-family: helvetica,arial,sans-serif;
font-size: 70%;
font-weight: bold;
}
div.w3cbutton1 a {
display: block;
border-top: 1px solid #cecece;
border-bottom: 2px solid #4a4a4a;
}
div.w3cbutton1 a.w3c1 {
width: 3em;
border-left: 1px solid #cecece;
text-align: center;
}
div.w3cbutton1 a.spec1 {
position: absolute;
left: 3em;
top: 0;
width: 6em;
border-right: 2px solid #4a4a4a;
padding-left: 0.5em;
}
div.w3cbutton1 a.w3c1:link,
div.w3cbutton1 a.w3c1:visited,
div.w3cbutton1 a.w3c1:hover {
background-color: #fff;
color: #0c479d;
text-decoration: none;
}
div.w3cbutton1 a.spec1:link,
div.w3cbutton1 a.spec1:visited,
div.w3cbutton1 a.spec1:hover {
background-color: #fc6;
color: #000;
text-decoration: none;
}
Variatii
Deoarece foaia de stil de mai sus este destul de complex, iar unele defecte minore au fost raportate in IE5/Win si IE5/Mac, am dezvoltat un tanar de variatii. Ei au toate impartasesc acelasi cod HTML:
<div class="w3cbutton3">
<a href="...">
<span class="w3c">W3C</span>
<span class="spec">XHTML 1.0</span>
</a>
</div>
Exista o singura legatura intr-acum si butonul de astfel poate punctul de la o singura tinta numai.
Simplu
.w3cbutton3 {
margin: 1em 0;
width: 9em;
border: 1px solid #ccc;
font-family: helvetica,arial,sans-serif;
font-size: 70%;
font-weight: bold;
}
.w3cbutton3 a {
display: block;
width: 100%;
}
.w3cbutton3 a:link,
.w3cbutton3 a:visited,
.w3cbutton3 a:hover {
background-color: #fc6;
color: #000;
text-decoration: none;
}
.w3cbutton3 span.w3c {
padding: 0 0.4em;
background-color: #fff;
color: #0c479d;
}
Animat
.w3cbutton4 {
margin: 1em 0;
width: 9em;
font-family: helvetica,arial,sans-serif;
font-size: 70%;
font-weight: bold;
}
.w3cbutton4 a {
display: block;
width: 100%;
}
.w3cbutton4 a:link,
.w3cbutton4 a:visited,
.w3cbutton4 a:hover {
background-color: #fc6;
color: #000;
text-decoration: none;
}
.w3cbutton4 a:link,
.w3cbutton4 a:visited {
border-top: 1px solid #cecece;
border-bottom: 2px solid #4a4a4a;
border-left: 1px solid #cecece;
border-right: 2px solid #4a4a4a;
}
.w3cbutton4 a:hover {
border-bottom: 1px solid #cecece;
border-top: 2px solid #4a4a4a;
border-right: 1px solid #cecece;
border-left: 2px solid #4a4a4a;
}
.w3cbutton4 span.w3c {
padding: 0 0.4em;
background-color: #fff;
color: #0c479d;
}
Compatibilitate
Butoanele de mai sus ar trebui sa arate bine in IE5 + / Win, IE5/Mac, Opera 7 si toate browserele bazate pe Gecko-(Mozilla, NN6 +). Voi aprecia observatiile dumneavoastra intr-un alt browser. Multumesc.