CSS: backgrounds with CSS3

Tweet

As I can see from the web thought statistics, there's a increasing interest in how to manage backgrounds with CSS and specifically with CSS3. So I decided to write down the following short tutorial. We are going to explore three interesting CSS properties: background-clip, background-origin and background-size.
I know, I've partially covered the subject in another post, however here we are going to see it more in depth.

Are you ready? Ok then, follow me...

CSS: how to change an element style with JavaScript

Tweet

It is possible to manipulate a CSS rule applied to a DOM element using JavaScript. The solution can be quite effective, because we can change styles according to specific events in our page.

For example, when a button is pressed, or an option is chosen, we can trigger an event that will change a CSS property's value.

In the following post, we will change the background colour for a text, by pressing the text itself. Then we will create another trigger that will change the text colour back to default, again.

CSS: cross browser gradient (a tutorial)

Tweet

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

CSS: Layer styles

Tweet

Following similar articles about online CSS tools, today I would like to share Layer Styles.
The web site has a simple graphical interface with sliders and selectors where we can insert parameters and see the results of our choices with a screen preview. The possibilities are quite interesting and the customizable parameters are surely the most used for most web developers. The resulting CSS style can be then copied for our personal use.

Let's see what we can do in depth.