9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:

    Bijdrager
    computer space

    Vraagje over CSS sprites

    Ik zie steeds meer sites waarbij iconen niet meer in losse PNG/GIF bestanden zitten, maar naast elkaar staan in één bestand om de HTTP requests laag te houden.

    Probleem daarbij is dat het enkel werkt als background image. Je kunt geen uitsnede aangeven voor een gewone image.
    Maar op een background kun je niet klikken.
    Wat is de beste methode om CSS sprite buttons klikbaar te maken? Met een 100% transparante void.gif eroverheen? En wat is het beste qua performance met zo’n transparante sprite. 1×1 pixel is misschien leuk voor de bestandsgrootte, maar dan wordt de renderaar van de browser hws helemaal gek. Is daar een optimum voor?
    Het gaat om buttons zonder tekst, anders zou je daar nog op kunnen klikken.


    Bijdrager
    Jakko Westerbeke
    <a href="link.html"><div class="sprite"></div></a>

    misschien?


    Bijdrager
    Shmoo

    Buttons worden nog maar zelden gemaakt met afbeeldingen. Sprites zijn een beetje uit de tijd gevallen omdat je zoveel gewoon met CSS kunt maken en stijlen op vandaag.

    Gebruikt bijv. background-color: rgba(255,255,255,0.5); waardes om transparantie toe te passen, in dit geval 50% op wit, voeg daar nog eens een transition ease-… aan toe en je hebt erg vloeiende effecten waarvan je niet eens zou denken dat ze gemaakt zijn via CSS.

    En de opacity 0.5; kun je nog gebruiken om de hele content binnen die div te voorzien van een transparantie, dus niet alleen de achtergrond-kleur.


    Bijdrager
    computer space
    Shmoo op 11 maart 2014

    Buttons worden nog maar zelden gemaakt met afbeeldingen

    Waar dan wel mee? Toch niet met de ellende van WOFF fonts? Als je bijvoorbeeld een shopping-cart knop wilt hebben in meerdere kleuren…


    Bijdrager
    Shmoo

    Gewoon met CSS je kunt toch de background gradient attribute gebruiken om meerdere kleuren en/of verlopen te maken op je button of je daarna de tekst op de button gewoon met een standaard web-safe-font opmaakt of kiest voor een web-font is natuurlijk een keuze die je zelf moet maken.

    Kijk eens naar dit voorbeeld, daar wordt geen enkele afbeelding in gebruikt om dit na te maken.

    Natuurlijk is dit over de top en alleen gemaakt om te laten zien wat er mogelijk is met CSS want om dit te maken heb je zo’n 2500 regels CSS nodig en dan moet je je afvragen of een afbeelding laden in de pagina waarschijnlijk niet slimmer is om te doen.


    Bijdrager
    Wyodor

    Met div als display table of als a href display table

    http://responsive.2kool4u.net/tables/
    http://responsive.2kool4u.net/antarctica.html

    En hier een background hover :

    http://responsive.2kool4u.net/clock/

    Beide combineren en je hebt het resultaat wat je wilt.


    Bijdrager
    Wyodor

    En als de achtergrondafbeelding niet al te groot is kan je die encoden zoals te zien in deze css :

    http://responsive.2kool4u.net/css/3-steps.css

    En om vragen voor te zijn :

    http://www.google.nl/search?q=base64+encoded+image


    Bijdrager
    computer space
    Shmoo op 11 maart 2014

    Kijk eens naar dit voorbeeld, daar wordt geen enkele afbeelding in gebruikt om dit na te maken.

    Natuurlijk is dit over de top en alleen gemaakt om te laten zien wat er mogelijk is met CSS want om dit te maken heb je zo’n 2500 regels CSS nodig en dan moet je je afvragen of een afbeelding laden in de pagina waarschijnlijk niet slimmer is om te doen.

    Dat is zeker over de top. Zoom eens in voor de grap, dat gaat helemaal mis. Ziet er dan niet meer uit.
    Volgens mij hebben we daar gewoon SVG over, kan bovendien inline…..

    Die 2kool4you links werken allemaal niet.


    Bijdrager
    Shmoo

    Daar moet je natuurlijk ook heel erg kool vier zijn.;)

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.