5 Useful CSS3 Properties You Need to Know

I have shared a comprehensive knowledge about CSS Rules and CSS Browser Specific Properties. Now, i am going to write tutorial about amazing, awesome and new CSS3 properties. I know, most of them are still vendor specific but their usage can enhance the beauty and usability of your projects. It is also a good reason to learn the future of CSS3.

1. CSS3 Border Radius

border-radius seems to be a hot topic these days, what with CSS3 including it and some browser vendors already implementing it. I just think it looks nice. You may be interested to know more about CSS3 border radius.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Border Radius</title>
<style>
.box {

	/*
	|-------------------
	| Box Style
	|-------------------
	*/

	background-color:#F00;
	color:#FFF;
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;

	/*
	|-------------------
	| Border Radius
	|-------------------
	*/

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

}
</style>
</head>
<body>
  <div class="box">Box with Border Radius</div>
</body>
</html>

Output

CSS3 Border Radius

You may also be interested to see a beautiful post about Table of CSS3 border-radius Compliance

A good news is that, both Safari 5 and IE9 implement the official “border-radius” syntax.

Circles: CSS3 Border Radius

Before the introduction of CSS3, if you wanted to display your text in a circle you had to be creative using images or other techniques. The implementation of CSS3 has changed that and you can now transform your <div> into a nice round object.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circles: CSS3 Border Radius</title>
<style>
.box {
	background: #F00;
	color: #FFF;
	width: 100px;
	height: 100px;
	text-align: center;

	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;

	display: -moz-box;
	display: -webkit-box;
	display: box;

	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	box-orient: horizontal;

	-moz-box-pack: center;
	-moz-box-align: center;

	-webkit-box-pack: center;
	-webkit-box-align: center;

	box-pack: center;
	box-align: center;
}
</style>
</head>
<body>
<div class="box">
  <div>CSS3 Circle</div>
</div>
</body>
</html>

Output

Creating Circular Div for CSS3

2. Box Shadow with CSS3

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Firefox, Safari/Chrome, Opera and IE9 supports CSS3 box shadow.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Box Shadow with CSS3</title>
<style>
.box {
	-webkit-box-shadow: 1px 1px 3px #292929;
	-moz-box-shadow: 1px 1px 3px #292929;
	box-shadow: 1px 1px 3px #292929;

	background: #F00;
	color: #FFF;
	padding: 10px;
	width: 200px;
	height: 200px;
}
</style>
</head>
<body>
<div class="box">CSS3 Box Shadow</div>
</body>
</html>

Output

Box Shadow CSS3

The box-shadow property takes several attributes/values, like any other CSS property, and these are are specified in order as follows:

  • Horizontal offset of the shadow: a positive value for shadows on the right of the box, and a negative value for a shadow on the left of the box
  • Vertical offset: similarly, a negative value means the shadow will be on top, a positive one means the shadow will be below the box
  • The blur radius: a value of 0 makes the shadow sharp, the higher the number, the more blurred
  • Color of shadow

3. Text Shadow CSS3

text-shadow is one of the few CSS properties that we can omit the use of vendor-prefixes. Quite similar to box-shadow, it must be applied to text, and receives the same four parameters:

  • x-offset
  • y-offest
  • blur
  • color of shadow

text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. It has been supported in Safari since version 1.1, and is supported in Chrome, Firefox 3.5 and Opera 10.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Shadow CSS3</title>
<style>
body { background: #666; }
h1 {
	text-shadow: 0px 1px 0px #FFF;
	color: #292929;
	font-size: 90px;
	font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1> Text Shadow </h1>
</body>
</html>

Output

CSS3 Text Shadow Effects

4. Multiple Backgrounds

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now in CSS3 we can apply background image dimensions as well as use multiple background images.

Applying multiple background images in CSS3 is quite easy, using a comma with the standard background property.

Make sure that you provide a support for the browsers which don’t provide support for multiple backgrounds. They’ll skip over the property entirely, leaving your background blank.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Backgrounds</title>
<style>
.box {
	/*
	|--------------------
	| Support Old Browsers
	|--------------------
	*/
	background: url(apple.jpg) no-repeat;
	/*
	|--------------------
	| Support Modern Browsers
	|--------------------
	*/
    background: url(apple.jpg) 0 0 no-repeat, url(orange.jpg) 100% 0 no-repeat;
	width: 500px;
	height :250px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output

Multiple backgrounds with CSS3

5. Text Overflow CSS3

Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the “overflow” (set to “hidden” or “scroll” for this property to have an effect), and “clip” properties define what content will be visible.

If text is too long for the overflow/clipping area and the content is to be visually clipped, this property allows the clipped content to be visually represented by the string “…” (called an “ellipsis”) in the non-clipped area.

Originally developed by Internet Explorer, the text-overflow property can accept two values:

  • clip
  • ellipsis

Amazing: Internet Explorer has provided support for this property since IE6? They created it!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text Overflow CSS3</title>
<style>
#box {
	
	text-overflow:ellipsis;
	-o-text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
	
	border: 1px solid black;
	width: 400px;
	padding: 20px;
 	-webkit-transition: all .5s;
	color: rgba(0, 0, 0, .7);
	cursor: pointer;
}
#box:hover {
	white-space: normal;
	color: rgba(0, 0, 0, 1);
	background: #e3e3e3;
	border: 1px solid #666;
}
</style>
</head>
<body>
<div id="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</body>
</html>

Output

Text Overflow CSS3

Thank you so much for reading, and I hoped you learned a bit!