The window.location object can be used to get the current URL.window.location.href property returns the href (URL) of the current page. We could also use window.location or location in place of window.location.href.We could also use document.documentURI and document.URL properties.document.documentURI returns the location of the document as a string.document.URL returns the URL ... Read More

To implement animation on the column-gap property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 600px;             height: 300px;     ... Read More

Use the CSS :optional selector to style elements with no "required" attributeExampleYou can try to run the following code to implement the :optional selector:Live Demo                    input:optional {             background-color: blue;          }                              Subject:          Student:          

To style all unvisited links, use the CSS :link selector. You can try to run the following code to implement the :link selector:ExampleLive Demo                    a:link {             background-color: orange;          }                     Demo Websitehttps://www.example.com/    

To style all elements with an invalid value, use the CSS :invalid selector.ExampleYou can try to run the following code to implement the :invalid selector −Live Demo                    input:invalid {             background: red;          }                     Heading             The style (red color background) appears if you type an irrelevant/ invalid email address.    

To set the responsive font size, use the ‘viewport width’ and set it to ‘vw’ unit. You can try to run the following code to use ‘vw’ unit −ExampleLive Demo                    h1 {             font-size:8vw;          }                     This is demo heading       This is demo text.    

CSS3 supported multi columns to arrange the text as newspaper structure. Some of the most common used multi columns properties as shown below −ValuesDescriptioncolumn-countUsed to count the number of columns that element should be dividedcolumn-fillUsed to decide, how to fill the columnscolumn-gapUsed to decide the gap between the columnscolumn-ruleUsed to ... Read More

You can try to run the following code to implement top to the bottom gradient in CSS3 −ExampleLive Demo                    #grad1 {             height: 100px;             background: -webkit-linear-gradient(pink,green);             background: -o-linear-gradient(pink,green);             background: -moz-linear-gradient(pink,green);            background: linear-gradient(pink,green);          }                          

The border-image-slice property is used to slice the border image with CSS. You can try to run the following code to implement the border-image-slice property:ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;     ... Read More

To implement animation on the border-bottom property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 500px;             height: 400px;       ... Read More