- 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 8894 Articles for Front End Technology
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
218 Views
Use the animation-direction property to run animation in reverse direction. The property is used with the reverse animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: reverse; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
![usharani](https://www.tutorialspoint.com/assets/profiles/13564/profile/60_32161-1512638316.jpg)
172 Views
Use the CSS background-origin property to set the padding-box value. With the padding-box value, the background image begins from the upper left corner of the padding edge.You can try to run the following code to implement the padding-box value:ExampleLive Demo #value1 { border: 3px solid blue; padding: 30px; background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg); background-repeat: no-repeat; background-origin: padding-box; } ... Read More
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
194 Views
To add a color to the shadow, use the box-shadow property and set the color, with the height and width.You can try to run the following code to set the color to shadow:ExampleLive Demo h2 { box-shadow: 10px 10px green; height: 70px; background-color: red; } Heading Two Above heading has shadow.
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
141 Views
Use the [attribute|=”value”] selector to select elements with the specified attribute starting with a specified value.You can try to run the following code to implement CSS [attribute|=”value”] Selector,ExampleLive Demo [lang| = en] { border: 5px solid orange; border-radius: 5px; } Hello Hei
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
2K+ Views
The input type button can be a submit button or reset button. With CSS, we can style any button on a web page.You can try to run the following code to style input type button:ExampleLive Demo input[type = submit], input[type = reset] { background-color: orange; border: none; text-decoration: none; color: white; padding: 20px 20px; margin: 20px 20px; cursor: pointer; } Fill the below form, Subject Student
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
7K+ Views
To add background color to the form input, use the background-color property.You can try to run the following code to implement the background color property to formExampleLive Demo input[type=text] { width: 100%; padding: 10px 15px; margin: 5px 0; box-sizing: border-box; background-color: gray; } Fill the below form, Subject Student
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
72 Views
To set border to form inputs, use the CSS border property.You can try to run the following code to add borderExampleLive Demo input[type = text] { width: 100%; padding: 10px 15px; margin: 5px 0; box-sizing: border-box; border: 3px inset orange; } Fill the below form, Subject Student