Front End Technology Articles - Page 626 of 860

Align flex lines with CSS align-content property. You can try to run the following code to implement the align-content property. It adds space around the items:ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             flex-wrap: wrap;          }          .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          

Use the align-items property with value flex-start to align flex items on the top.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .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 justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-end;          }          .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 justify-content property with value flex-start to align the flex-items at the beginning.ExampleYou can try to run the following code to implement the flex-start value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

You can try to run the following code to align the grid inside the container using the justify-content property:ExampleLive Demo                    .container {             display: grid;             background-color: gray;             grid-template-rows: 120px 90px 100px;             justify-content: space-evenly;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: yellow;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

You can try to run the following code to create a responsive pagination with CSSExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: blue;             float: left;             padding: 3px 8px;             text-decoration: none;          }                     Our Quizzes                          

You can try to run the following code to fade in on button hover with CSSExampleLive Demo                    .btn {             background-color: orange;             color: white;             padding: 10px;             text-align: center;             font-size: 16px;             margin: 5px;             opacity: 0.5;             transition: 0.5s;             display: inline-block;             text-decoration: none;             cursor: pointer;          }          .btn:hover {             opacity: 2          }                     Result    

To set the button width, use the CSS width property.ExampleYou can try to run the following code to set the width of a button −Live Demo                    .btn {             background-color: yellow;             color: black;             width: 120px;             text-align: center;             font-size: 15px;             padding: 20px;             border-radius: 15px;             border: 3px dashed blue;          }                     Result       Click below for result:       Result    

Adding a pressed effect on button click with CSS makes the user feel more interactive with the web page. It provides an immediate visual effect indicating that the button press has been registered. It helps in improving the user experience. In this article, we have a button on our web page. Our task is to add a pressing effect while clicking the button. Approaches to Add a Pressed Effect on Button Here is a list of approaches to add a pressed effect on button click with CSS which we will be discussing in this article with stepwise explanation and complete ... Read More

Set gap between Grid rows with CSS. You can try to run the following code to implement the grid-row-gap property.ExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-column-gap: 20px;             grid-row-gap: 20px;          }          .ele {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6