Front End Technology Articles - Page 631 of 860

To select elements, use the element selector. You can try to run the following code to select elements:ExampleLive Demo                    p {             color: blue;             background-color: orange;          }                     Demo Website       Learning       Tutorials on web dev, programming, database, networking, etc.       Every tutorials has lessons with illustrations and figures.    

To set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -6px;          left: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -6px;          left: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip:hover .mytext {           visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

You can try to run the following code to create a tooltip visible on mouse over. Use the visibility propertyExampleLive demo           #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }               Hover the mouse over me          My Tooltip text          

A tooltip is visible when a user moves the mouse cursor on a text. You can add information in it to make it easy for users to understand.ExampleYou can try to run the following code to learn how to create tooltip −Live Demo           #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }               Hover the mouse over me          My Tooltip text          

Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to achieve thisExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             from {left: 100px;}             to {left: 200px;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}                     ease effect       ease-in effect    

Use the animation-fill-mode property to set a style for the element when the animation is not playingExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: backwards;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                        

To select all elements, use the * CSS Selector. You can try to run the following code to select all the elements,ExampleLive Demo                    *{             color: blue;             background-color: orange;          }                     Demo Website       Learning       Tutorials on web dev, programming, database, networking, etc.       Every tutorials has lessons with illustrations and figures.    

To select elements whose attribute value begins with a specified value, use the [attribute^=”value”] selectorYou can try to run the following code to implement the [attribute^=”value”] selector,ExampleLive Demo                    [alt^=Tutor] {             border: 5px solid blue;             border-radius: 5px;          }                              

To select all the elements with id=”tutorials”, you can try to run the following code.Use the #id CSS selector to achieve this,ExampleLive Demo                    #tutorials {             border: 3px solid red;          }                     Tutorialspoint       Learning       Tutorials on web dev, programming, database, networking, etc.       Every tutorials has lessons with illustrations and figures.