CSS3

CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices.

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

Today, we thought we’d have some fun and dive directly into some CSS3 capabilities. In particular, we thought we’d see if you can really duplicate popular Flash ads in HTML5. Well it turns out that you don’t really need HTML5, all you really need are some digital assets and CSS3 animations—which today work in latest revisions of Chrome and Safari. Take a look at three popular Flash ads and compare them to our CSS3 recreations. It’s frankly a little uncanny.

If you are part of the CSS community you probably know that CSS3 media queries will change the way how we write CSS.

Why is that?

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets . This CSS solution will be much more cheaper than building new mobile web site something like http://m.somewebsite.com or http://ipad.somewebsite.com .

Can we start using the CSS3 media queries today?

Yes we can!

Type Folly is a tour de force, showing how far JavaScript and CSS have come. When I first openend the page I got a canvas with all sorts of text, which looks like an image. But then I clicked it, and discovered I can drag stuff around.

Then I noticed the tool panes on the sides; they look like Photoshop tool panes, but are implemented in JavaScript and are fully functional. There are layers, and type properties, and containers sizes and whatnot.

Although the debate over HTML5 vs. Flash is in my view happening too early, we should be getting excited about new standards appearing in our web browsers.

If you want proof of why the future of content in the web browser is a rosy one, you only need watch the video above. It shows the browser not as a tool for showing pages, links, images, and videos, but as a canvas for displaying something interactive, eye-catching, and entertaining.

What is, in its essence, the CSS3 :not pseudo-class? It’s a filter that is used to separate certain elements from others depending on the presence of a certain condition. In technical terms, this pseudo-class uses a Boolean expression that negates a given condition. In human terms, it tells the browser not to consider an element with a given condition.

To get you really excited about CSS3, last month we announced the CSS3 Design Contest and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution.

This process has taken a lot of time as it wasn’t easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry to another. And the decision was made. So today, it’s time to announce the winners and present the submissions to the contest.

Images, transitions and everything in between is a great way to compliment your website, but there is one aspect you should not forget about—typography. Typography is, “the art and technique of arranging type, type design, and modifying type glyphs.” Without great looking typography, it is hard to compose a well rounded looking website.

The first of a series of tutorials on creating the lovely Aristo theme (http://github.com/280north/aristo) using only CSS3.

This tutorial details how to make Aristo’s buttons.

The project’s website is http://aristocss.com

We are bringing you a presentation made by Jason Lengstorf on HTML5 and CSS3. This presentation was made at Ruby’s Inn and Conference Center.

This presentation was a part of Advanced Front-End Development with HTML5, CSS3, and More, a roundtable conference on implementing the cutting edge web technologies, including HTML5, CSS3, jQuery/AJAX, @font-face and other miscellaneous tips & tricks.