To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create horizontal navigation bar −Live Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          li {             float: left;          }          li a {             display: block;             padding: 8px;             background-color: orange;          }                              Home          News          Contact          About          

Use the CSS :out-of-range selector to style elements with a value outside a specified range.ExampleYou can try to run the following code to implement the :out-of-range selector:Live Demo                    input:out-of-range {             border: 3px dashed orange;             background: yellow;          }                           The style only works for the value entered out of range    

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) { ... Read More

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

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

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

Used to translateY(n) method to transform the element along with y-axis.Let us see the syntax:translateY(n)Here, n is a length representing the abscissa of the translating vector.ExampleLet us see an example −div {    width: 50px;    height: 50px;    background-color: black; } .trans {    transform: translateY(20px);    background-color: orange; }

CSS border-image property is used to add image border to some elements. You can try to run the following code to implement the border-image property −ExampleLive Demo                    #borderimg1 {             border: 15px solid transparent;             padding: 15px;             border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round;          }                     This is image border example.    

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: 400px;             height: 250px;          }                     Rounded border-top-right corner!    

To implement animation on left property with CSS, you can try to run the following code:ExampleLive Demo                    div {             border: 2px solid black;             width: 300px;             height: 100px;             position: absolute;             left: 0;             animation: myanim 5s infinite;          }          @keyframes myanim {             30% {                left: 200px;             }          }                     This is demo text