Web Development Articles - Page 776 of 1049

Use the [attribute$=”value”] selector to select elements whose attribute value ends with a specified value i.e. “.htm” here.You can try to run the following code to implement the CSS [attribute$="value"] Selector,ExampleLive Demo                    [href$ = htm] {             border: 5px solid orange;             border-radius: 5px;          }                     Java Tutorial       Java Tutorial PDF    

To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo                    ul {             list-style-type: none;             position: sticky;             overflow: hidden;             top: 0;             width: 100%;          }          li {             float: left;       ... Read More

To set up different speed curves with transition-timing-function, you can try to run the following codeExampleLive Demo                    div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          #effect3 {             transition-timing-function: ease-out;          }          div:hover {             width: 250px;          }                     Transition Effect       Hover over the div elements and see the transition effect and the speed:       linear effect       ease-in effect       ease-out effect    

To set the name of the CSS property the transition effect is, use the CSS transition-property.In the below example, we have set the property as width and set the duration as well:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: width;             transition-duration: 3s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width.          

Use the transition-duration property in CSS to set how many seconds or milliseconds a CSS transition effect takes to complete −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-duration property to set the duration of transitionExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-delay property to set a delay for 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: 2s;          }          div:hover {             width: 350px;          }                     Heading One       Hover over the below box to change its width. It begins with a delay of 2 seconds.          

Use the CSS transition property to set all the four transition properties into a single line. You can try to run the following code to work with the transition property −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: height 3s;          }          div:hover {             height: 250px;          }                     Heading One       Hover over the below box to change its height.          

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;}          }