Web Development Articles - Page 765 of 1049

Use the columns property to set columns with CSS. You can try to run the following code to implement the columns property:ExampleLive Demo                    .demo {             column-rule-color: gray;             columns: 100px 4;             column-rule-style: dashed;          }                              This is demo text. This is demo text. This is demo text. This is demo text.         ... Read More

Use the column-width property to specify the width of the columns. You can try to run the following code to implement the column-width property −ExampleLive Demo                    .demo {             column-count: 4;             column-rule-color: gray;             column-rule-style: dashed;             column-width: 100px;          }                              This is demo text. This is demo text. ... Read More

To set how many columns an element should span, use the column-span property. You can try to run the following code to implement the column-span property:ExampleLive Demo                    .demo {             column-count: 4;             column-rule-color: maroon;             column-rule-style: dashed;          }          h1 {             column-span: all;          }                     ... Read More

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

To create a disabled button look, use the CSS opacity property.ExampleYou can try to run the following code to create a disabled look of a button −Live Demo                    .btn1 {             color: black;             text-align: center;             font-size: 15px;          }          .btn2 {             color: black;             text-align: center;             font-size: 15px;             opacity: 0.5;          }                     Result       Click below for result:       Enabled       Disabled    

You can try to run the following code to create a vertical button groupExampleLive Demo                    .mybtn .button {             background-color: orange;             border: 1px solid green;             width: 120px;             color: white;             font-size: 14px;             padding: 10px;             text-align: center;             text-decoration: none;             display: block;          }                              Result          Result          Result          Result          

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

The shorthand property for column rule is column-rule property. You can try to run the following code to implement the column-rule propertyExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule: 2px dotted orange;          }                              This is demo text. This is demo text. This is demo text.          This ... Read More

Use the column-gap property to set the gap between the columns. You can try to run the following code to implement the column-gap property, with value 50px:ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;          }                              This is demo text. This is demo text. This is demo text. This is demo text.          This is ... Read More

To fill columns, use the column-fill property. You can try to run the following code to implement the column-fill property, with balance form:ExampleLive Demo                    .demo {             column-count: 4;             column-fill: balance;          }                              This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is ... Read More