Web Development Articles - Page 793 of 1049

CSS3 supported multi columns to arrange the text as newspaper structure. Some of the most common used multi columns properties as shown below −ValuesDescriptioncolumn-countUsed to count the number of columns that element should be dividedcolumn-fillUsed to decide, how to fill the columnscolumn-gapUsed to decide the gap between the columnscolumn-ruleUsed to specify the number of rulesrule-colorUsed to specify the column rule colorrule-styleUsed to specify the style rule for a columnrule-widthUsed to specify the widthcolumn-spanUsed to specify the span between columns

You can try to run the following code to move left animation with keyframes using CSS3ExampleLive Demo                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }                     Tutorials Point       This is an example of animation left with an extra keyframe to make text changes.       Reload page                function myFunction() {             location.reload();          }          

The following example shows height, width, color, name, and duration of animation with keyframes syntax −ExampleLive Demo                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }           }                     Tutorials Point       this is an example of moving left animation .       Reload page       function myFunction() { location.reload(); }    

You can try to run the following code to define skew transforms along with y-axis using CSS −ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewY(20deg);                         /* Safari */             -webkit-transform: skewY(20deg);                         /* Standard syntax */             transform: skewY(20deg);          }                              Tutorials point.com.                      Tutorials point.com           Output

You can try to run the following code to implement skew transforms along with x-axis using CSS −ExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#skewDiv {             /* IE 9 */             -ms-transform: skewX(20deg);                        /* Safari */            - webkit-transform: skewX(20deg);                        /* Standard syntax */            transform: skewX(20deg);         }                              Tutorials point.com.                      Tutorials point.com           Output

Let us learn how to rotate the element based on an angleExampleLive Demo                    div {             width: 300px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             /* IE 9 */             -ms-transform: rotate(20deg);                         /* Safari */             -webkit-transform: rotate(20deg);                         /* Standard syntax */             transform: rotate(20deg);          }                              Tutorials point.com.                      Tutorials point.com           Output

Use the scaleY() method to change the height of the element with CSS.Let us see the syntax −scaleY(n);Here, n is a number representing the scaling factor.Let us see an example −div {    width: 40px;    height: 50px;    background-color: black; } .myScaled {    transform: scaleY(0.9);    background-color: orange; }

Used to translateY(n) method to transform the element along with y-axis.Let us see the syntax:translateY(n)Here, n is a length representing the abscissa of the translating vector.ExampleLet us see an example −div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateY(20px);    background-color: orange; }

Use the translateX(n) method to transform the element along with x-axis.Let us see the syntaxtranslateX(n)Here, n is a length representing the abscissa of the translating vector.Let us see an examplediv {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateX(20px);    background-color: orange; }

Use the translate(x,y) method to transform the element along with x-axis and y-axis.Let us see the syntaxtranslate(x,y)Here, x is a length representing the x-coordinate of the translating vector.y is a length representing the ordinate of the translating vectorLet us see an examplediv {    width: 50px;    height: 50px;    background-color: orange; } .trans {    transform: translate(20px);    background-color: black; }