- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
57 Views
The multi-column column-rule property is used to specify the number of rules.You can try to run the following code to implement the column-rule property in CSS3 −ExampleLive Demo .multi { /* Column count property */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Column gap property */ -webkit-column-gap: 40px; ... Read More
![radhakrishna](https://www.tutorialspoint.com/assets/profiles/13544/profile/60_40618-1512640354.jpg)
101 Views
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
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
149 Views
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(); }
![mkotla](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
81 Views
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(); }
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
133 Views
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
![Nikitha N](https://www.tutorialspoint.com/assets/profiles/13558/profile/60_76068-1512713229.jpg)
125 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
176 Views
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
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
158 Views
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; }
![seetha](https://www.tutorialspoint.com/assets/profiles/13549/profile/60_42938-1512640859.jpg)
260 Views
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; }
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
261 Views
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; }