With CSS3 we can achieve a lot of cool design effects that were once only possible through the use of image creation in programs like Photoshop. We can even do some neat animations. Here’s a handy chart for referencing browser support of CSS3 properties (it’s mostly IE8 and below you have to worry about).

Create rounded corners with border-radius

.ex-round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Box shadows

syntax: x y blur color // syntax: inset x y blur color (inner shadow)

.ex-shadow {
-webkit-box-shadow: 4px 4px 5px #282b1f;
-moz-box-shadow: 4px 4px 5px #282b1f;
box-shadow: 4px 4px 5px #282b1f;
}

Continue reading →

I’ll be covering a lot more in this blog post later on, but first I wanted to briefly go over some of the CSS pseudo class selectors I’ve been using more frequently. If you work with CSS, you’re probably familiar with these 4 pseudo class selectors: a:link, a:active, a:visited and a:hover; which have been in use for quite some time and have wide browser support. Many of the other pseudo class selectors are supported in most browsers except IE8 and below.

With wider adoption of the position/number pseudo class selectors we can achieve things in our style sheet that may have only been possible with server side programming in the past. In the below example, I have selected the 2nd paragraph within #content and applied styles to that paragraph only.

#content p:nth-child(2){line-height:20px;color:#990000;}

With the example below, I have set every 5th list element to have a text color of black. “(5*0)+5=5”, “(5*1)+5=10”, “(5*2)+5=15” etc.

ul li:nth-child(5n+5) {  
  color: #000000;
}

Continue reading →