Archive for April, 2011

Gradient Columns

Posted on: April 30th, 2011 by Lisa No Comments

The CSS3 gradient background can be used to create solid columns of color. This can be used to solve the problem of the different colors not extending to the bottom when the columns are of different heights. If you put a background color on each column, the shorter column’s color only extends to the bottom of it’s container (see first example in demo.) If you use a gradient background on the container of both columns, you will not need to worry about varying heights (see second example in demo.)

See Demo
  background: #8aec14 url(images/bg.jpg) repeat-y;	
  background-image: -moz-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%); 
  background-image: -o-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%); 
  background-image: -webkit-linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%); 
  background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);

Explanation

The first line of code is a fall back for browsers that don’t support gradients. See Internet Explorer section below for more explanation.

You can add color stops to your gradients by saying where the colors end. You can specify this place using percentages or by giving a length in pixels. The trick to getting solid colors with a gradient background is to specify a color stop of the first color at the same spot as the next color’s stop.

background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);

Notice how they are both at 60%. So the first color goes from 0-60%, and the second color goes from 60% to 100% because the color value both are the same.

Internet Explorer

This trick does not work in any version of Internet Explorer. I believe it is supposed to work in IE10, however. The Filter command doesn’t handle stops, as far as I can tell.

So the solution for making this work in IE is to use one of the old ways of handling multiple columns of different backgrounds. There are several solutions, but I have always used a background image. If you create a small background image slice to be used on the container of the columns, as shown below, you can repeat it along the y-axis.
background: #color url(bg.jpg) repeat-y;

If you specify this code before the gradient, most browsers that do support gradients will not download the image, so it could still beneficial to use the gradient for your columns.

/*****************************************************************************************/

Gradients

Posted on: April 29th, 2011 by Lisa No Comments

You can display Gradients with CSS3 and the background-image property. Instead of specifying an image, you specify the gradient and the colors you want. The gradients can be quite complicated with multiple colors, but I will stick to 2 colors today. You can also use a radial gradients, which I will cover in the future. 

  background-color: #77CC11;
  background-image: -moz-linear-gradient(top, #8aec14, #528d0c); 
  background-image: 
          -webkit-gradient(linear, left top, left bottom, from(#8aec14), to(#528d0c)); 
  background-image: -webkit-linear-gradient(top, #8aec14, #528d0c); 
  background-image: -o-linear-gradient(top, #8aec14, #528d0c);
  background-image: linear-gradient(top, #8aec14, #528d0c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#8aec14', 
                                                     EndColorStr='#528d0c');

Explanation

The first thing you want to specify is a background color for fall back in case the gradient doesn’t work, or the user is on a browser that doesn’t support the property. I chose a color that falls in the middle of the my starting color and ending color.

The reason there are two webkit lines, is that until a few months ago, webkit had it’s own syntax from gradients which was significantly different than the mozilla version. Thankfully, they decided to switch to the format that others are using, so now the only difference is the prefix. The newer version is simpler and easier to remember, also. If you want to be sure your gradients will work in older versions of Safari and Chrome you can use the second line. In time though, because most users of those browsers update fairly quickly, you can probably safely skip it.

Properties

The first property is the starting point of the gradient. You can specify a side (left, right, top, bottom) or a corner (i.e. top right, etc.) The second property is the starting color, and the third property is the ending color. If you don’t specify any other stops, the gradient will be a gradual steady gradient from starting color to ending color.

Horizontal Example

Here is an example of a Left to Right gradient. The code is exactly the same as in the snippet above, except you chance the word “top” to “left”. (The early webkit version will use “left top, right bottom”.)

The filter property for IE, only works from top down, so if you really want a horizontal gradient, you will need to use an image. Just specify that first before the gradient code in your CSS. If you do that, other browsers that do support gradients will skip downloading the image, so there is no harm in having it for IE.

Internet Explorer

There are a few techniques you can use to get gradients in IE, which still does not support gradients on the background-image, even in IE9. The simplest, if you want a top to bottom gradient is to use “filter” with the syntax I specified above. You can also use CSS3PIE. 

-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

/*****************************************************************************************/

Shadows

Posted on: April 27th, 2011 by Lisa 2 Comments

The box-shadow property allows you to add drop shadows to objects on your page. It can also be used to create outer glows. 

/* Box Shadow Example */
     -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* FF3.5+ */
  -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* Saf3.0+, Chrome */
          box-shadow: 3px 3px 6px rgba(0,0,0,0.5); /* Opera 10.5, IE9, Chrome 10+ */


/* Inner Shadow Example */
     -moz-box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* FF3.5+ */
  -webkit-box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* Saf3.0+, Chrome */
          box-shadow:inset 4px 2px 6px rgba(0,0,0,0.8); /* Opera 10.5, IE9, Chrome 10+ */


/* Outer Glow Example */
     -moz-box-shadow: 0px 0px 10px #000; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 10px #000; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 10px #000; /* Opera 10.5, IE9, Chrome 10+ */

Explanation

The parameters:

  • Horizontal Offset: Number of pixels to the right. Use a negative number to move shadow to the left.
  • Vertical Offset: Number of pixels below. Use a negative number to move the shadow up.
  • Blur Radius: Use a larger number for more blur, smaller for sharper
  • Color: Instead of using a black, you can use an RGBA value to allow some of the background color to come through.

I’m using some values that are larger than I normally use on a real site to make them more obvious. Smaller numbers usually give a more subtle shadow, which I normally prefer, but it depends on what you are going for in your design, of course.

Add the word inset after the property (box-shadow:inset)to show an inset shadow instead of a drop shadow, as seen in the second example. Using an offset value of 0 in one or both of the offset parameters will show the shadow on more than two sides. My example only is showing the shadow on two sides.

If you set the Horizontal and Vertical blur values are set to 0 you can create an outer glow instead of a drop-shadow. The third example shows this. On a dark background with lighter colors of shadows, this may be more obvious, or userful.

See Demo

Internet Explorer

The box-shadow property works in IE9. However, the inset property does not work in IE9. I have read it will work in IE10, and hopefully that will be true. To make work in IE 8 and earlier use CSS3PIE. Note that the path to the PIE file may be different for your website. The inset property is not supported yet, however. 

position: relative; /* only if necessary to make work */
behavior: url(/PIE.htc);

/*****************************************************************************************/

Embossed Text

Posted on: April 22nd, 2011 by Lisa 1 Comment

Embossed text is similar to the engraved text effect, but the text appears higher than the surface, instead of lower. This can also be achieved with the CSS3 property text-shadow.

You can add this CSS to any selectors with text where you want this effect.

/* Darker text on medium background */
color: #333;
background-color: #666;
text-shadow: 0px -1px 0px rgba(255,255,255,.5); /* 50% white from top */

/* Medium text on lighter background */
color: #666;
background-color: #aaa;
text-shadow: 0px 1px 0px rgba(0,0,0,.5); /* 50% black coming from the bottom */

See Demo

The main difference is the direction of the shadows. If the shadow comes from the bottom in an engraved effect, it will come from the top to emboss, using the same colors.

Personally, I find the inset or engraved text effect nicer looking. However, the specific colors that you use, may give different results, so experiment to get the best effect.

/*****************************************************************************************/