Original Hover Effects with CSS3. The Shapes of CSS. A circular menu with circular sub menus. A Circular menu with circular sub menus For IE9, IE10, Firefox, Opera, Safari and Chrome 18th July 2011 copyright © stu nicholls - CSS play Information Using CSS3 Transforms and Transitions to produce an animated circular icon menu with circular icon sub menus. Just hover the single icon to see it animate into six icons in a circular pattern. The animation will be seen in Firefox, Opera, Safari and Chrome, with IE9 and IE10 seeing an instant appearance of the top level and sub level icons. Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright.
Terms and Conditions This demonstration can be used subject to the following terms and conditions. CSS1K. So What is This About? Back in 2003 (that's 9 years ago!) Dave Shea launched the CSS Zen Garden. It showcased what was possible with CSS-based designs, leading to an explosion in the use of CSS on the web. More recently, Peter van der Zee created JS1k, a competition to build cool applications with no more than 1 K of JavaScript. A lot has happened since the Zen Garden days, and today you can do almost anything with only CSS. Do we need that much? Participation Submissions must consist of only CSS Submissions may be up to 1 K (1024 bytes) minified Vendor prefixes are not counted to the total number of bytes – submit your code unprefixed and we will add necesssary prefixes Any external resources and images, including data URI's, @font-face and @import's, are forbidden The page does not have to look the same in every browser, but graceful degradation is encouraged The submitted code is licensed under the MIT License.
CSS3 and HTML5 Toolbox Starter - Noupe Design Blog. Jun 01 2011 As designers and developers we tend to always be on the look out for awesome resources to add to our virtual toolboxes. With the web design landscape moving in the direction of CSS3 and HTML5 we thought that we would help our readers find a few choice tools to start building up their toolboxes. So we went out across the web looking for some of the top offerings from the development and design community that can help get you started on using CSS3 and HTML5 today.
So take a look down through the round up of available resources that you can hopefully find some tools that you have not come across before, and that can help aid both designers and developers alike. CSS3 Tools CSS3 Button Maker This intuitive tool from CSS-Tricks is labeled a “CSS3″ button maker owing to the fact that it makes use of gradients, shadows, and rounded corners which are generally not supported in older browsers. CSS3 Maker CSS3 Please How about a handy cross-browser CSS3 rule generator? Modernizr CSS3 Pie (rb) CSS3 Generator - By Eric Hoffman & Peter Funk. Ben the Bodyguard. Coming soon to iPhone® and iPod touch® CSS3 presentation. Why is it a problem? Maintenance hell Consumes more bandwidth More http requests ⇒ slower Style harder to understand Users get to see the page without them 1x1 png background images, if needed as a background background: url('/colors/black-0.75.png'); 1x1 png background images + extra markup, if needed for a solid border No known workarounds for many other cases RGBA and HSLA Can be used just like any other color, anywhere RGBA = RGB + Alpha, HSLA = HSL + Alpha Alpha = How transparent?
(0-1) HSL is a more intuitive way to describe RGB And this is some text Firefox Fullsupport Google Chrome Opera Apple Safari Internet Explorer * Assumes latest beta 3 extra container elements 4 background images, one for each corner, or one huge image border-radius: 20px border-radius: 40px / 20px border-radius: 40px 10px border-radius: 40px 50% 0 border-radius: 40px 50% 0 10px Note: There are also individual properties for that, e.g. border-top-left-radius With-moz- box-shadow: 10px 5px 15px rgba(0,0,0,.5) With-webkit-