Rating script like on YouTube

CSS code in acion:

Author: Free CSS Menus: www.freecssmenus.co.uk

Description: This css rating script uses the sliding doors technique to it full potential. It uses only one image but displays it in different positions upon each hover state. Ever wondered how to replicate a rating script just like on YouTube using CSS? This simple animated rating effect can be easily manipulated to suit your own websites colour scheme. Dont forget, this script uses no javascript, just html and css!

Category: Animation

Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7

Rate this script: Rating: 3.7 / 5
285 ratings.

Comments:

Comments
Comment from: You Tube Rating Script

Here is the example.

Posted on: Monday 28 Nov, 2011
Comment from: 12 letters

Nice work.

Posted on: Saturday 15 Jan, 2011
Comment from: sarwojowo

nice, thanks friends

Posted on: Sunday 21 Mar, 2010
Comment from: Digital CSS Styler

Its a bit basic, but its something to work with for now. Thanks.

Posted on: Sunday 21 Mar, 2010
Comment from: Hinke

Thanks for this excellent script. Saved me a lot of time !!!

Posted on: Thursday 17 Dec, 2009
Comment from: Bailey

Iv'e always wondered how to do this. Ive been sifting through javascript websites trying to find this kind of effect. Top Marks for doing this with simple CSS !!!!!

Posted on: Friday 28 Nov, 2008

Read all Comments

Post Your Comments Post your comments!






Match Random Colour
Match Random Word!
Anti-Spam Image:
anti-spam image Match Image (3 letters then 1 number)

Note: Comments are checked before they are displayed.
Please read our Terms & Conditions before submitting any comments

Top of Page go back to top of page

uklowaprloans

More CSS related to this script:

Bright Yellow Vertical Menu Bright Yellow Vertical Menu. If your website is bright and sunny then add this vertical menu to give it a splash of class. CSS background opacity script CSS background opacity script. Using a PNG image as a background, we can create a smoother effect rather than using just a background colour. The script doesnt run exactly to plan in Internet Explorer but this is because we are trying to style opacity to an image which is already using transparency effects. Try replacing the background image with something a little more basic, to see if it work better in I.E. Big Yellow Button Big Yellow Button. Some visitors to your websites may have poor vision or disabilities which prohibits them from clicking on small buttons easily. This problem is easily remedied with very little css code and minimal effort... and it looks better than your boring old hypertext. Don`t forget that even though scripts like this use images, they are still just hypertext! Rating script like on YouTube Rating script like on YouTube. This css rating script uses the sliding doors technique to it full potential. It uses only one image but displays it in different positions upon each hover state. Ever wondered how to replicate a rating script just like on YouTube using CSS? This simple animated rating effect can be easily manipulated to suit your own websites colour scheme. Dont forget, this script uses no javascript, just html and css! Icon Yellow Rollover Button Icon Yellow Rollover Button. Some visitors to your websites may have poor vision or disabilities which prohibits them from clicking on small buttons easily. This problem is easily remedied with very little css code and minimal effort... and it looks better than your boring old hypertext. Don`t forget that even though scripts like this use images, they are still just hypertext!

Top of Page go back to top of page

Editable Templates:

CSS Website Template: Clean Dark Blue
CSS Website Template: Sea Bubbles
CSS Website Template: Pastel Purples
CSS Website Template: Machine City
CSS Website Template: Neon Light Club

Latest CSS:

Css3 Iphone Menu Pad
Creating an iphone app? how about this funky dark purple menu made in css3. Look ...
Added: Friday 24 Jun, 2011

Huge Expandable Horizontal Menu
You may be thinking that this menu was made with CSS3. Not the case! This menu w ...
Added: Monday 13 Jun, 2011

Matt Cardle Vertical Menu
2010 Xfactors Matt Cardle Menu. This vertical menu shows how a png image can be ...
Added: Saturday 16 Oct, 2010

Sleek Drop-down Menu
A great example of what css can be used to create. This free download from PSDGR ...
Added: Friday 13 Aug, 2010

Bright Yellow Vertical Menu
If your website is bright and sunny then add this vertical menu to give it a spl ...
Added: Tuesday 15 Jun, 2010

Top Rated:

Css rollover uk map te ...
Free rollover map of the Unite ...
Rating 4.3 / 5
4.3 / 5 - 55 Ratings

CSS World Map Rollover
I made the UK rollover map las ...
Rating 4.4 / 5
4.4 / 5 - 43 Ratings

Huge Expandable Horizo ...
You may be thinking that this ...
Rating 4.7 / 5
4.7 / 5 - 21 Ratings

Free Tabbed Navigation ...
Tabbed navigation menus improv ...
Rating 4.6 / 5
4.6 / 5 - 16 Ratings

Transparent Vertical M ...
This vertical golf menu uses a ...
Rating 4.4 / 5
4.4 / 5 - 14 Ratings

CSS Tags:

Templates Z-index Transparency Width Hover Style Hypertext Blog Css Text-decoration Expandable Png Layout 3d Green Button Menu Rating Centering Music Themes Css Solar System Url Style Sheets Image Website Template Block Animation Blue Sliding Doors Gradient Colour Cascading Tabbed Border-radius Watermark Light Metal Wallpapers Depth Rounded Gold Css3 Pink Yellow Xfactor Positioning Purple Rollover Flash Design Iphone Alignment Tutorials Navigation Photo Gallery Vertical Texture List Grey Horizontal Display Forms Background Script Cyan Dark Chrome Border Opacity Corner Font Menu Drop Down Float Icon Red Text Orange Color
100% free online css website builder

Terms & Conditions | Site Map | Contact | asterix templateWebsite Template Builder | Free Templates | Free Wallpapers

W3c compliant (XHTML)    W3c Compliant (CSS)

Web Design    Personal Blogs - Blog Rankings

Css is one of the main ingredients for a User-friendly, Accessible website.
A good web designer should make every effort not to discriminate against those with disabilities.

Thank-you for visiting Free CSS Menus today: Wednesday 22nd of February 2017

free css design inspiration
What is CSS?