Front End Technology Articles - Page 539 of 745

Use the flex-wrap property with wrap-reverse value to wrap flex-items in reverse order.ExampleYou can try to run the following code to implement the wrap-reverse valueLive Demo                    .mycontainer {             display: flex;             background-color: #D35400;             flex-wrap: wrap-reverse;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Ans1          Ans2          Ans3          Ans4          Ans5          Ans6          Ans7          Ans8          Ans9          

To implement animation on the color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 200px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;          }          @keyframes myanim {             20% {                bottom: 100px;                box-shadow: 30px 45px 70px orange;                color: blue;             }          }                     Performing Animation on color property       This is our demo div!    

To implement animation on the border-top-right-radius property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #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-spacing: 50px;                border-top-color: red;                border-top-right-radius: 150px;             }          }                     Performing Animation for border top right radius                             Subject             Student             Marks                                 PHP             Tom             90                                 Java             Henry             70                    

Use the repeating-radial-gradient() function to repeat radial gradient.You can try to run the following code to implement repeating-radial-gradient() function in CSSExampleLive Demo                    #demo {             height: 300px;             background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);          }                     Repeating radial gradient          

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              

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!