Scribd
Upload
6 views3 pages

CSS Notes - Effects

This document provides an overview of CSS features for Class IX, including gradients, shadows, rounded corners, transitions, and animations. It explains the types of gradients, how to apply box and text shadows, and the use of border-radius for rounded corners. Additionally, it covers the basics of CSS transitions and animations with examples for each feature.

Uploaded by

priya.saner
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

CSS Notes - Effects

This document provides an overview of CSS features for Class IX, including gradients, shadows, rounded corners, transitions, and animations. It explains the types of gradients, how to apply box and text shadows, and the use of border-radius for rounded corners. Additionally, it covers the basics of CSS transitions and animations with examples for each feature.

Uploaded by

priya.saner
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS Notes for Class IX

Gradients, Shadows, Rounded Corners, Transitions & Animations


Gradients in CSS

What is a Gradient?
A gradient is a smooth change from one color to another.
It is used instead of images to make backgrounds attractive.

Types of Gradients
1. Linear Gradient – Colors change in a straight line
2. Radial Gradient – Colors spread from the center outward

Linear Gradient Syntax


background: linear-gradient(to right, red, yellow);

Example
<div class="box"></div>

<style>
.box {
width: 200px;
height: 100px;
background: linear-gradient(to right, blue, lightblue);
}
</style>

Shadows in CSS

Box Shadow (box-shadow)


Adds shadow to boxes (divs, buttons, cards)

Syntax
box-shadow: x-offset y-offset blur color;

Example
div {
box-shadow: 5px 5px 10px gray;
}
Text Shadow (text-shadow)
Adds shadow to text

Syntax
text-shadow: x-offset y-offset blur color;

Example
h1 {
text-shadow: 2px 2px 5px black;
}

Rounded Corners (border-radius)

What is border-radius?
It is used to make rounded corners for boxes and images.

Example
div {
border-radius: 20px;
}

Circle Shape
border-radius: 50%;

CSS Transitions

What is a Transition?
A transition makes a change smooth instead of instant.

Example (Hover Effect)


button {
background-color: blue;
color: white;
transition: background-color 0.5s;
}
button:hover {
background-color: green;
}

CSS Animations

What is Animation?
Animation allows elements to move or change automatically.

Steps to Create Animation


1. Use @keyframes
2. Apply animation to an element

Example
@keyframes moveBox {
from { left: 0px; }
to { left: 200px; }
}

.box {
position: relative;
animation: moveBox 2s infinite;
}

You might also like