- 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
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
101 Views
Use the animation-duration property to set how long an animation should take to complete one cycleExampleYou can try to run the following code to implement the animation-duration property −Live Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
493 Views
To add transition effect for width and height property of an element, you can try to run the following codeExampleLive Demo div { width: 150px; height: 150px; background: blue; transition: width 3s; } div:hover { width: 250px; height: 250px; } Heading One Hover over the below box to change its width and height.
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
540 Views
To create an image gallery with CSS is quite easy. You can try to run the following code to achieve this. A gallery of 3 images is created here,ExampleLive Demo div.myGallery { margin: 3px; border: 2px solid orange; float: left; width: 220px; } div.myGallery:hover { border: 1px solid blue; } div.myGallery img { width: 100%; height: auto; } div.desc { padding: 20px; text-align: center; } 3D Animation Tutorial Swift Video Tutorial CSS Tutorial
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
160 Views
To create a transition effect, set the property for the transition effect. With that also set the duration of effect.transition: height 5s;You can try to run the following code to create a transition effectExampleLive demo div { width: 150px; height: 150px; background: blue; transition: width 3s; } div:hover { width: 250px; } Heading One Hover over the below box to change its width.
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
184 Views
To create a circle with radial gradient, you can try to run the following code. Set another parameter in radial gradient for shapes like circleExampleLive Demo #demo { height: 400px; background: radial-gradient(circle, red , blue, yellow); } Radial Gradient Radial Gradients
![Giri Raju](https://www.tutorialspoint.com/assets/profiles/13536/profile/60_72105-1512540773.jpg)
99 Views
Use the transition property to work with CSS Transitions.You can try to run the following code to implement transitions in CSS:ExampleLive Demo div { width: 150px; height: 150px; background: blue; transition: width 4s; } div:hover { width: 200px; } Heading One Hover over the below box to change its width.
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
187 Views
With the transition effect, you can easily change the property values. You can also set a duration.Let us try to change the height of an element:ExampleLive Demo div { width: 150px; height: 150px; background: blue; transition: width 3s; } div:hover { height: 200px; } Heading One Hover over the below box to change its height.
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
96 Views
To determine whether an element should be visible when not facing the screen or not, use the backface-visibility propertyExampleLive Demo .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspective: 80px; margin: 50px; perspective-origin: left; transform: rotateY(180deg); } .demo2 { position: absolute; padding: 20px; background-color: orange; transform-style: preserve-3d; transform: rotateX(45deg); backface-visibility: visible; } Rotation Demo Demo
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
154 Views
Use the [attribute = ”value”] selector to select elements with a specified attribute and value.You can try to run the following code to implement the CSS [attribute = "value"] Selector. Here, we have considered the attribute as rel,Example:Live Demo a[rel = nofollow] { border: 3px solid blue; } Uber's Business Model Share Market
![Sreemaha](https://www.tutorialspoint.com/assets/profiles/13570/profile/60_64977-1512709068.jpg)
256 Views
To specify the bottom position of 3D elements, use the perspective-origin property.You can try to run the following code to implement the perspective-origin property:ExampleLive Demo .demo1 { position: relative; width: 150px; height: 150px; background-color: yellow; perspective: 80px; margin: 50px; perspective-origin: left; } .demo2 { position: absolute; padding: 20px; background-color: orange; transform-style: preserve-3d; transform: rotateX(45deg); } Rotation Demo Demo