Front End Technology Articles - Page 478 of 652

The nav-left property is used to move left when you have pressed on left arrow button in keypad. You can try to run the following code to implement the CSS nav-left 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    

Use the flex-direction property with row-reverse value to set the flex-items horizontally from right to left.ExampleYou can try to run the following code to implement the row-reverse valueLive Demo                    .mycontainer {             display: flex;             flex-direction: row-reverse;             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 grid-auto-rows property to set size for the rows.ExampleYou can try to run the following code to implement the grid-auto-rows property −Live Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Set where to start the grid-items with CSS grid-row-start property.You can try to run the following code to implement the grid-row-start propertyExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele1 {             grid-row-start: 2;          }                              1          2          3          4          5          6          

Use the flex-direction property with column-reverse value to set the flex-items vertically, from top to bottomExampleYou can try to run the following code to implement the column-reverse value −Live Demo                    .mycontainer {             display: flex;             flex-direction: column-reverse;             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 unicode-bdi property to set whether the text should be overridden to support multiple languages with CSSExampleLive Demo                    p.demo1 {             direction: rtl;             unicode-bidi: bidi-override;          }          p.demo2 {             direction: rtl;             unicode-bidi: isolate;          }                     The unicode-bidi Property       This is demo text.       This is demo text       This is demo text    

Use the Unicode-bidi property to set whether the text should be overridden to support multiple languages with CSSExampleLive Demo                    p.demo1 {             direction: rtl;             unicode-bidi: bidi-override;          }          p.demo2 {             direction: rtl;             unicode-bidi: isolate;          }                     The unicode-bidi Property       This is demo text.       This is demo text       This is demo text    

Use the tab-size property in CSS to set the width of a tab character. You can try to run the following code to implement the tab-size propertyExampleLive Demo                    #demo {             tab-size: 12;          }                     The tab-size Property                This is demo text.          

Use the quotes property to set quotation marks. You can try to run the following code to implement the quotes propertyExampleLive Demo                    #demo {             quotes: "'" "'";          }                                           This is demo text surrounded by quotes.                    

Use the hanging-punctuation property to set whether a punctuation character may be placed outside the line box.It has the following valuesS.NoProperty Value & Description1.NoneNo punctuation mark2.FirstPunctuation outside the start edge of the first line3.LastPunctuation outside the end edge of the last lineSet it like this in your web page −hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last;