Front End Technology Articles - Page 629 of 860

To display a shadow on image hover, use the CSS box-shadow propertyExampleLive Demo                    img {             border: 2px solid orange;             border-radius: 3px;             padding: 7px;          }          img:hover {             box-shadow: 0 0 2px 2px blue;          }                        

Whether in graphic design, photography, or even on a web page, adding shadows is a massive technique to create the appearance of depth and perspective. It is not necessary to open Photoshop or another visual editing program in order to apply this kind of effect to text, images, and other elements on a web page it can be done by using the CSS3 properties. You can make use of two properties. The majority of browsers support both of these features, they are listed below − text-shadow box-shadow Add the comma-separated list of shadows to add more than one ... Read More

Use Inline List Items to build a horizontal navigation bar. Set the elements as inline.ExampleYou can try to run the following code to create horizontal navigation bar:Live Demo                    ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }                              Home          Company          Product          Services          Contact          

To create red neon glow shadow, use the text-shadow property. You can try to run the following code to achieve thisExampleLive Demo                    h1 {             text-shadow: 0 0 4px #FF0000;          }                     Heading One       Above heading has a read neon glow shadow effect.    

Use the text-shadow property to create white text with black shadow.You can try to run the following code to implement the text-shadow property:ExampleLive Demo                    h1 {             color: white;             text-shadow: 3px 3px 3px #000000;          }                     Heading One       Above heading has a text shadow effect.    

To fade in tooltip text with CSS, you can try to run the following code:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -5px;          right: 110%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;          opacity: 0;          transition: opacity 1s;       }       .mytooltip {          position: relative;          display: inline-block;          margin-left: 150px;       }       .mytooltip .mytext:after {          content: "";          position: absolute;          top: 50%;          left: 100%;          margin-top: -5px;          border-width: 6px;          border-style: solid;          border-color: transparent transparent transparent blue;       }       .mytooltip:hover .mytext {          visibility: visible;          opacity: 1;       }               Keep mouse cursor over me           My Tooltip text          

To increment a counter value with CSS, use the counter-increment property.You can try to run the following code to implement the counter-implement property −ExampleLive Demo                    body {             counter-reset: section;          }          h2::before {             counter-increment: section;             content: "Fruit " counter(section) " - ";          }                     Fruits       Mango       Kiwi    

Apply a 2D or 3D transformation to an element with the transform property in CSS. You can try to run the following code to rotate an element using transformationExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: gray;             transform: rotate(10deg);          }                     Rotation      Demo    

The transform property in CSS is used to apply a 2D or 3D transformation to an element. You can try to run the following code to implement the transform property −ExampleLive Demo                    div {             width: 200px;             height: 100px;             background-color: gray;             transform: rotate(10deg);          }                     Rotation       Demo    

Use the element ~ element selector to select elements preceded by element. You can try to run the following code to implement thisExampleLive Demo                    p~ul {             color: white;             background-color: blue;          }                     Demo Website       Fruits                Vegetables are good for health.                       Spinach             Onion             Capsicum                       Fruits are good for health.                Apple          Orange          Kiwi