Quick Tip: Create a Rating System With CSS, Web fonts and Sprites
videos

Quick Tip: Create a Rating System With CSS, Web fonts and Sprites

on Apr 19th 2012 with 24 comments
Tutorial Details
  • Topic: CSS and HTML
  • Difficulty: Confident Beginner
  • Screencast duration: 12 mins
Download Source Files
Demo View It Online
This entry is part 9 of 11 in the Bringing Premium Pixels to Life Session
« PreviousNext »

In this Quick Tip video tutorial I’ll show you how to create a rating system using CSS, web fonts and sprites.

Watch Screencast


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Additional Resources

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Ashley Clarke

    Great Quick Tip, I have never used sprites, but they do seem simple enough.
    I do have a question – if instead of loading 5 images of 20k, you instead load 1 combined image which will be 100k, is there really any benefit to using a sprite?

    Thanks

    Ashley

    • http://www.snaptin.com Ian Yates

      Hi Ashley – the odds are that by combining those 5 images of 20k your resultant sprite would be much less than 100k.

      That aside, you’re also reducing the number of HTTP requests made to the server (the “Hey! Send me an asset!” message a browser makes to the server when loading a web page). Browsers are advised to limit simultaneous HTTP requests to a single domain to two, so multiple assets end up sitting in a queue. Combining your images into fewer files reduces the number of requests and speeds up page load time.

      For more information (if you fancy it) here’s a table showing exactly how many concurrent requests each major browser can potentially deal with.

      Hope that helps!

    • http://miravalledesigns.com/ Patrick Miravalle

      The real benefit of using a sprite is to cut down the amount of http requests that the browser is making in order to display the images. In your case, it would cut 5 http requests down to 1 http request.

      I personally like to use sprites though because it’s a good way to organize similar images that you have, such as social icons for a site. Not to mention that using a sprite usually results in having cleaner code!

      Hope this helps, Ashley!

  • technobulka

    .rate, .rate div, .rate a { background:url(‘rate.png’) 0 0 repeat-x; }
    .rate { width:100px; height:20px; position:relative; }
    .rate div { height:20px; background-position:0 -40px; position:absolute; top:0; left:0; z-index:1; }
    .rate a { float:left; width:20px; height:20px; text-decoration:none; background-position:0 20px; position:relative; z-index:2; }
    .rate:hover a { background-position:0 -20px; }
    .rate a:hover ~ a { background-position:0 0; }





    • technobulka

      and html
      <div class="rate">
      <div style="width:67%"></div>
      <a href="#" title="1"> </a>
      <a href="#" title="2"> </a>
      <a href="#" title="3"> </a>
      <a href="#" title="4"> </a>
      <a href="#" title="5"> </a>
      </div>

  • Kevin Sheppard

    If you want an easier way to make sprites, check out Spritepad from Wearekiss: http://wearekiss.com/spritepad

    • http://www.adipurdila.com AdiPurdila
      Author

      That’s a cool app, thanks for sharing!

    • http://www.vvsol.com Lisa

      I agree. I just registered. It is actually something I need right now for a project I am working on. I was looking for ways to speed up the load time of a site I am working on. I think this will definitely help.

      Thanks.

  • moose

    Is there a link or another tutorial to see this rating system actually function as a rating tool? The contents of this article is great so now I’m actually looking to see this work as a true rating system.

    Thanks, and great job!

  • http://www.nilspedersen.dk Nils

    Hi Adi,

    Great tut as allways.
    I’ve just started digging into sprite, and allready think its awsome.

    - But I haven’t worked with larger images – you know thoes for shops and larger systems and so on.
    - I would therefore be very happy if you could make an more detailed tut – The subject could be from psd to xhtml with sprites?

    Thanks

  • Pingback: Quick Tip: Create a Rating System With CSS, Web fonts and Sprites | Shadowtek Hosting and Design Solutions

  • http://themeforest.net/user/nimbleo nimbleo

    Here’s another sprite tool – helps you get the background-position, width and height of sprites within a spritesheet

    http://www.spritecow.com/

  • supporf

    thank you adi
    it’s always good to see you around

  • Hamid

    thx adi once again:-) i like to see adi’s articles

  • Youssef

    Thank you for sharing this trick. One question… how did you so easily grabbed the hex color of the star ? (@3min40s of the video)

    • http://www.adipurdila.com AdiPurdila
      Author

      I’m using an app called ColorSnapper for that.

      http://colorsnapper.com/

      • Youssef

        Thank you for the trick, and for this great tutorial that you’ve made :)

  • http://www.vvsol.com Lisa

    Thanks AdiPurdila for posting this. I can think of ways to use it. I also would like to know if there are any tutorials using it to create a rating system that users can click on…or would you suggest only using it in this manner? Also thank you for the Colorsnapper app as well. I am it looks like an app that I will use all the time.

  • http://smashzine.com/ Dyzk

    Great tut..it’s always good to see you around

  • http://scottyzen.com Scott

    Thanks for sharing. Very helpful.

  • Ray

    Thank you Adi for this useful tutorial. Can you tell me what Espresso theme do you use?

  • http://damatajhiz.com/ Hamid

    Thank you for sharing this trick.

  • Social Blogsite

    Here’s a better solution. The stars come RIGHT FROM THE NUMBERS, so the search engine and the browser just reads 4.5 out of 5 and… that’s all. No JS, no SVG, no Flash, no Canvas.

    How? my awesome idea, simple html, and my special font. http://socialblogsitewebdesign.com/semantic-yet-seo-friendly-rating-stars/

    It also comes as a progress bar :) http://socialblogsitewebdesign.com/semantic-yet-seo-friendly-graph-bar/

  • RatingSystemFromTheInterWebz

    Cool. I always wanted to make one.

  • Muhammad Raza Ali Khan

    Thanks for the tutorial. Really helpful, I have implemented this using html css and Jquery. I don’t know if my question comes under the scope of your tutorial. But how am going to store the values of each rating? The markup you’ve used has no hidden raido buttons, just images. How can we get values from these images? Please help. I’m stuck at this point.