Front End Technology Articles - Page 651 of 860

Use the CSS :hover selector to style links on mouse over with CSS. You can try to run the following code to implement the :hover selector −ExampleLive Demo                    a:hover {             background-color: orange;          }                     Qries       Keep the mouse cursor on the above link and see the effect.    

To select the element that has focus, use the: focus selector. You can try to run the following code to implement the: focus selector −Example                    input:focus {             background-color: green;          }                              Subject          Student:          Age:

Use the :focus selector to select the element that has focus. You can try to run the following code to implement the :focus selectorExample                    input:focus {             background-color: green;          }                              Subject          Student:          Age:                    

The column-span property is used to specify the span between columns. You can try to run the following code to implement column-span property using CSS −Example Live Demo    .multi {       /* Column count property */       -webkit-column-count: 4;       -moz-column-count: 4;       column-count: 4;       /* Column gap property */       -webkit-column-gap: 40px;       -moz-column-gap: 40px;       column-gap: 40px;       /* Column style property */       column-rule-style: solid;       column-rule-color: #ff00ff;   ... Read More

The multi-column rule-color property is used to specify the column rule color. You can try to run the following code to implement a rule-color property in CSS3 −ExampleLive Demo                    .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* Column gap property */             -webkit-column-gap: ... Read More

The multi-column column-gap property is used to decide the gap between the columns.ExampleYou can try to run the following code to implement column-gap propertyLive Demo                    .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* Column gap property */             -webkit-column-gap: 40px;       ... Read More

The multi-column column-rule property is used to specify the number of rules.You can try to run the following code to implement the column-rule property in CSS3 −ExampleLive Demo                    .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;                         /* Column gap property */             -webkit-column-gap: 40px; ... Read More

CSS3 supported multi columns to arrange the text as newspaper structure. Some of the most common used multi columns properties as shown below −ValuesDescriptioncolumn-countUsed to count the number of columns that element should be dividedcolumn-fillUsed to decide, how to fill the columnscolumn-gapUsed to decide the gap between the columnscolumn-ruleUsed to specify the number of rulesrule-colorUsed to specify the column rule colorrule-styleUsed to specify the style rule for a columnrule-widthUsed to specify the widthcolumn-spanUsed to specify the span between columns

You can try to run the following code to move left animation with keyframes using CSS3ExampleLive Demo                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%;                width:300%             }             75% {                font-size:300%;                margin-left:25%;                width:150%;             }             to {                margin-left:0%;                width:100%;             }          }                     Tutorials Point       This is an example of animation left with an extra keyframe to make text changes.       Reload page                function myFunction() {             location.reload();          }          

The following example shows height, width, color, name, and duration of animation with keyframes syntax −ExampleLive Demo                    h1 {             -moz-animation-duration: 3s;             -webkit-animation-duration: 3s;             -moz-animation-name: slidein;             -webkit-animation-name: slidein;          }          @-moz-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }          }          @-webkit-keyframes slidein {             from {                margin-left:100%; width:300%             }             to {                margin-left:0%; width:100%;             }           }                     Tutorials Point       this is an example of moving left animation .       Reload page       function myFunction() { location.reload(); }