CSS3

In this article you’ll learn how to create a nice contact form completely out of HTML5 and CSS3.

In case you weren’t aware, CSS animations are awesome. They’re smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo’s mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application’s JavaScript footprint. One of my favorite effects is the spinning, zooming CSS animation. Let me show you how it’s done!

We are extremely excited to be able to provide vendor-prefixed support of CSS3 Gradients in Internet Explorer 10 Platform Preview 1! CSS3 Gradients comes from a subsection of the CSS3 Image Values and Replaced Content specification, which is still in Working Draft status. Using CSS markup, a gradient image is generated by the browser and can be rendered where CSS images are permitted. In Platform Preview 1, CSS3 gradients can be used as a background-image.

If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a tooltip for it. Why’s that? Because, as they have proved till now, tooltips can help you improving your website usability.

Having said that, in this article you’ll learn how to create your own CSS tooltips: no images, no javascript.

When IE9 was released, I was really happy to see all the great CSS3 features it supported. 2D Transforms, advanced selectors, border-radius, rgba/hsla colors, WOFF fonts … the list goes on. And no polyfills required! I was, however, disappointed that IE9 doesn’t support two of my favorite CSS3 effects: border-image and text-shadow. I’m sure that I will notice other CSS3 effects missing over time, but these are two features that I currently find incredibly useful. This article will deal with text-shadow: how it works in browsers that support it, and strategies we can use today to emulate some of its functionality in IE. Although the solutions I present here are based on IE’s Visual Filters, and that some articles like this one by Neil Crosby have looked into it as a solution, I present here some new information – how to make them work correctly with Windows Standard and ClearType font-smoothing and how to write the final CSS that won’t break any browser.

Now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.

CSS3 can help you create beautiful shadows without actually needing Photoshop anymore.

I finally got around to doing what I wanted to do for quite a few months: Create a gallery with all the basic patterns I was able to create with CSS3 gradients. Here it is…

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

Today you’ll learn how to create your own CSS dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made!

Put together by Anthony Calzadilla, Andy Clarke and Geri Coady, this showcase is a reproduction of the Mad Men opening credits sequence animated in CSS3 — and aside from the references to web designers and their books, it’s a fantastic replication.