Found 1594 Articles for CSS

CSS font-size-adjust Property

usharani
Updated on 25-Jun-2020 13:38:57

127 Views

Use the font-size-adjust property to preserve the readability when font fallback occurs. You can try to run the following code to implement the font-size-adjust property:ExampleLive Demo                    #demo {             font-size-adjust: 0.90;          }                     Heading Two       With font-size-adjust property:                This is demo text.             Without font-size-adjust property:       This is demo text.    

Animate CSS border-top-color property

Ankith Reddy
Updated on 25-Jun-2020 13:37:36

149 Views

To implement animation on the border-top-color 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;             }          }                     Performing Animation for border top color                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

Usage of CSS grid-auto-flow property

radhakrishna
Updated on 25-Jun-2020 13:18:24

116 Views

Use the grid-auto-flow property to include auto-placed items in the grid.ExampleYou can try to run the following code to implement the grid-auto-flow property with CSS −Live Demo                    .container {             display: grid;             grid-auto-columns: 50px;             grid-auto-flow: column;             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 whether the text of the element can be selected or not with CSS

varma
Updated on 25-Jun-2020 13:16:59

118 Views

Use the CSS user-select property to set whether the text of the element can be selected or not with CSS:ExampleLive Demo                    div {             user-select: none;          }                     This is demo heading       This is demo text. You won't be able to select it.    

Perform Animation on CSS font property

mkotla
Updated on 25-Jun-2020 13:16:21

186 Views

To implement animation on font property with CSS, you can try to run the following code:ExampleLive Demo                    p {             border: 2px solid black;             width: 400px;             height: 100px;             animation: myanim 5s infinite;          }          @keyframes myanim {             70% {                font: 35px arial, sans-serif;             }          }                     This is demo text    

Change CSS filter property with Animation

George John
Updated on 25-Jun-2020 13:13:26

329 Views

To implement animation on filter property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 600px;             height: 300px;             background-image: url('https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg');             border: 2px solid blue;             animation: myanim 3s infinite;             position: absolute;             column-rule: 10px inset orange;             column-count: 4;          }          @keyframes myanim {             20% {                filter:contrast(400%);             }          }                     Performing Animation on filter property          

Change CSS columns property with Animation

Sreemaha
Updated on 25-Jun-2020 13:12:09

158 Views

To implement animation on columns property with CSS, you can try to run the following code:ExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-rule: 10px inset orange; ... Read More

Change column-width property with CSS Animations

Ankith Reddy
Updated on 25-Jun-2020 13:11:35

394 Views

To implement animation on a column-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-rule: 10px inset ... Read More

Usage of rgba() CSS function

Giri Raju
Updated on 25-Jun-2020 13:11:01

349 Views

Use the CSS rgb() function to define color using the RGB Model.Use the CSS rgba() function to set RGB colors with opacity.You can try to run the following code to set color with rgba() function:ExampleLive Demo                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:rgb(0,0,255);             color: rgb(255,255,255);          }          p {             background-color:rgba(255,0,0,0.9);          }                     Red Background       Blue Background       This is demo text!    

Usage of CSS grid-auto-columns property

Arjun Thakur
Updated on 25-Jun-2020 13:10:22

98 Views

Use the grid-auto-columns property to set default size for columns.You can try to run the following code to implement the grid-auto-columns property with CSSExampleLive Demo                    .container {             display: grid;             grid-auto-columns: 100px;             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          

Advertisements