1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

TUTORIAL - Sprites 2.0, CSS3 Scaleable Tile Sheets

Discussion in 'CSS' started by deathshadow, Dec 30, 2015.

  1. #1
    Just thought I'd share the intermediate to advanced level tutorial I put together over on my site:


    Which covers an alternative to vector image formats, using higher resolution images and having the browser rescale them. It's what Apple does for their UI since they too recognize many of SVG's... shortcomings. I also make sure that there's a graceful degradation plan in place for older browsers that can't do the fancy CSS3 stuff like "background-size".

    I think the next tutorial is going to be about making a mobile menu WITHOUT resorting to JavaScript. Garbage like bootcrap is throwing way too much markup and way too much scripttardery at a relatively simple task since its only functional when CSS3 is present. A lot of the new stuff from CSS 2.1 and 3 lets you do some really surprising things without JavaScript.

    Also, I'd love to hear some feedback on stuff you folks think I should cover. I'd like to stick to intermediate to advanced level stuff that others either aren't discussing, or if others have covered it you think they did so in an incomplete or buggy manner...

    I'm HOPING over at least the next three months to put up at least two major articles, tutorials or reviews per week since this is a one-man show for the moment... with my health where it's at though, stuff will get put on the site when it gets put on the site.
    deathshadow, Dec 30, 2015 IP
    th.sigit and billzo like this.
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Likes Received:
    Best Answers:
    Trophy Points:
    I'd gladly start using fonts for all my logos if we had good (creative) fonts supported by all browsers. That would be ideal. The web safe fonts are too plain for my taste.

    Will scalable images still look slightly fuzzy in retina displays though?
    qwikad.com, Dec 30, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Likes Received:
    Best Answers:
    Trophy Points:
    If you get a decent font editor, you can make a lot of your lineart in fonts... and since webfonts are supported across all browsers (all the way back to IE5)

    Sadly, MOST of the existing fonts and vector images are designed for display at higher resolutions, you get them down to 16px tall in the stripped down renderer that browsers use, they fall apart miserably across platforms with the glyphs typically formed quite badly.

    IF you know what you are doing though, you can make your own font, use a service like fontsquirrel to convert them, and add any images you like to it. Good rule of thumb is to divide your font into a 8x14 grid with the top gridrow as the ascender limit at top and caps-line below that, the 4th line down as your x-height, and 10th line down as your baseline, leaving 3 to four lines free as your descenders. If the "major parts" of your glyph can fit that pattern, you can reliably render the glyph as recognizable down to 14px, sometimes even 12px.

    I've actually made fonts for a number of years, my preferred tool is High-Logic Font Creator. Learning curve is a bit steep if you're not used to working with vectors, but if you can handle Illustrator or a CAD program, you can handle this.

    Though my existing decades of experience with CAD software like Autocad and ProDesign may have made the concepts easier for me to grasp.

    The "fuzzyness" appears because the low resolution image is being scaled up... if you use a higher resolution scaled down, you wont see these problems.

    I say 200% in the tutorial on the idea that currently the largest default enlargement (display-scale) is 1.5x... So going to 2x as the upper limit gives a bit of wiggle room -- kind of like how I say to Mr. Scott your time estimates; figure out how long it should take, then double that on your quote so as to have some wiggle room. It's better to deliver when you say or before, than it is to miss.

    Using the larger image and scaling it down also plays to a concept you'll hear from A&R guys in professional sound studios all the time -- garbage in, garbage out. Every time you process an image you damage it, so the better the "original" you work from, the better your results across the board.

    My site actually uses the scaling technique of a larger image on modern browsers -- without the hover state -- for the site logo. See the relatively clean logo on my site? It's this image scaled down by the browser, at least on CSS3 capable UA's:

    Though I have the fallback in place so legacy browsers get this in a fixed size:

    Similarly, on all browsers since I'm treating it as a content image, that CSS3 logo?

    Is what I'm sending, even though I'm telling it to display as only 240 wide. Looks fine shrunk down, and looks fine on a retina display. Again, this is actually what Apple does in iOS, and I figured if anyone probably knows how to make something like this work on mobile, it's them!

    My social media icons are generated in the same manner:

    Though I also have a font for those as they were designed as vector first, I just used the image as it was smaller than the font file would have been, and has less alignment headaches cross browser.

    I also am able to keep the filesizes under control by making them 8 bit colour palette based, with "close enough anti-aliasing" and one colour palette transparency.

    Scaling down on modern browsers isn't as ugly as it used to be, and doesn't really start to have issues until you get at or below 33% the original size. Again, if you plan for 2x the size needed for your intended "96dpi / 16px default font size" layout, that makes 50% the real world low end, and is over the high end avoiding a lot of the "issues" either direction.

    Also, if you are dealing with photographs instead of line-art, those can be WAY more forgiving of resizing in both directions.
    deathshadow, Dec 30, 2015 IP