Front End Technology Articles - Page 479 of 652

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.    

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

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.          

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                    

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!    

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          

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.                

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    

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

To display columns and rows using named CSS, use the grid-area property, with the grid-template-areas propertyExampleLive Demo                    .container {             display: grid;             background-color: green;             grid-template-areas: 'demo demo . . .' 'demo demo . . .';             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: demo;          }                     Game Board                1          2          3          4          5          6