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:
Horizontal Gold Menu. This technique of producing a horizontal gold menu shows that it is not always necessary to use an unordered list. Here we have used one DIV tag and a few SPAN tags to position the menu correctly.
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!
Image Rollover Solar System. This example of css uses one main image for the whole solar system and then 9 separate rollover images for each planet. The separate images are carefully positioned using the background-position command. This technique is very simple to do using css, just maybe a little time consuming to adjust every image into position. Some of the images, due to the size of the planet and proximity to the next, needs to use the z-index attribute to overlap or share space. Remember only use z-index on a div which uses the position:absolute attribute.
Dark Flash Metal Menu. You may be mistaken for thinking that this menu was created using flash. CSS, basic xhtml and a single image were the only ingredients used to build this accessible horizontal menu. This and all CSS examples on this site, adhere to strict W3C compliancy.
Latest CSS:
•
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
•
CSS vertical numeric keypad
Stylish CSS vertical numeric keypad. ...
Added: Sunday 03 Jan, 2010
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
Green blue rating
Ever wondered how to replicate ...
4.2 / 5 - 18 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 10 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:
Css3 Image Button Design Float Green Corner Red Css Solar System Rollover Purple Rounded Border-radius Block Rating Opacity 3d Menu Grey Width Cyan Text-decoration Pink Gold Url Centering Dark Vertical Background Light Horizontal Png Style Sheets Cascading Color Forms Style Hypertext Tutorials Positioning Text Website Template Flash Display Navigation Watermark Yellow Hover Script Animation Colour Blue Font Texture Alignment Css Z-index Sliding Doors List Depth Metal Orange Expandable Photo Gallery Transparency Tabbed Templates Border Menu Drop Down Icon Chrome Blog
