background preloader


Facebook Twitter

Demo – An Introduction to CSS 2.1 and CSS 3. Start Experimenting With CSS3 Keyframe Animations. You can now produce stunning animations with CSS3.

Start Experimenting With CSS3 Keyframe Animations

Did you know that? Of course you did. CSS3 animations are the new kid on the block. It's a big step. Although they haven't really taken centre stage yet as only the webkit browsers support them. For this reason they're used sparingly, in a lot of cases for experimental purposes or as 'hidden gems', but that doesn't mean you should shy away from getting stuck in. It was only recently I experimented myself so I thought I'd share a beginner's demo with you. How to do CSS3 keyframe animations Keyframe animations involve you setting the object state (or property) at different stages of an animation. Setup the environment. Practical Uses of CSS3. We are certainly at an interesting point in time with the web.

Practical Uses of CSS3

There are new techniques being created every day, and as developers, we have the privilege of deciding how and when to use them. I'm the new guy at Viget (only been here a few weeks), and every company is different, so it is interesting adapting to Viget's standards. Some companies utilize progressive enhancement more than others, and I love that we utilize it when we can. One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers.

The future of CSS layouts. Net magazine is the number one choice for the professional web designer and developer.

The future of CSS layouts

It's here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. In short, If you're serious about web design and development, then net is the magazine for you. Editorial Oliver Lindberg, editor, Ruth Hamilton, production editor, Mike Brennan, art editor, Advertising.

CssFx.js - CSS3 property polyfill - It's So Futuristic, Baby! CssFx cssFx adds vendor-specific prefixes to your stylesheets.

cssFx.js - CSS3 property polyfill - It's So Futuristic, Baby!

How it works When the document has finished loading, internal (<style>) and external (<link>) stylesheets are processed, fetching any @import stylesheets as well. It's recommended to bundle stylesheets into one file to minimize request overhead. Once processing is done, a new <style> tag is appended to the <head> with processed properties. CSS3 Cookbook: Cutting Edge Text Effect and Web Typography Tutorials. CSS3 Dropdown Menu. While I was coding the Notepad theme, I've learned some new CSS3 features and now I would like to share it with you.

CSS3 Dropdown Menu

View the demo to see a Mac-like multi-level dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down.

CSS Code I'm not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image. Css3 drop shadow generator. 10 Useful CSS3 Tools for Your Next Web Development. HTML5 always an important phenomenon within web design community.