Front End Technology Articles - Page 621 of 860

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

To add transparency to a button, use the CSS opacity property. This creates a disabled look for the button.You can try to run the following code to add transparency to a buttonExampleLive Demo                    .btn1 {             color: black;             text-align: center;             font-size: 15px;          }          .btn2 {             color: black;             text-align: center;             font-size: 15px;             opacity: 0.8;          }                     Result       Click below for result:       Enabled       Disabled    

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 flex-direction property to specify the direction of the flexible items. You can try to run the following code to implement the flex-direction property: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          

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 justify-content property with value space-around to add space between the flex-items.You can try to run the following code to implement the space-between valueExampleLive Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: space-between;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

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