3 CSS Effects You Can Use in Your Sites Today

Controlling how your website looks is an aspect that website designers have been struggling with from day one. The web really hasn’t been around that long, and things have been progressing at a steady pace. With each progressive step in the web’s development, new tricks and styles and effects become the norm. It can be tough to keep up with the newer additions, and can be even tougher to learn if you are just starting to learn from scratch.

Unfortunately, not every effect is supported exactly the same in every browser. Having to accommodate different browsers can be a pain, but you have to be able to understand and implement the different vendor prefixes and styes in order to make your website look as consistent as possible across as many browsers as possible. Web development hasn’t progressed far enough for us to only have one line of code for each style or effect, and have it display the exact same in every browser. In this tutorial, we are going to take some common effects that are popular, show how they are done, and break down each piece of code, so that you will know what each part does, and what it controls.

Box Shadow

background-color:rgb(221,221,221);
width:500px;
height:400px;
/* Firefox v3.5+ */
-moz-box-shadow:-3px 3px 2px 2px  rgba(255,0,0,0.8);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:-3px 3px 2px 2px rgba(255,0,0,0.8);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:-3px 3px 2px 2px rgba(255,0,0,0.8);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=-3,OffY=3,Color=#ccff0000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=-3,OffY=3,Color=#ccff0000,Positive=true);

The comments in the code above shows what works in certain browsers, but I am going to break down what each part of a common box-shadow style actually controls, so that you can code your own box shadows and understand what the outcome is. Take the sample code below:

box-shadow:-3px 3px 1px 4px rgba(255,0,0,0.8);

Screen shot 2012-08-15 at 3.50.08 PM

The first 2 pixel values determine the distance of the shadow itself, similar to how distance works in Photoshop. The positioning of the shadow itself works off of positive and negative numbers. The 1st pixel value determines the horizontal positioning of the shadow. A negative value means that the shadow will be that many pixels to the left. A positive value means that it will be that many pixels to the right.

The second pixel value determines the vertical positioning of the shadow. A negative number will place the shadow at the top of the div, and a positive value will place a shadow at the bottom.

The third value is the blur radius. This value determines the strength of the blur itself. the example below shows what the shadow will look like with 4px blur and 1px spread.

Screen shot 2012-08-15 at 4.32.23 PM

The fourth value determines the spread of the gradient. This determines what it implies, meaning how far the shadow spreads. This will make the shadow appear more prominent. One warning about spread is that if you set it too high, it can actually cause a false border to creep in around the div itself. If you can’t figure out why your box has a border around it when you haven’t specified one, check  and adjust your spread.

Color- I separated color, because this is a whole different scenario altogether. You can use the rgba value shown above, or you have use the hex value. When I use rgba, which stands for red, green, blue, and alpha (transparency), I place this at the end. When I use the hex value, I have used this value in front of the pixel values, and I have also placed it at the end. You can do either one, but most people like to be consistent and place the hex value at the end. In our example, 255 represents the red value, and 0 represent both green and blue. 0.8 is the transparency, or alpha value. 0.1 means that its transparency, or visibility is only 10%. A value of 1 means that it is fully visible.

Inset value is another additional possibility. Instead of creating a drop shadow effect, if you declare the Inset property, you can create an inner shadow. You place this at the very front of the styles, so your CSS would look like the example below: Just remember to declare the other prefixes for the other browsers.

box-shadow: inset -3px 3px 1px 4px #FF0000;

Screen shot 2012-08-15 at 4.20.05 PM

In the example above, I changed the background of the body to grey and put a 1px border around the box to show you what the actual inset shadow would look like.

Text Shadow

Text shadow works the same as box shadow regarding the order and set up of the different properties. The only difference is that there is no fourth value for the spread property. You control vertical and horizontal values and the blur radius. You can use the hex values, or the rgba values to determine the color of the drop shadow and its transparency.

h1{
text-shadow: #FF0000 -3px 3px 1px;
color:#000;
}

Screen shot 2012-08-15 at 3.50.20 PM

If you set the first two values to 0, the the shadow effect will come out from the center, giving the effect of a glow. The example below shows you what a drop shadow with no distance looks like.

text-shadow:0px 0px 4px rgb(255,0,0);

Screen Shot 2012-08-16 at 12.44.30 AM

Rounded Corners

Rounded corners have been a challenge for a long time for many web designers. The best part about the border-radius is that you can control each individual corner. This gives you a lot of variation in your work. Much like the other effects, you have to specify the moz and webkit prefixes for them to display properly in other browsers. lets say that you wanted to create a green box with rounded corners that are all equal:

background-color:rgb(0,140,0);
width:630px;
height:337px;
/* Firefox v1.0+ */
-moz-border-radius:37px ;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:37px ;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:37px ;

The results would look like the example shown below:

Screen Shot 2012-08-15 at 8.13.22 PM

Changing the pixel value will change the roundness of each corner. If you lower the amount, the corners will become more square. If you increase the pixel amount, the they will become more and more round, until the entire shape is rounded out. In our example, I changed the pixel value to 170px, and this made a pill shaped box, as shown below. This would be how you would make a rounded button in CSS for a website, only the box’s size would be much smaller, and so would the border-radius.

Screen Shot 2012-08-15 at 8.16.58 PM

To specify different roundness values for different corners, we have to actually specify the roundness for all four corners, for all three prefixes. This can be a pain, but luckily, you can use the same values, just different prefixes. See the code below:

-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
border-top-left-radius: 15px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;

You end up specifying the prefix, then the border-radius style, and then the position of the corner, which is topleft, top-right, bottom-right, or bottom-left. The only big difference that can be confusing is where they use dashes between the positions. The code above produces the results shown below:

Screen Shot 2012-08-15 at 8.35.53 PM

Conclusion

When first starting out it can be hard to understand and implement CSS styles in your work. The newer effects that add dimension to your work but they can be confusing, because you have to include the vendor prefixes and follow the proper syntax for the effects to even show up. Once you learn the proper syntax, and get comfortable using CSS, then you can implement nice effects on your website making it look more professional and much more interesting.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote