ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

5 CSS3 Tricks every Web Developer Should Know

Updated on November 5, 2013

Demo for border-radius

Tip # 1. Creating Round Corner using CSS3

Often, web developers use round corners to style various items. CSS 3 provides convenient property border-radius, which allows any block to have rounded corners. The property takes a single parameter and value in pixels. For Example:

div{
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


To support the border-radius browsers like FireFox, Chrome and Safari uses special property -webkit- and -moz- .

Demo for Text shadow

Tip # 2: Text shadow in CSS3

In CSS 3, property text-shadow can be used to give shade to text. This property takes 4 parameters: offset for x-axis and y-axis, shadow blur and color.

div{
	text-shadow: 2px 3px 4px #ADADAD;
}

Optionally, you can also specify multiple shadows to text. This can be achieved by providing property values separated by commas.

div{
	text-shadow: 2px 3px 4px #ADADAD, 0px -1px 3px RED;
}

Tip # 3: Using custom font on your website

When we use non-standard font on our website, we have to ask the user to install the font on their computer. Not every user would want to go through this pain.

Thanks to CSS3, we have a property @font-face which uniquely download the font for the site and automatically loads it when user open the web page.

@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9 */
} 

Demo for Linear-gradient

Tip # 4:Gradients using CSS3

CSS3 allows to create unique gradients without the use of duplicate images.

A gradient is defined by using thelinear-gradient (linear gradient) orradial-gradient (spherical gradient) property for background-image.

div{
	background-image: linear-gradient(left center , #F3BBD5 20%, #B9DECD 30%, #EAE2C4 40%);
	background-image: -webkit-linear-gradient(left center , #F3BBD5 20%, #B9DECD 30%, #EAE2C4 40%);
	background-image: -moz-linear-gradient(left center , #F3BBD5 20%, #B9DECD 30%, #EAE2C4 40%)
	background-image: -o-linear-gradient(left center , #F3BBD5 20%, #B9DECD 30%, #EAE2C4 40%);
	background-image: -ms-linear-gradient(left center , #F3BBD5 20%, #B9DECD 30%, #EAE2C4 40%);
}


Do not forget to specify linear-gradient prefix for different browsers support

Demo for multi-column text

Tip # 5: Multiple-column text in CSS3

The column-count property allow developers to break up the text in the selected item for a specified number of columns.

The column-gap specifies the width between the columns. The column-width sets the width of each column. The column-rule sets a visual separator between the columns.

div{
	column-count: 2;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-gap:12px;
	-webkit-column-gap:20px;
	-moz-column-gap:20px;
	column-width:100px;
	-webkit-column-width:100px;
	-moz-column-width:100px;
	column-rule: 2px double #984C37;
	-webkit-column-rule: 2px double #984C37;
	-moz-column-rule: 2px double #984C37;
}


Note: Currently Internet Explorer does not support this property.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article