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 Chandu yadav
Page 19 of 81
CSS shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
Use the flex property to add flex-grow, flex-shrink and flex-basis properties in a single line.You can try to run the following code to implement the flex propertyExample .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8 Q9
Read MoreAnimate CSS padding-left property
To implement animation on padding-left property with CSS, you can try to run the following codeExample div { width: 350px; height: 150px; outline: 3px solid orange; animation: myanim 3s infinite; } @keyframes myanim { 50% { padding-left: 20px; } } CSS padding-left property
Read MoreRole of CSS: valid Selector
Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid Selector input:valid { background: red; color: white; } Heading The style (red color background) appears if you type a relevant/ valid email address.
Read MoreCSS top property with Animation
To implement animation on top property with CSS, you can try to run the following code −Example div { position: absolute; width: 300px; height: 200px; background-color: orange; color: white; top: 0; animation: myanim 3s infinite; } @keyframes myanim { 30% { top: 300px; } } CSS top property This is demo text!
Read MoreUse CSS width property for a responsive video player
To make your video player responsive, use the width property and set it to 100%Example video { width: 100%; height: auto; } To check the effect, you need to resize the browser.
Read MoreSet the navigation bar to stay at the top of the web page with CSS
To set the navigation bar at top, use position: fixed property, with top property.You can try to run the following code to implement a menu that stays on the top, Example ul { list-style-type: none; position: fixed; top: 0; width: 100%; } li { float: left; ...
Read MoreRotate In Down Right Animation Effect with CSS
To create a rotate in down animation effect with CSS, you can try to run the following code −Example .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } Reload page function myFunction() { location.reload(); }
Read MoreBootstrap Grid for multiple devices
The following is an example showing the usage of Grid for multiple devices −Example Bootstrap Example Hello, world! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ...
Read MoreBootstrap .pagination class
Use the .pagination class to get the pagination on your page.You can try to run the following code to implement the .pagination class −Example Bootstrap Example Coding Examples The following are the examples: « Code1 Code2 Code3 »
Read MoreSet Column Ordering in Bootstrap
Write the columns in an order, and show them in another one. You can easily change the order of built-in grid columns with .col-md-push-* and .col-md-pull-*modifier classes where * range from 1 to 11.Example Bootstrap Example Heading Before Ordering I am on left I am on right After Ordering I was on left I was on right
Read More