Front End Technology Articles - Page 630 of 860

Use the element element selector to select all elements inside another element.You can try to run the following code to implement element element selector,ExampleLive Demo                    div p {             color: white;             background-color: blue;          }                     Demo Website       Fruits       Fruits are good for health.                This is demo text.          

To style, more than one element, use a comma. Separate each element with the comma to achieve this. You can try to run the following code to select and elements,ExampleLive Demo                    div, p {             color: blue;             background-color: orange;          }                     Demo Website       Fruits       Fruits are good for health.                This is demo text.          

Use the right CSS property to add arrow to the right of the tooltip.You can try to run the following code to add a tooltip with arrow to the leftExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -5px;          left: 110%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 50px;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          top: 50%;          right: 100%;          margin-top: -5px;          border-width: 6px;          border-style: solid;          border-color: transparent blue transparent transparent;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

To select elements with an attribute, use the CSS [attribute] selector.For example, alt attribute or a target attribute, etc.You can try to run the following code to implement the CSS[attribute] selector,ExampleLive Demo                    img[alt] {             border: 3px solid orange;          }                              

Using CSS, we can build a visually attractive HTML document. Sometimes, when creating a web page, we want certain images or elements to have rounded corners. The CSS border-radius property is used in this situation. It can be used to draw attention to your website and make it stand out to visitors. CSS border-radius property An element's outer border edges can be rounded at the corners using the CSS border-radius property. There can be one, two, three, or four values in this property. The border-radius can be set using the border-radius property. When border-collapse is collapsing, this property does not ... Read More

Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,ExampleLive Demo                    [alt ~= Tutorials] {             border: 5px solid orange;             border-radius: 5px;          }                              

Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles.You can try to run the following code to implement the animation-direction property:ExampleLive Demo                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: reverse;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

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

Use the transition-delay property to delay the transition effect with CSS. You can try to run the following code to set a 1 second delay of transition:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;             transition-delay: 1s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width. It begins with a delay of 1 second.          

Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExampleLive Demo                    div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          div:hover {             width: 250px;          }                     Transition Effect       Hover over the div elements and see the transition effect and the speed:       linear effect       ease-in effect