To display the overflowed content while hovering over elements, you can try to run the following code:ExampleLive Demo                    div.demo {             white-space: nowrap;             width: 180px;             overflow: hidden;             border: 2px solid blue;         }          div.demo:hover {             text-overflow: inherit;             overflow: visible;          }                     Hover to see the complete text below:             Demo Text that will hide in this box.    

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

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

To add a blur effect to the shadow, use the box-shadow property.You can try to run the following code to add blur effectExampleLive Demo                    h2 {             box-shadow: 10px 10px 7px green;             height: 50px;             background-color: yellow;          }                     Heading Two       Above heading has shadow.    

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.    

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    

To create a fading effect with CSS, use the c You can try to run the following code for fading effect:ExampleLive Demo                    #demo {             height: 100px;                background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1));             }                           Linear Gradient       Fading Effect    

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                                        

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                    

To style the options in , you can try to run the following code,ExampleLive Demo                    select {             width: 100%;             padding: 10px 15px;             border: 1px dashed blue;             border-radius: 4px;             background-color: orange;          }                     Learn,                             Java             Ruby             Oracle             Tableau