CSS3 Properties To Make Site Look Prettier

  • Posted on: 4 May 2013
  • By: Zhijun Chen

Here are three useful CSS3 properties for prettifying websites. All of these properties will be supported by major browers like Chrome, Firefox.

* border-radius property

It used to be very diffcult to create round corners since we always needed to use multiple images and divs.
Now with border-radius property, you can easily create round-corners with pure CSS.

Syntax:

border-radius: 10px; 

or specify every corner as follows:

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

Example:

 
* box-shadow property

The box-shadow property attaches one or more drop-shadows to the box to make it look more 3D like.

Syntax:

box-shadow: 2px 3px 5px 2px #bbb;

Example:

 
* CSS3 background gradient property

With CSS3, you can now achieve background gradient effect by setting background property instead of using images.

Syntax (Linear Gradient from top to bottom):

/* fallback */
background-color:#7CDD0D;

/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0%, 0%, 0% 100%, from(#7CDD0D), to(#272727))

/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #272727, #7CDD0D)

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #272727, #7CDD0D)

/* IE 10 */
background: -ms-linear-gradient(top, #272727, #7CDD0D)

/* Opera */
background: -o-linear-gradient(top, #272727, #7CDD0D)

Example:

 

 

Tags: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.