Cross-browser CSS gradient buttons

Due some performance issues, I don’t recommend using these buttons anymore. You may try instead my latest CSS3 patterned buttons.

Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.

In this article you will see how you can create a set of gradient buttons just with CSS (no images).

CSS3 gradient buttons

CSS3 Webkit gradient support updated

A while ago, I wrote another article here about the CSS3 gradients. At that time, you saw the browser support, the advantages of using them and their syntax.

So, what’s new since then? The CSS3 Webkit syntax, which was quite different than Mozilla at that time, has been updated!

WebKit gradient syntax

HTML5 logo using CSS3

As you probably found out, yesterday, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.

So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!

While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).

HTML5 logo

HTML5 canvas awesomeness - games roundup

HTML5 is being developed as the next major revision of HTML, the core markup language of the World Wide Web. Besides new elements like header, section, footer, etc., the HTML5 brings you the canvas element.

The canvas is a rectangular area within you can use Javascript to draw graphics or other visual images on a web page. Although HTML5 is not a W3C recommendation yet, people already started to play with it, and when I say play, I mean it.

Today I’ll share with you some awesome HTML5 games demos that show the HTML5 canvas potential.

Asteroids canvas game

Happy Holidays with CSS3

New year is coming and I want to wish all of you Happy Holidays. For this reason, I made a little CSS3 experiment (with absolutely no images) and I hope you’ll enjoy it.

Happy holidays - CSS3 experiment

Get to know your CSS3 :target pseudo-class

The :target pseudo-class is one of those amazing CSS3 features. It matches an element that’s the target of a identifier in the document’s URI.

This identifier in a URI contains a “#” character followed by an identifier name that matches the value of an id attribute of an element within the document.

CSS3 :target pseudo-class

10 Outstanding CSS3 animation demos

CSS3 has brought some amazing new features and continues to do that. One of the most interesting and attractive feature is the CSS animation. Below is a CSS3 animation round-up that shows you the mighty power of CSS and what you can achieve with its help.

These animations aren’t available to use for all browsers. So, in order to enjoy these effects, you should have WebKit browsers like Safari and Chrome.

10 Outstanding CSS3 animation demos

Feature table design with CSS3

I love shadows, rounded corners, gradients and all the CSS3 features. That’s why, there are some days when I find myself designing in CSS3 more than in Photoshop.

The idea of building a features table just by using CSS3 came to me a while ago and I decided to share it with you in this article.

Feature table design with CSS3

11 useful CSS snippets to save your time

Writing CSS can be a pain and can give you headaches. The truth is that CSS ain’t rocket science and you should just have in mind some CSS pieces of code (snippets) you can use everytime.

In the following rows I’ll try to present you some important snippets I often use in my project and I hope these will help you too.

Useful CSS snippets