Rating script like on YouTube
The working code: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
Comments:
Comment from: Digital CSS StylerIts a bit basic, but its something to work with for now. Thanks.
Comment from: HinkeThanks for this excellent script. Saved me a lot of time !!!
Comment from: BaileyIv'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 !!!!!
More CSS related to this script:
Bright Yellow Vertical Menu. If your website is bright and sunny then add this vertical menu to give it a splash of class.
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!
Borders Grey and Curved. Creating curved corners for your containers can be a tricky business, espacially when you want them to expand and collapse for different volumes of content. This code does the job, the only problem is the top right and top left images can become overlapped when the container is at its smallest.
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!
Orange CSS Rollover Button. This orange css button has been refined to contain only one image. Other rollover buttons of this nature would normally contain two images. Here we use the: background-postion command to display the image in four different positions. Why four? Well the normal state (no hover)has both left and right edges which are needed so that the button can stretch with more text. Apon the hover state the button uses another two edges.
Latest CSS:
•
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
•
Transparent Vertical Menu
This vertical golf menu uses a simple PNG image to give some transparency so tha ...
Added: Saturday 17 Apr, 2010
•
css3 Border Radius
CSS Border radius achievable with CSS3.
I do love the idea of creating corner ...
Added: Tuesday 06 Apr, 2010
•
Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
CSS World Map Rollover
I made the UK rollover map las ...
4.4 / 5 - 34 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 11 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.4 / 5 - 9 Ratings
Image Rollover Solar S ...
This example of css uses one m ...
4.9 / 5 - 7 Ratings
CSS Tags:
Corner Icon Grey Border Vertical Horizontal Float Hypertext Pink Cyan Block Forms Css Style Alignment Tutorials Templates Text Css3 Depth Flash Display Green Dark Blue Positioning Menu List Css Solar System Light Cascading Photo Gallery Website Template Animation Blog Watermark Rollover Design Menu Drop Down Chrome Red Yellow Image Sliding Doors Hover Transparency Border-radius Orange Url Centering Tabbed Width Rating Expandable Z-index 3d Colour Navigation Background Opacity Gold Text-decoration Font Metal Style Sheets Script Rounded Texture Button Purple Png Color
