CSS Articles - Page 119 of 160

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 transitionExampleLive 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 animation-duration property to set how long an animation should take to complete one cycleExampleYou can try to run the following code to implement the animation-duration property −Live Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;          }          @keyframes myanim {            from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                              

To add transition effect for width and height property of an element, you can try to run the following codeExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;          }          div:hover {             width: 250px;             height: 250px;          }                     Heading One       Hover over the below box to change its width and height.          

To create an image gallery with CSS is quite easy. You can try to run the following code to achieve this. A gallery of 3 images is created here,ExampleLive Demo                    div.myGallery {             margin: 3px;             border: 2px solid orange;             float: left;             width: 220px;          }          div.myGallery:hover {             border: 1px solid blue;          }          div.myGallery img {             width: 100%;             height: auto;          }          div.desc {             padding: 20px;             text-align: center;          }                                                              3D Animation Tutorial                                                      Swift Video Tutorial                                                      CSS Tutorial          

To create a transition effect, set the property for the transition effect. With that also set the duration of effect.transition: height 5s;You can try to run the following code to create a transition effectExampleLive demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width.          

To create a circle with radial gradient, you can try to run the following code. Set another parameter in radial gradient for shapes like circleExampleLive Demo                    #demo {             height: 400px;             background: radial-gradient(circle, red , blue, yellow);          }                     Radial Gradient       Radial Gradients    

Use the transition property to work with CSS Transitions.You can try to run the following code to implement transitions in CSS:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 4s;          }          div:hover {             width: 200px;          }                     Heading One       Hover over the below box to change its width.          

With the transition effect, you can easily change the property values. You can also set a duration.Let us try to change the height of an element:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

To determine whether an element should be visible when not facing the screen or not, use the backface-visibility propertyExampleLive Demo                    .demo1 {             position: relative;             width: 150px;             height: 150px;             background-color: yellow;             perspective: 80px;             margin: 50px;             perspective-origin: left;             transform: rotateY(180deg);          }          .demo2 {             position: absolute;             padding: 20px;             background-color: orange;             transform-style: preserve-3d;             transform: rotateX(45deg);             backface-visibility: visible;          }                     Rotation       Demo          Demo                    

Use the [attribute = ”value”] selector to select elements with a specified attribute and value.You can try to run the following code to implement the CSS [attribute = "value"] Selector. Here, we have considered the attribute as rel,Example:Live Demo                 a[rel = nofollow] {          border: 3px solid blue;       }                     Uber's Business Model       Share Market