SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking TalkJesus.com assistance with CSS / Sprite

    I'm trying to optimize the mobile skin for talkjesus.com to be retina clear.


    I accomplished this with standalone images such as the facebook/twitter icons, the logo and the top right 3 icons in the header as well.


    Problem I'm having is doing this for the sprite image entirely.


    This is the css code (default)


    .ui-icon, .ui-icon-searchfield:after {
    background-image: url({vb:stylevar imgdir_mobile}/metro-icons-24.png);
    border-radius: 0;
    background-color: transparent;
    }
    .ui-icon-plus {background-position:-0 50%}
    .ui-icon-minus {background-position:-28px 50%}
    .ui-icon-delete {background-position:-56px 50%}
    .ui-icon-arrow-r {background-position:-84px 50%}
    .ui-icon-arrow-l {background-position:-112px 50%}
    .ui-icon-arrow-u {background-position:-140px 50%}
    .ui-icon-arrow-d {background-position:-168px 50%}
    .ui-icon-check {background-position:-196px 50%}
    .ui-icon-gear {background-position:-224px 50%}
    .ui-icon-refresh {background-position:-252px 50%}
    .ui-icon-forward {background-position:-280px 50%}
    .ui-icon-back {background-position:-308px 50%}
    .ui-icon-grid {background-position:-336px 50%}
    .ui-icon-star {background-position:-364px 50%}
    .ui-icon-alert {background-position:-392px 50%}
    .ui-icon-info {background-position:-420px 50%}
    .ui-icon-home {background-position:-448px 50%}
    .ui-icon-search,.ui-icon-searchfield:after {background-position:-476px 50%}
    .ui-icon-checkbox-off {background-position:-554px 50%}
    .ui-icon-checkbox-on {background-position: -530px 50%;}
    .ui-icon-radio-on {background-position: -577px 50%;}
    .ui-icon-radio-off {background-position: -601px 50%;}

    This is the original sprite:
    http://www.talkjesus.com/images/metr...o-icons-24.png


    This is the new one I made, 64px:
    http://www.talkjesus.com/images/metr...o-icons-64.png


    By default the retina style image should be at least 2x larger than the size that will be applied. In this case, it is 24px original but I do not know how to modify the css code to reflect the new dimensions so it pulls the correct icon from the 64px version while still displaying at 24px live.


    Thanks for your help
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    At the moment it looks like you are using individual, inline images? That makes it easier. Just set the width and height to the desired dimensions in the CSS.

    It's harder to do this with background images. The only way is to create a container set to the width and height you want, and then use the background-size property. This only works in modern browsers, though.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    What is "retina clear"?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    What is "retina clear"?
    Some devices now have "retina" screens (e.g. iPhone, iPad), which are much higher resolution than regular desktop screens. Thus, most images look a bit blurry and pixelated on these nice screens. So are lot of people are trying to find ways to make images crisper on these devices. One method is to make the image twice the required dimensions and then squeeze it down to the desired size, making it much sharper on screen.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Ralph. That's what I thought, but I had not read the expression "retina clear" before and wasn't positive.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    I had not read the expression "retina clear" before
    Let's just say it's "non standard". I think the point is that the images need to be crisp and clear on retina devices.

  7. #7
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    At the moment it looks like you are using individual, inline images? That makes it easier. Just set the width and height to the desired dimensions in the CSS.

    It's harder to do this with background images. The only way is to create a container set to the width and height you want, and then use the background-size property. This only works in modern browsers, though.
    Thanks. No, I'm not using inline images. I gave you the link to the sprite of the original background image used.

    I do not know how to modify the CSS correctly to represent the new positioning of the larger, 64px sprite I made and reduce it down to 24px in the css code. This is where I'm stuck.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The example I looked at was using an inline image—the gray arrow one in the middle. Perhaps clarify which images you are talking about, as there are lots on the page.

  9. #9
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The example I looked at was using an inline image—the gray arrow one in the middle. Perhaps clarify which images you are talking about, as there are lots on the page.
    Ralph,

    The concern/focus here is the sprite links I posted. Not anything else. There's the original 24px sprite and there's my 64px version. I want to use the 64px (reduced down to 24px in the CSS code) for retina quality purpose. The 64px will replace the 24px sprite image file.

    Where I'm confused is how to properly modify the CSS code to adjust the 'positions' of the icons in the 64px sprite.

    Hope that's clear enough.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Well, the problem is that you haven't presented a practical example of this, because CSS and an image on their own are not enough. To give a specific answer that relates to your site, we need to see the HTML you are working with, as that's critical. Anyhow, I'll attempt a general answer.

    Your only hope in this situation is to use a bit of CSS3, though that won't work in older browsers, so beware. Your original CSS does the usual things of positioning the sprite as a background image on an HTML element. The difficulty now is that you want to scale the background image, which you can do with the CSS3 background-size property.

    So, if you say had a div of width 24 x 24px, you would set the background image as usual, along with background position, but use background-size to resize the image to suit. Here's a simple example with the image you provided:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    div {
    	width: 24px; 
    	height: 24px;
    }
    
    div.one {
    	background-image: url(http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png);
    	background-position: 0 0;
    	background-size: auto 24px;
    }
    
    div.two {
    	background-image: url(http://www.talkjesus.com/images/metro_mobile/blue/mobile/metro-icons-64.png);
    	background-position: -24px 0;
    	background-size: auto 24px;
    }
    
    </style>
    </head>
    <body>
    
    <div class="one"></div>
    
    <div class="two"></div>
    			
    </body>
    </html>
    If you want this to work on older browsers, you'll perhaps need to serve up code like this in a media query, with fallback code for older browsers using the smaller image.

    Hope that helps.

  11. #11
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph. I fixed it by simply reducing the 64px to 48px (double the original) and simply adding background-size: auto 24px to the CSS.

    Thanks again!
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •