- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 8894 Articles for Front End Technology
315 Views
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
2K+ Views
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
91 Views
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
69 Views
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.
207 Views
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.
95 Views
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.
178 Views
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.
215 Views
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.
63 Views
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.
101 Views
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;} }