CSS3
Get flash to fully experience Pearltrees
Quite often I'm given a PSD and asked to convert this into HTML/CSS for the graphic designer. I was given a PSD which was a pricing table and realised that there are ways to improve the look of this just by using CSS . When I put this suggestion forward to the graphic designer they said no and want to me to just make the table and everything else was going to be images.
How To Build A Pricing Table With CSS3 Animation
CSS animations are becoming quite popular thanks to things like this and this . I have been using them quite a bit recently and decided to compile a list of tips for those that haven't spent that much time with them. Here are the things I will be discussing:
CSS Animation, Tips & Tricks - A question from joshuanhibbert
Freebie: Responsive jQuery Slider Plugin Flexslider - Smashing Magazine
When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details).
CSS3 Patterns Gallery
Browser support The patterns themselves should work on Firefox 3.6+ , Chrome , Safari 5.1 , Opera 11.10+ and IE10+ . However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).
Extends the hsl (hue, saturation, lightness) color model to include an alpha (opacity) value which determines how translucent it is. Compatibility hsla(H,S,L,a) Firefox 4+ Safari 5+, Chrome 10+ Internet Exlorer 9+ Opera 11+ Supported by all modern browsers.
CSS3 property exposed: color | css3files.com
CSS3 Segmented Control
A WebKit demo simulating the behaviour of the Segmented Control in Mac OS X 10.7 (Lion). CSS3 has been used for all of the visual design and the transitions. Sadly, the demo is not CSS-only. Minimal jQuery has been used to set the state of the Segmented Control. Update: By request, the demo has been updated to include jQuery animations for browsers that do not support CSS transitions.
Moving Highlight
Published by Chris Coyier I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration for the navigation on their website.
It should come as no surprise that we at Viget love having fun with design . We doubly enjoy working with clients who let us have an appropriate amount of fun with the design of their website or web product. On a recent project, Blair and I had the opportunity to do just that. Watching The Clock Blair designed this clock to reinforce that the user should act quickly to take advantage of the call-to-action.
