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 20 of 73
Make 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 MorePerform Animation on border-bottom-width CSS property
To implement animation on the border-bottom-width property with CSS, you can try to run the following codeExample div { width: 500px; height: 300px; background: yellow; border: 10px solid yellow; border-bottom-right-radius: 100px; border-bottom-width: 30px; background-image: url('https://www.tutorialspoint.com/latest/electronic_measuring_instruments.png'); animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 20% { background-color: maroon; background-size: 90px; border-bottom-color: green; border-bottom-right-radius: 50px; border-bottom-width: 50px; } } Performing Animation for bottom border width
Read MoreSet an animation with the same speed from start to end with CSS
Use the animation-timing-function property, with the linear value to set animation with the same speed from start to end 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;} } #demo {animation-timing-function: linear;} linear effect
Read MoreUsage of calc() CSS function
Get the values of properties in CSS using the calc() property. You can try to run the following code to implement the calc() function in CSSExample #demo { position: absolute; width: calc(100% - 100px); background-color: blue; text-align: center; } Heading One This is it!
Read More