Front End Technology Articles - Page 612 of 860

Use the justify-content property with value flex-start to align the flex-items at the beginning.You can try to run the following code to implement the flex-start valueExampleLive 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;          }                     Result                Rank1          Rank2          Rank3          Rank4          

To implement animation on the border-spacing property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 1px solid green;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-right-color: red;                border-right-width: 25px;                border-spacing: 50px             }          }                     Performing Animation for border spacing                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

To implement animation on border-right-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             background-image: url('https://www.tutorialspoint.com/latest/cuda.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: maroon;                border-right-color: red;                border-right-width: 25px;             }          }                     Performing Animation for border right width              

To define colors using the Hue-Saturation-Lightness model (HSL) with Opacity, use the hsla() CSS method.ExampleYou can try to run the following code to implement the hsla() function in CSSLive Demo                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:hsl(192,89%,48%);          }          p {             background-color:hsla(290,100%,50%,0.3);          }                     Red Background       Blue Background       This is demo text!    

Use the align-items property with value flex-start to align flex items on the top.You can try to run the following code to implement the flex-start valueExampleLive Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          

Use the align-items property with value center to align flex items in the middle.ExampleYou can try to run the following code to implement the center valueLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-items: center;             height: 150px;             width: 600px;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

Get the values of properties in CSS using the calc() property. You can try to run the following code to implement the calc() function in CSSExampleLive Demo                    #demo {             position: absolute;             width: calc(100% - 100px);             background-color: blue;             text-align: center;          }                     Heading One       This is it!    

Use the border-bottom-left-radius property to set the border of the bottom left corner. You can try to run the following code to implement the border-bottom-left-radius propertyExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-left-radius: 45px;             background: blue;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

Use border-bottom-right-radius property for setting the border of bottom right corner. You can try to run the following code to implement border-bottom-right-radius propertyExampleLive Demo                    #rcorner {             border-radius: 25px;             border-bottom-right-radius: 90px;             background: #F5CBA7;             padding: 20px;             width: 400px;             height: 300px;          }                     Rounded border bottom corner!