CSS3

Typekit, a company doing its part to help bring better typography to the web, has just announced an new partnership with Adobe.

The partnership means that Typekit users can now integrate famous fonts like Myriad, Cooper Black and Adobe Garamond into their own sites and designs.

I recently had a chance to talk to Dan Rubin about his upcoming participation in Web Directions USA, and here are some of the highlights.

Redmond, Washington-based Microsoft has officially sent out invitations to developers, designers, and members of the press to attend an exclusive event titled “Beauty of the Web” on September 15, 2010 at the Concourse Exhibition Center in San Francisco, California. Microsoft states that it will launch the very first and highly anticipated Internet Explorer 9 Beta at the event.

The demand for CSS 3 is surprisingly increasing as clientele become more tech savvy. While Internet Explorer and other similar browsers do not support CSS 3, specializing your design to the browser your client uses is what you need to do to an extent. If your client uses Google Chrome or Firefox, you can save time by creating rounded corners and shadowing using CSS 3 as it does not mess up Internet Explorer users, but rather limits the design a bit. It also gives your client flexibility to be able to change things without the need to recreate the rounded corners as it is all done dynamically.

The lack of forward movement in front-end web development by government agencies may be our own fault, says Chris Heilmann. And I agree. Completely.

I’ve been increasingly biting in my reactions to many admittedly fun but practically useless “demos”, “experiments” and other assorted HTML5 and CSS3 nonsense like CSS3 icons. I always get flack for this, and I probably will now.

While these experiments are easily defended—“just wanted to see what was possible”—they are generally non-complex (though they can be tedious; take one look at a CSS3 icon or font). They are, put bluntly, simply a way to show off. And as long as that works, it will continue. But what are these experiments helping, aside from the reputations of those who make them(!)?

Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame.

We have already shown what CSS3 with HTML5 can do for your website. But beside websites CSS3 with jQuery can do a whole lot more. You can make animations with it that could only be done with Flash before and create designs only possible with Photoshop.

Once FireFox and Internet Explorer have finally catch up with WebKit developers and designers will finally have more options to serve data and graphics. Here there are 10 exceptional animations and graphics done with CSS3 mainly and some with jQuery added. All of them are best viewed in Chrome and Safari, only the Star Wars animation is Safari 5 only.

I’m pretty happy with the great stuff CSS3 (and HTML5) brings. However, some care should be taken in balancing how many images you load versus the load you put on the CSS engine. And there are a lot of articles on the web encouraging use of the new CSS features such as gradients and shadows in order to optimize for images in your page. But that’s only half the story.

You’ve heard it plenty of times before: We’re at the precipice of a transition in the way we, as developers, do things. Leading the way are future standards like CSS3 and HTML5, both already partially implemented in 4 out of the 5 major web browsers, with IE9 promising support, empowering us with new ways of making interactive and rich user experiences.

Just how awesome is CSS3? Find out by checking out these 10 experiments and demos that push the capabilities of the specs.

You can now produce stunning animations with CSS3. 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.