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

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    

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!    

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();          }          

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!    

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!    

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();          }          

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!    

CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.ExampleLive Demo                    #rcorner {             border-radius: 25px;             background: #8AC007;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

Validation is the process of checking something against a rule. When you are a beginner, it is very common that you will commit many mistakes in writing your CSS rules. How will you make sure whatever you have written is 100% accurate and up to the W3 quality standards?If you use CSS, your code needs to be correct. The improper code may cause unexpected results in how your page looks or functions.But if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.Tool to check the ... Read More