Found 1594 Articles for CSS

How to preserve the readability when font fallback occurs with CSS

karthikeya Boyini
Updated on 25-Jun-2020 09:36:34

125 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 propertyExampleLive 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.    

Perform Animation on CSS border-bottom-color property

Samual Sam
Updated on 25-Jun-2020 09:35:50

112 Views

To implement animation on the border-bottom-color property with CSS, you can try to run the following code ExampleLive Demo    div {       width: 500px;       height: 400px;       background: yellow;       border: 10px solid yellow;       background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');       animation: myanim 3s infinite;       background-position: bottom left;       background-size: 50px;    }    @keyframes myanim {       20% {          background-color: maroon;          background-position: bottom right;          background-size: 90px;          border-bottom-color: green;       }    } Performing Animation for bottom border color

Usage of radial-gradient() CSS function

George John
Updated on 25-Jun-2020 09:26:23

107 Views

Set a radial gradient as the background image, with radial-gradient() CSS function. You can try to run the following code to implement linear-gradient() function in CSSExampleLive Demo                    #demo {             height: 200px;             background: radial-gradient(green, orange, maroon);          }                     Setting background as radial gradient.          

Animate CSS border-top property

Lakshmi Srinivas
Updated on 25-Jun-2020 09:30:08

228 Views

To implement animation on the border-top property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 1px 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-right-color: red;                border-right-width: 25px;                border-spacing: 50px;                border-top: 125px solid red;             }          }                     Performing Animation for top border                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

Control how letters are spaced in CSS

Chandu yadav
Updated on 25-Jun-2020 09:25:34

112 Views

Use the font-kerning property to control how letters placed on a web page. You can try to run the following code to implement the font-kerning propertyExampleLive Demo                    #demo {             font-kerning: normal;          }                     This is demo text.    

Define colors using the Red-Green-Blue-Alpha model (RGBA) with CSS

George John
Updated on 04-Jul-2020 06:59:05

195 Views

Use the CSS rgb() function to define color using the RGB Model.Use the CSS rgba() function to set RGB colors with opacity.ExampleYou can try to run the following code to set the color with rgba() functionLive 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!    

Return the value of an attribute of the selected element using CSS

Arjun Thakur
Updated on 04-Jul-2020 07:03:06

283 Views

The attr() CSS function returns the value of an attribute of the selected element using CSSExampleYou can try to run the following code to implement the attr() function in CSSLive Demo                    a:before {content: " (" attr(href) ")";}                     Information Resource                Resource:Welcome to Qries          

Usage of var() CSS function

karthikeya Boyini
Updated on 04-Jul-2020 07:03:47

99 Views

The var() function in CSS is used to add custom property values to your web page. Set a custom name of the property and set value for it.ExampleYou can try to run the following code to implement var() functionLive Demo                    :root {             --my-bg-color: blue;             --my-color: white;          }          #demo {             background-color: var(--my-bg-color);             color: var(--my-color);          }                     Heading One                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.                

Perform Animation on CSS font-size property

Samual Sam
Updated on 25-Jun-2020 09:00:59

956 Views

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

Specify the size of the rows in a CSS grid layout

George John
Updated on 25-Jun-2020 09:00:09

118 Views

Use the grid-template-rows property to set the number of rows in a grid layoutExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-rows: auto auto;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }          .ele1 {             grid-row-start: 1;             grid-row-end: 6;          }                     Game Board                1          2          3          4          5          6          

Advertisements