Front End Technology Articles - Page 646 of 860

Use the matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) method to transform the element using 16 values of matrix.Let us see the syntaxmatrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)Here, a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 are numbers showing the linear transformationa4 b4 c4 are numbers describing the translation to apply.

Use the CSS :empty selector to style every element that has no children with CSS. You can try to run the following code to implement the :empty selector −ExampleLive Demo                    p.demo {             width: 300px;             height: 20px;             background: gray;           }           p:empty {              width: 150px;              height: 20px;              background: orange;          }                     This is demo text. Below is empty text.          

Use the CSS :disabled selector to style every disabled element. You can try to run the following code to implement the :disabled selectorExampleLive Demo                    input:enabled {             background: blue;          }          input:disabled {             background: red;          }                              Subject          Student:          Age:          

To style every disabled element, use the CSS :disabled selector. You can try to run the following code to style disabled element −ExampleLive Demo                    input:enabled {             background: blue;          }          input:disabled {             background: red;          }                              Subject          Student:          Age:          

To style every checked element, use the CSS :checked selector. You can try to run the following code to implement the :checked selector −ExampleLive Demo                    input:checked {             height: 20px;             width: 20px;          }                     Fav sports:                Football          Cricket           Tennis          Tennis           Output

The position: fixed; property allows you to position element relative to the viewport. You can try to run the following code to implement CSS position: fixed;ExampleLive Demo                    div{             position: fixed;             bottom: 0;             right: 0;             width: 200px;             border: 3px solid blue;          }                     position: fixed;       The position: fixed; property allows you to position element relative to the viewport.                div has position: fixed;           Output

Use the CSS :checked selector to style every checked element. You can try to run the following code to implement the :checked selector:ExampleLive Demo                    input:checked {             height: 20px;             width: 20px;          }                     Fav sports:                Football          Cricket           Tennis          Tennis           Output

To style the active links, use the CSS :active selector. You can try to run the following code to style the active linksExampleLive Demo                    a:active {             background-color: green;          }                     Welcome to Qries       Click on the above link to see the effect.    

Use the CSS :active selector to style the active links. You can try to run the following code to implement the :active selector −ExampleLive Demo                    a:active {             background-color: orange;          }                     Welcome to Qries       Click on the above link to see the effect.    

You can try to run the following code to implement :focus pseudo-classExampleLive Demo                    input:focus {             background-color: orange;          }                              Subject          Student:          Age:                     Output