Recycling en animeren van pictogrammen met CSS
In het niet zo verre verleden leerden we over revolutionaire technieken om zowel HTTP-aanvragen als KB's op te slaan door het gebruik van beeldsprites. Deze sprites bestonden uit tientallen of zelfs honderden pictogrammen gerangschikt in een afbeeldingsbestand dat later op verschillende manieren in een website werd gesplitst en geserveerd.
We hebben goed gebruik gemaakt van de techniek en vrijwel elke site die zich bezighoudt met schaalbaarheid maakt er gebruik van.
Dankzij de komst van de Transform and Transition-eigenschappen van CSS3 kunnen we een stap verder gaan en enkele standaardlijnsjablonen transformeren naar nieuwe iconen voor toekomstig gebruik - en zelfs animatie in de mix gooien voor een extra bonus !
De techniek is net zo eenvoudig en intuïtief als beeldsprites, en maakt het mogelijk om snel nieuwe pictogrammen in te zetten zonder ooit de beeldsprites te hoeven veranderen.
Recycling van pictogrammen met CSS
Bekijk deze sprite uit de jQuery UI-bibliotheek. Terwijl u doorbladert, zult u merken dat veel van de hier weergegeven pictogrammen eigenlijk variaties op basissjablonen zijn. Een enkel pictogram kan op verschillende manieren worden weergegeven en in hetzelfde bestand worden geplaatst. Veel pictogrammen zijn letterlijk alleen geroteerde versies van hun ouders. Het goede nieuws is dat bij het gebruik van CSS we exact dezelfde techniek kunnen gebruiken zonder de variaties in de afbeeldingsprite te moeten opnemen.
Uit het bovenstaande voorbeeld kunnen we een enkel pictogram nemen en het opnieuw maken voor onze eigen doeleinden, bijvoorbeeld een eenvoudige chevron vanaf de tweede rij omlaag. Met de eigenschap transform kunnen we deze chevron 45deg, 90deg, 180deg uiteraard en voor onbepaalde tijd roteren om veel verschillende vormen uit dezelfde sjabloon te maken.
Basissjabloon (pijl omhoog):
De volgende code trekt de rechthoek omhoog van de afbeeldingssprite en fungeert als onze basissjabloon.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Maak juiste instructie
Het transformeren van onze pijl 90 graden zal de pijl naar rechts richten, zoals hieronder getoond:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Maak een pijl-rechts
Roteer het slechts 45 graden en je krijgt een leuke kleine pijl-rechts bovenaan:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
Het is zo simpel. Met deze methode kunnen we beginnen met een eenvoudige sprite met twee pictogrammen en met heel weinig moeite zes keer zoveel pictogrammen maken voor gebruik in onze interface, wat natuurlijk nog maar het begin is van wat kan worden gedaan.
Een paar transformaties, een of andere mooie positionering en onze icoonfamilie is behoorlijk gegroeid!
Animatie aan de mix toevoegen
Voor een geweldige ervaring kunnen we animatie toevoegen aan de mix. We zullen niet alleen de pictogrammen transformeren, we zullen ze ook omzetten om de transformatie zichtbaar te maken voor de gebruiker. Laten we een ander voorbeeld bekijken, te beginnen met het plusteken hierboven.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Een eenvoudige rotatie van 45 graden transformeert ons plus-pictogram in een handig pictogram Sluiten.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Nu onze transformatie correct werkt, kunnen we een overgang toevoegen aan de mix. Stel je voor dat je een functie op je site hebt om de huidige pagina via verschillende sociale netwerken te delen. Als u op het pluspictogram klikt, wordt de lijst met deelopties geopend en terwijl de lijst wordt geopend, wordt de plus in een subtiel animatie omgezet in een pictogram Sluiten . De beste implementatie die ik hiervoor heb gevonden, is op de iPad-app van FontBook. Bekijk hun implementatie:
Het is hemels. Laten we eens kijken hoe we deze schoonheid tot leven kunnen brengen. Begin met behulp van ons plus-pictogram dat hierboven is gemaakt. Om het te animeren, voegt u gewoon de overgangseigenschap toe aan uw pictogram. In onze overgang specificeren we de eigenschap (transformatie), de duur (0,2s) en tot slot welke timingfunctie we willen gebruiken (lineair).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Nogmaals, het is zo simpel. We kunnen niet alleen nieuwe iconen voor onze bibliotheek maken met alleen CSS, we kunnen ook animaties geven aan elk specifiek element!
Dekking gebruiken voor meer variatie
Het laatste stukje pictogramhergebruik komt in de vorm van het dekkingsobject. Als u uw kernpictogrammen dupliceert voor zwart-wit, kunt u een oneindig aantal tinten / varianten genereren voor gebruik op uw hele site of applicatie.
Een variant met vier afbeeldingen (zoals hieronder te zien) van de bovenstaande sprite kan gemakkelijk worden gebruikt om een tiental keer zoveel pictogrammen te maken, en door de dekking te vergroten of verkleinen, kunt u ze waar nodig plaatsen en ze er nog steeds geweldig uit laten zien.
Het is tijd om groen te worden: recyclen met CSS
Naarmate CSS3 meer grip krijgt, is mijn exemplaar van Photoshop CS5 begonnen met stof verzamelen, en terecht! Met deze techniek van het recyclen van uw pictogrammen kunt u continu nieuwe versies en varianten op uw interfaces implementeren zonder dat u bronbestanden hoeft te openen en omslachtige pictogrammen moet toevoegen aan steeds groter wordende sprites.
De onderhoudstijd daalt en uw tijd besteed aan het lezen van boeken zoals de 4-urige werkweek gaat omhoog! Het is allemaal goud.
Natuurlijk is het meest voor de hand liggende nadeel van dit alles browserondersteuning, echter met de recente push door, nou ja, iedereen om moderne browsers te gebruiken, zullen we kunnen profiteren van nieuwe en opwindende vooruitstrevende technieken. Voel je vrij om blader door enkele voorbeelden van deze techniek.
Op welke andere manieren heb je de bedrijfsmiddelen van je website kunnen recyclen?