Creating websites that are not only flexible but beautiful can be tricky just using CSS. CSS3 properties opens up a whole new range of options that make your site more flexible and beautiful. Here are my favorite CSS3 Properties as of this writing.

Border-Radius

Back in the day I remember using the photoshop slicing tool to create this effect. It was very tedious! I would have to make the graphic and then slice out the corners separately. A lot of work! Now with CSS3 we do this in code without the headache. Here how we use Border-Radius:

In my example I want to have my border to be curved on the top right and bottom left.

border-radius: 0px 30px 0px 30px;

---

---

In this example you can see how using adding a simple border-radius code in your css styles can make a box more stylish. But we can hardly see the head tags, this leads to another favorite CSS3 property…Transparency

---

Transparency

The transparency property is a little tricky. The CSS code is in the background-color property. Instead of using a hex value for the background property you use the “rgba” (red, green, blue, alpha)value instead. alpha being the transparency value. So instead of using:

background-color: black or #000 (hex value for black); we would use:

background-color: rgba(0,0,0,.5);

Now look at our example when we put .5 or 50% transparency to our background-color:

---

---

Text Shadow

Let’s add a little more style to our box. I used to think adding drop shadow to text was only reserved to Photoshop. Now CSS3 allows to add style and readability to our text by adding text-shadow.

In this example I added text-shadow to the h1 tag:

text-shadow: 5px 5px 5px rgba(51,51,51,1);
The first number is the horizontal shadow, second number is the vertical shadow, third number is the amount of blur, and the last property is the color with the alpha.

---

---