- 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
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
99 Views
The CSS background property is used to set all the background image properties in one section.ExampleYou can try to run the following code to implement the background property:Live Demo #demo { background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top; } www.tutorialspoint.com Tutorials Point originated from the idea that there exists a class of readers ... Read More
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
162 Views
The CSS background-size property is used to specify size of the background images.ExampleYou can try to run the following code to implement the background-size property in CSS:Live Demo #demo { border: 5px dashed green; padding: 10px; background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg"); background-size: 200px 100px; } www.tutorialspoint.com ... Read More
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
295 Views
Wave effect is used to give the object a sine wave distortion to make it look wavy.The following parameters can be used in this filterS.NoParameter & Description1AddA value of 1 adds the original image to the waved image, 0 does not.2FreqThe number of waves.3LightThe strength of the light on the wave (from 0 to 100).4PhaseAt what degree the sine wave should start (from 0 to 100).5StrengthThe intensity of the wave effect.ExampleYou can try to run the following code to set wave effect −Live Demo Text Example: CSS Tutorials
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
69 Views
Use the border-bottom-left-radius property to set the border of the bottom left corner. You can try to run the following code to implement the border-bottom-left-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-bottom-left-radius: 45px; background: blue; padding: 20px; width: 200px; height: 150px; } Rounded corners!
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
154 Views
To implement Fade Out Right Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } animation-name: fadeOutLeft; Reload page function myFunction() { location.reload(); }
![Lakshmi Srinivas](https://www.tutorialspoint.com/assets/profiles/13528/profile/60_91717-1512651120.jpg)
61 Views
Use border-bottom-right-radius property for setting the border of the bottom right corner. You can try to run the following code to implement border-bottom-right-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-bottom-right-radius: 45px; background: orange; padding: 20px; width: 200px; height: 150px; } Rounded corners!
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
73 Views
Use the border-top-right radius property in CSS to set the top right radius border. You can try to run the following code to implement border-top-right-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-top-right-radius: 45px; background: orange; padding: 20px; width: 200px; height: 150px; } Rounded corners!
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
96 Views
To implement Fade Down Left Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } Reload page function myFunction() { location.reload(); }
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
137 Views
Use the border-radius property to set four border-radius property. You can try to run the following code to implement border-radius property −ExampleLive Demo #rcorner { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } Rounded corners!