
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1594 Articles for CSS

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.

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

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.

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

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!

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

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.

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

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