- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 1566 Articles for CSS
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
379 Views
The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS property on which the effect is applied and the duration as well. Let’s say we will convert a shape to oval on mouse ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
1K+ Views
For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div To begin with, set a parent div − Set the transition The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds − .container div { width: 300px; ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
48 Views
2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. The following are some of the 2D transform functions − Sr.No. Value & Description 1 matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values 2 translate(x, y)Used to transforms the element along with x-axis and y-axis 3 skew()skew an element along the X-axis and Y-axis 4 skewX()Skew an element along the X-axis 5 skewY()Skew an element along the Y-axis 6 scale(x, y)Used to change the width ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
143 Views
To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property respectively. Let us understand them one by one with examples. Text Shadow To add shadow to text, use the text-shadow property. Let us see the syntax − text-shadow: value The above value can be the following − h-shadow− Set the position of the horizontal shadow. v-shadow− Set the position of the vertical shadow. blur-radius− Set the blur radius. color− Set the shadow color of the shadow. Create a text shadow Let us see an example to create a text shadow − ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
3K+ Views
Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops. At least two color stops should be mentioned. Let us first see the syntax. Syntax The following is the syntax to create Linear Gradients − background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); Above, the dir is the direction i.e., from − Left to Right Right to Left Diagonal Top to Bottom Linear Gradient Beginning From Right to Left The following is the code to set transparent linear gradient ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
233 Views
For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction − Value 0deg is the "to top" direction Value 90deg is the "to right" direction Value of 180deg is the "to bottom" direction The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); Set the angle of the linear gradient The following is the code for setting the direction of linear gradients using angles in CSS. .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
167 Views
Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center. Linear-Gradient The linear gradient is set using the background-image property. The angle is set as the first parameter. Here is the example − body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
285 Views
Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules. The [attribute] Selector The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled − a[target] { background-color: red; color: white; } Example Let us see the example − a[target] { background-color: red; ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
4K+ Views
The Fallback color is used to specify the color for a situation when the browser doesn’t support RGBA colors. Some browsers that don’t support fallback colors are Opera. Specify a solid color before a RGBA color so the solid color can still work if the browser doesn’t support the RGBA colors. Set the Fallback Color The following is the code for declaring a fallback color in CSS − background-color: purple; /*fallback color*/ Example Let us see an example − body{ ... Read More
![AmitDiwan](https://www.tutorialspoint.com/assets/profiles/123055/profile/60_187394-1565938756.jpg)
397 Views
Image sprite is used to reduce the number of http requests that makes our site’s load time faster.Following is the code for creating a navigation menu using CSS image sprite −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; } span { width: 200px; height: 300px; background-color: black; } nav { background-color: black; height: 50px; padding-top: 15px; padding-left: 10px; } nav a { font-size: 20px; color: white; text-decoration: none; margin-right: 10px; } .home { width: 32px; height: 32px; ... Read More