Group items tagged

HTML5 and CSS3 are bringing new features to us and in this article you'll be able to find some great tools, cheat sheets and much more you could need to master these new features.

As a web community, we've made a lot of exciting progress in regards to CSS3. We've put properties like text-shadow & border-radius to good use while stepping into @font-face (not a CSS3-property) and visual effects like transitions and animations. We've also spent a great deal of time debating how and when to implement these properties. Just because a property isn't widely supported by browsers or fully documented at the moment, it doesn't mean that we shouldn't be working with it. In fact, I'd argue the opposite.

The tabs in this demo are image-less tabs with 4 different CSS3 enhancements: Rounded Corners (border-radius) Box Shadow (bottom of inactive tabs) Transitions (the glow on hover) Gradients (the active tab)

Denise Jacobs reveals her top tips on how to use the most exciting CSS3 properties - and provide fallbacks for older browsers

Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

"CSS3 is a wonderful thing, but it's easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria."

In my previous posts, we discovered how to create speech bubbles and ribbons without additional HTML elements or images. They were achieved using CSS3 effects applied to the :before and :after pseudo-elements. In this post, we'll use a similar technique to create a paper curl effect.

Our Solar System Experiment in Html5 & Css3 Animations Transforms and Border Radius. Demo Of Css Solar System Animation At W3 Course

Today's front-end developers don't just need to understand how to write CSS, we need to know how to write it efficiently. And what "efficiently" means can depend on your project and environment. Perhaps you have a team with several members working in the CSS and you need an efficient way to work together. Or maybe you have a huge enterprise site and you need your CSS optimized for speed. You could even be working with a legacy system that restricts access to HTML, which means you need efficient selectors to effectively style elements without ids or classes. You might even face all these situations and more.

Chris Spooner shares a nice tutorial on how you can create a vibrant digital poster design with CSS3. His Circlicious design is made purely of HTML and CSS. Take note that this is only suited to modern browsers of Firefox, Safari and Chrome.

Here's another cool navigation menu that I came across. Created by the savvy web developers at Script-tutorials, the LavaLamp menu is a navigation menu that is made with pure CSS3.

Once again, Mary Lou's great CSS3 tutorial shows you how to create a neat sliding image panels.

Flot is an Attractive and powerful pure JavaScript graph/ chart library for jQuery. CSS3 jQuery Interactive Graph

In this article you will find a comprehensive selection of tutorials and techniques that make use of some exciting and fresh CSS3 properties and injected this with some innovative jQuery.You will some truly creative image galleries/sliders, a marvelous selection of innovative navigation techniques, a handful of original form solutions and the rest of the tutorials cover almost all aspects of web design. Hope you find them useful.

"What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I'll show you how in today's video tutorial. "

A nice video-tutorial in CSS3 Buttons, yum yum...

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site. A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class. Throughout our previous posts, we have covered a few new CSS3 pseudo-classes, including :not, :before and :after, :first-of-type and we also use pseudo-classes in ...

Since CSS shapes are becoming more important to website development, I thought that a simple list of how to create the most common shapes was in order. You'll find that most of these shapes are very simple to achieve and that they are not that complicated at all. However, at the same time they will save you a lot of trouble.