Even een korte tutorial met een handigheidje waar ik achter ben gekomen tijdens het ontwerpen van een set buttons voor een back-office interface.

Wat ontwerpers vaak doen ik vaak doe is een background image maken voor een button. Deze image werd dan ingesteld als achtergrond van de <input> button met een repeat-x parameter (CSS) waardoor de image wordt meegerekt over de breedte van de button.

Mijn ervaring met buttons is dat ze vaak moeten wisselen van kleur, waardoor je dus meerdere images voor meerdere buttons in zal moeten laden, wat weer ten koste gaat van de performance van je site. Hier komt nog bij dat kleurinformatie vaak de bepalende factor is bij de grootte (in bytes) van images. Hoe meer verschillende kleuren, hoe meer kleurinformatie er opgeslagen moet worden, hoe groter de image zal worden, dit geldt in het bijzonder voor gradients bijvoorbeeld. Bij dit artikel gaat het vooral om recyclability van je HTML/CSS en images. Voor performance tips verwijs ik je naar dit artikel.

De Oplossing

Mijn oplossing hiervoor is als volgt: Men neme een standaard input button zoals deze

Voor deze button maken we in Photoshop een 1×1 pixels. Hier maken we een nieuwe layer op, vullen deze met wit (met 55% transparancy) en de background layer zetten we uit of verwijderen we.

Vervolgens kiezen we voor “Save for Web” en bewaren deze image als PNG 24 formaat, genaamd gloss.png. Het PNG formaat zorgt ervoor dat onze image zijn transparantie behoudt.

Vervolgens geef je in de CSS class aan welke kleur je deze button wilt geven en eventueel ook een border voor.

.button {
width: 100px;
height: 26px;
background: #2a7ee9 url(gloss13px.png) top repeat-x;
border: 1px solid #1f54bc;
font-size: 1.2em;
color: #FFFFFF;
}

De truc zit hem in deze regel:
background: #2a7ee9 url(http://www.digitael.nl/wp-content/uploads/2008/10/gloss13px.png) repeat-x top;

Als we dit ontleden dan zou je als je de boel voluit zou schrijven de volgende CSS regels zien:

background-color: #2a7ee9;
background-image: url(gloss13px.png);
background-repeat: repeat-x;

background-position: top;Deze regels geven eerst een kleur, daarna een background over de kleur heen en tot slot wordt aangegeven dat de background horizontaal moet herhalen. Repeat-X betekent horizontaal, Repeat-Y betekent verticaal, Repeat (zonder extensie) zal de afbeelding zowel horizontaal als verticaal herhalen (tilen) en Background-Position geeft aan vanaf welke plek (top/bottom/left/right) de afbeelding vertoond moet worden.

Lang leve de short notaties in CSS, want het kan dus ook in 1 regel zoals hierboven beschreven. Deze regel geeft onze button dus een background kleur, stretcht hier vervolgens onze “glimmende” layer overheen zodat er een glossy plastic look ontstaat. Het belangrijkste van deze opzet is dat je eenvoudig de kleur van je button aan kunt passen, zonder de images iedere keer te hoeven opslaan.

Nu valt je misschien op dat de afbeelding die wordt gebruikt gloss13px.png heet, zoals je misschien al kunt raden is dit een beetje een vieze oplossing omdat op deze manier je button maar maximaal 26 pixels hoog kan zijn Het mooiste zou natuurlijk zijn dat je een afbeelding van 1 bij 1 pixel gebruikt zodat je het maximale uit je repeater image haalt qua optimalisatie. Ook hier is een oplossing voor en wel de volgende!

.container {
width: 100px;
height: 27px;
position: relative;
display: block;
}

.container span {
width: 100%;
height: 50%;
background: url(pixel.png) repeat;
position: absolute;
display: block;
}

.button {
width: 100px;
height: 26px;
display: block;
border: 1px solid #1f54bc;
background: #2a7ee9;
font-size: 1.2em;
color: #FFFFFF;
}

Dit heeft als pluspunt dat je alleen HTML kleurcodes gebruikt, wat dus weer de performance van je site ten goede komt. Onze PNG image is ten slotte transparant en is onafhankelijk van de kleur waarop deze wordt gebruikt. Tot slot heeft dit nog een groot voorbeeld: de image wordt maar 1x geladen, dus of je nou 1, 10 of 300 buttons op 1 pagina hebt staan, gloss.png zal maar 1x ingeladen worden door je browser waarna deze gecached wordt. Dit betekent dat ik net zo makkelijk een rode, blauwe of groene button kan maken en dat deze buttons weinig overhead hebben qua laadtijd.

Dit heeft als eindresultaat de volgende button:

Inderdaad! Helemaal hetzelfde, maar wel hetzelfde resultaat met 1 pixel. Daar komt bij dat je de button zo groot of klein kunt maken als je zelf wilt door het aanpassen van de width/height settings, waardoor de button zeer scalable en recyclebaar wordt Re-usable code, en daar houden we nou enorm van!

Ok ik krijg gewoon geen CSS code samples in Wordpress, iemand hier tips voor? Hier alles in een ZIPje in ieder geval!

Download Source

Tags: CSS, Design, HTML, Photoshop