Front End Technology Articles - Page 650 of 860

Use the background-repeat property to display the background image only once. You can try to run the following code to implement the background-repeat property −ExampleLive Demo                    body {             background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");             background-repeat: no-repeat;          }                     Background Image    

Use the CSS :nth-last-of-type(n) selector to select every element that is the second element of its parent, counting from the last child.ExampleYou can try to run the following code to implement the :nth-last-of-type(n) selector:Live Demo                    p:nth-last-of-type(2) {             background: blue;             color: white;          }                     This is demo text 1.       This is demo text 2.       This is demo text 3.       This is demo text 4.       This is demo text 5.    

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.    

To style elements with a value within a specified range, use the CSS :in-range selector. You can try to run the following code to implement the :in-range selectorExampleLive Demo                    input:in-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered i.e. 9    

Use the rotateZ(angle) method to rotate transform the element by using z-axis with CSS3 −ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#zDiv {             -webkit-transform: rotateZ(90deg);             /* Safari */             transform: rotateZ(90deg);             /* Standard syntax */          }                     rotate Z axis                tutorials point.com.           Output

To disable text wrapping inside an element, use the white-space property. You can try to run the following code to implement the white-space propertyExampleLive Demo                    p {             white-space: nowrap;          }                              This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is some text. This is demo text.          

Use the translateX(x) method to transform the element using x-axis.Let us see the syntaxtranslateX(x)Here,x: It is a length representing the abscissa of the translating vector.Let us see an examplediv {    width: 40px;    height: 40px;    background-color: black; } .trans {    transform: translateX(20px);    background-color: orange; }

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis.ExampleThe following an example shows the x-axis 3D transformsLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#myDiv {             -webkit-transform: rotateX(150deg);             /* Safari */             transform: rotateX(150deg);             /* Standard syntax */          }                              My website                      Rotate X-axis                      My website           Output

You can try to run the following code to implement Z-axis 3D transform with CSS3:ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: pink;             border: 1px solid black;          }          div#zDiv {             -webkit-transform: rotateZ(90deg);             /* Safari */             transform: rotateZ(90deg);             /* Standard syntax */          }                     rotate Z axis                tutorialspoint.com.           Output

Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid Selector:Live Demo                    input:valid {             background: red;             color: white;          }                     Heading             The style (red color background) appears if you type a relevant/ valid email address.     Output