Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Articles by Ankith Reddy
Page 18 of 73
Animate CSS border-top-left-radius property
To implement animation on the border-top-left-radius property with CSS, you can try to run the following codeExample table,th,td { border: 2px solid black; } #newTable { width: 500px; height: 300px; background: yellow; border: 15px solid yellow; animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 30% { background-color: orange; border-spacing: 50px; border-top-color: red; border-top-left-radius: 150px; } } Performing Animation for border top left radius Subject Student Marks Maths Amit 98 Science Sachin 99
Read MoreWhich CSS property is used to run Animation in Reverse Direction?
Use the animation-direction property to run animation in reverse direction. The property is used with the reverse animation value to achieve this.Example 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; } }
Read MoreMake Definition list with Bootstrap
For definition list in Bootstrap, you can try to run the following code −Example Bootstrap lists Lists Definition List Description 1 Item 1 Description 2 Item 2 Fruits (Ordered List) Kiwi Apple Mango Vegetables (UnOrdered List) Tomato Brinjal Broccoli
Read MoreMake Unordered list with Bootstrap
For unordered list in Bootstrap, you can try to run the following code −Example Bootstrap lists Lists Fruits (Ordered List) Kiwi Apple Mango Vegetables (UnOrdered List) Tomato Brinjal Broccoli
Read MoreAdd denser information to a table with Bootstrap
Use the .table-condensed class, add denser information to a table.You can try to run the following code to implement a table-condensed class in Bootstrap −Example Bootstrap Table Footballer Rank Footballer Rank Country Messi 1 Argentina Neymar 2 Brazil Ronaldo 3 Portugal
Read MoreAdd CSS transition effect for both the width and height property
To add transition effect for width and height property of an element, you can try to run the following codeExample 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.
Read MoreHow to delay an animation with CSS
To delay an animation, use the CSS animation-delay property. You can try to run the following code to delay animationExample div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-delay: 2s; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
Read MoreSet the width of a tab character with CSS
Use the tab-size property in CSS to set the width of a tab character. You can try to run the following code to implement the tab-size propertyExample #demo { tab-size: 12; } The tab-size Property This is demo text.
Read MoreSet an animation with a slow start, then fast, and end slowly with CSS
Use the animation-timing-function property, with the ease value to set animation with a slow start, then fast, to end slowly with CSSExample div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} ease effect
Read MoreCSS animation-iteration-count property
Use the animation-iteration-count property to set the number of times an animation should be played with CSS.You can try to run the following code to implement the animation-iteration-count propertyExample div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} #demo2 {animation-timing-function: ease-in;} ease effect ease-in effect
Read More