What are the List of CSS3 New Features ?

0
Share

CSS3 is the latest version of the normal CSS . CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.

Text Effect in CSS3

A CSS3 text effect is a such term which is used to implement some extra feature in normal text.

There are mainly 2 types of property that describe below are –

text-shadow :- It is used to create the shadow round the text, & we can change the shadow colour also.

word-wrap :- It is used to break the continued text in another line.

Example -        p{
           text-shadow: 3px 2px 3px rgb(0, 255, 64);
           word-wrap: inherit;
           word-wrap: break-word;

       }

Font in CSS3

With the help of these features we can create different type of font style.

@font-face :- 

web designers do not have to use one of the "web-safe" fonts anymore.

In the @font-face rule you must first define a name for the font (e.g. myfont), and then point to the font file.

To use the font for an HTML element, refer to the name of the font (myfont) through the font-family property:

Example -        h1{
           @font-face {
               font-family: ; /*Here add any font family name*/
               src: url();   /*Here add the URL of the font*/
           }

Animation property in CSS3

An animation is a such property in CSS3, which is used to animate the object, without using any third party flash application.

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation have no effect.

Property :- 

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation


Example -

 h1{
           animation-name: cat_image;
           animation-duration:8s;
           animation-timing-function: Linear;
           animation-iteration-count: infinite;

        }

Transition Property in CSS

A CSS Transition effect is a such an effect that lets an element gradually change from one style to another style when hover.

Property	              Description
transition ----	A property for setting the four transition properties into a single property
transition-delay ------It Specifies a delay (in seconds) for the transition effect
transition-duration ---	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property ---	Specifies the name of the CSS property the transition effect is for
transition-timing-function ----	Specifies the speed curve of the transition effect

Example - 

1) div {
  transition: width 2s, height 2s, transform 2s;
}

2) div {transition-timing-function: linear;}

3) div {
  transition-delay: 1s;
}

4) div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

Multiple column in CSS3

A Multiple column is such advance features in CSS3 which is used creating the newspaper layout. You can create your article in multiple columns, even it is one paragraph.

There are many properties as described below ….

1) column-count :- This property specifies the number of columns an element should be divided.

Example - div {
  column-count: 3;
}


2) column-gap :- It specifies the gap between the columns.

Example - div {
  column-gap: 40px;
}

3) column-rule-style :- It define/specifies the style of the rule between columns.

Example - div {
  column-rule-style: solid;
}


4) column-rule-width :- It specifies the width of the rule between columns.

Example - div {
  column-rule-width: 1px;
}


5) column-rule-color :- It specifies the color of the rule between columns.

Example - div {
  column-rule-color: lightblue;
}
%d bloggers like this: