Front End Technology Articles - Page 483 of 652

You can try to run the following code to achieve responsiveness for background image with CSS −ExampleLive Demo                          div {             width: 100%;             height: 300px;             border: 2px dashed blue;             background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg');             background-repeat: no-repeat;             background-size: contain;          }                     To check the effect, you need to resize the browser.          

You can try to run the following code to implement the max-width property for the responsive imageExampleLive Demo                          img {             max-width: 100%;             height: auto;          }                     To check the effect, you need to resize the browser.          

Set the width property to 100% for the responsive image. You can try to run the following code to make your image responsiveExampleLive Demo                                 img {                width: 100%;                height: auto;             }                         To check the effect, you need to resize the browser.          

You can try to run the following code to build a responsive grid-view:ExampleLive Demo                          * {             box-sizing: border-box;          }          .header {             border: 1px solid black;             padding: 10px;          }          .leftmenu {             width: 30%;             float: left;           ... Read More

Use the align-content property with value space-between to add space between the flex lines.You can try to run the following code to implement the space-between valueExampleLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: red;             align-content: space-between;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: yellow;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Use the column-rule-width property to set the width of the rule between columns.ExampleYou can try to run the following code to implement the column-rule-width property:Live Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule-color: maroon;             column-rule-style: dashed;             column-rule-width: 5px;          }                              This ... Read More

To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule-color: maroon;             column-rule-style: dashed;          }                              This is demo text. This is demo ... Read More

Use the :hover selector to add hover effect. To give a rounded effect, use the border-radius property. You can try to run the following code to set rounded active and hover button with CSS:ExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             border-radius: 5px;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }                     Our Quizzes                          

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 propertyExampleLive Demo                    .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          

Use the flex-direction property with column value to set the flex-items verticallyYou can try to run the following code to implement the column value:ExampleLive Demo                    .mycontainer {             display: flex;             flex-direction: column;             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