Web Development Articles - Page 762 of 1049

To position text to top left, use the left and top property. You can try to run the following code to position text to left position on an image −ExampleLive Demo                    .box {             position: relative;          }          img {             width: 100%;             height: auto;             opacity: 0.6;          }          .direction {             position: absolute;             top: 10px;             left: 19px;             font-size: 13px;          }                     Heading One       Below image has text in the top left:                          Top Left Corner          

To make your video player responsive, use the width property and set it to 100%ExampleLive Demo                                 video {                width: 100%;                height: auto;             }                                                         To check the effect, you need to resize the browser.    

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

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