CSS rest Speech Media Property

varun
Updated on 06-Jul-2020 11:43:36

181 Views

The rest property is a shorthand property for rest-before and rest-after properties. Set a pause before or after the element.The following is the syntax:rest: rest-before rest-afterHere,rest-before: Rest for some seconds beforerest-after: Rest for some seconds afterExampleThe following is an example of rest speech media property:h1 {    rest: 15ms 20ms; }

Show Flex Lines with Equal Space Between Them

Chandu yadav
Updated on 06-Jul-2020 11:42:28

213 Views

Use the align-content property with value space-between to add space between the flex lines.ExampleYou can try to run the following code to implement the space-between valueLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: #5D6D7E;             align-content: space-between;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: #EBF5FB;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

Animate CSS Line Height Property

usharani
Updated on 06-Jul-2020 11:41:51

533 Views

To implement animation on line-height property with CSS, you can try to run the following code −ExampleLive Demo                    p {             animation: mymove 3s infinite;             line-height: 20px;          }          @keyframes mymove {             70% {                line-height: 50px;             }          }                     This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          This is demo text! This is demo text! This is demo text!          

Detect MySQL Database Structure Changes

AmitDiwan
Updated on 06-Jul-2020 11:39:59

301 Views

Let us first see an example and create a table −mysql> create table DemoTable (    StudentId int NOT NULL AUTO_INCREMENT PRIMARY KEY,    StudentName varchar(40),    StudentAge int,    StudentMarks int ); Query OK, 0 rows affected (0.76 sec)Following is the query to know the database structure −mysql> show create table DemoTable;This will produce the following output −+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Table         | Create Table                                                                 ... Read More

Deserialize JSON Array to List Generic Type in Java

raja
Updated on 06-Jul-2020 11:38:01

2K+ Views

The Gson library provides a class called com.google.gson.reflect.TypeToken to store generic types by creating a Gson TypeToken class and pass the class type. Using this type, Gson can able to know the class passed in the generic class.Syntaxpublic class TypeToken extends ObjectWe can deserialize a JSON array to a generic type of list in the below exampleExampleimport java.lang.reflect.Type; import java.util.*; import com.google.gson.*; import com.google.gson.reflect.*; public class JSONArrayToListTest {    public static void main(String args[]) throws Exception {       String jsonStr = "[{\"name\":\"Adithya\", \"course\":\"Java\"}, " + "{\"name\":\"Ravi\", \"course\":\"Python\"}]";       Type listType = new TypeToken() {}.getType();       List students = ... Read More

Reset All Properties with CSS

Ankith Reddy
Updated on 06-Jul-2020 11:28:34

680 Views

Use the all property to reset all the properties. Set all property to initial, inherit or unset.ExampleYou can try to run the following code to implement the CSS all propertyLive Demo                    html {             color: blue;          }          #demo {             background-color: yellow;             color: red;             all: inherit;          }                     CSS all property       This is demo text.    

Display Flex Lines at the Start of the Container with CSS

varun
Updated on 06-Jul-2020 11:27:53

84 Views

Use the align-content property with value flex-start to set the flex lines in the beginning.ExampleYou can try to run the following code to implement the flex-start value:Live Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: blue;             align-content: flex-start;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

CSS grid-area Property

usharani
Updated on 06-Jul-2020 11:14:34

117 Views

Set the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties using the grid-area property.ExampleYou can try to run the following code to implement the CSS grid-area property.LIve Demo                    .container {             display: grid;             background-color: green;             grid-template-columns: auto auto;             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: 1 / 2 / 2 / 5;          }                     Game Board                1          2          3          4          5          6          

Set Flex Items Horizontally with CSS

varma
Updated on 06-Jul-2020 11:13:41

416 Views

Use the flex-direction property with row value to set the flex-items horizontally.ExampleYou can try to run the following code to implement the row value −Live Demo                    .mycontainer {             display: flex;             flex-direction: row;             background-color: #2C3E50;          }          .mycontainer > div {             background-color: #F7F9F9;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          

Wrap Flex Items in Reverse Order with CSS

Chandu yadav
Updated on 06-Jul-2020 10:59:44

1K+ Views

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          

Advertisements