Know about border-radius, RGBa, rotate, @font-face, nth-of-type and nth-child:
1) Border radius:
Rounds corners of element.
Example:
1) Border radius:
Rounds corners of element.
Example:
.Input_Box {
border: 1px solid #999;
border-radius: 10px;
}Explanation:It will create rounded border of 10 pixels radius for the element which has class name Input_Box.
2) RGBa Support:
Example:
#myid {
background-color: rgba(255, 0, 0, 0.5);
}Explanation:RGBa property uses RGB colors instead of hex code along with transparency. Above CSS will set background color red with 50% transparency to the element for which element id is myid.
3) Rotation:
Example:
.box{
transform: rotate(7.5deg);
}
Explanation:
CSS3 transform property is very useful if you want to rotate the element to certain degree. Above code will rotate element having class “box” to 7.5 degree.
4) @font-face:
Example:
@font-face {
font-family: AwesomeFont;
src: url(http://example.com/awesomeco.ttf);
font-weight: bold;
}Explanation: If you think of using custom fonts in your website, you can easily add it by providing the font location, name and style of font in the @font-face property.5) Pseudoclasses – nth-of-type
Example:
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color: #ddd;
}Explanation: If you want to give alternate colors to the table rows, CSS3 provides nth-of-type property. Above code will apply background color “#f3f3f3” to even and “#ddd” to odd rows.6) Pseudoclasses – nth-child
Example:
td:nth-child(n+2){
text-align: right;
}Explanation: Above code will change text alignment to right for all the columns except first.
