Scribd
Upload
25 views54 pages

Lesson 5 Css Gradient

Lesson 5 covers CSS gradients, including definitions, types, and applications. It outlines four types of gradients: linear, radial, conic, and repeating gradients, along with practical coding examples. The lesson also includes group activities and a project focused on applying gradient effects in web design.

Uploaded by

kyreoneangelotabujara
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
25 views54 pages

Lesson 5 Css Gradient

Lesson 5 covers CSS gradients, including definitions, types, and applications. It outlines four types of gradients: linear, radial, conic, and repeating gradients, along with practical coding examples. The lesson also includes group activities and a project focused on applying gradient effects in web design.

Uploaded by

kyreoneangelotabujara
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

LESSON 5 - CSS GRADIENT

LESSON 5
(CSS GRADIENT)

GRADIENT
LESSON 5 - CSS GRADIENT

OBJECTIVES

• 1. Define CSS Gradient.


• 2. Enumerate the 4 types of gradients.
• 3. Apply CSS gradient in Codepen.
LESSON 5 - CSS GRADIENT

• The use of CSS


gradients enables
CSS smooth transitions to
Gradient be displayed between
two or more colors.
GROUP
ACTIVITY
GROUP 1

HOW DO CSS GRADIENTS CREATE SMOOTH


COLOR TRANSITIONS, AND WHAT ARE THE
BASIC TYPES OF GRADIENTS AVAILABLE IN
CSS?
GROUP 2

IN YOUR OPINION, CAN USING GRADIENTS


ALONE MAKE A WEBSITE VISUALLY
APPEALING, OR ARE ADDITIONAL DESIGN
ELEMENTS NECESSARY? EXPLAIN WHY.
GROUP 3

WHAT ARE THE MAIN ADVANTAGES OF USING


CSS GRADIENTS INSTEAD OF IMAGES FOR
BACKGROUNDS ON A WEBSITE?
GROUP 4

WHAT ARE SOME CREATIVE WAYS CSS


GRADIENTS CAN BE USED BEYOND JUST
BACKGROUNDS? PROVIDE ONE EXAMPLE AND
EXPLAIN ITS IMPACT ON USER EXPERIENCE.
GROUP 5

WHY DO YOU THINK CSS GRADIENTS ARE


POPULAR IN MODERN WEB DESIGN TRENDS?
PROVIDE ONE REASON THAT MAKES
GRADIENTS APPEALING TODAY.
LESSON 5 - CSS GRADIENT

FOUR TYPES OF GRADIENTS

• Linear Gradients (goes


down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)
• Repeating Gradients (create a pattern by
repeating the gradient effect at regular
intervals.
LESSON 5 - CSS GRADIENT

• To make a linear gradient, you


must choose at least two
different colors. Color stops
Linear are the colors between which
Gradient you want to make a smooth
change. Along with the gradient
effect, you can also set a
starting point and a direction
(or an angle).
LESSON 5 - CSS GRADIENT

1. Direction: You can specify the direction


of the gradient line (e.g., left to right,
top to bottom).
• Direction Keywords:
• Horizontal: Use to right to create a
Linear gradient that transitions from left to
Gradient right.
• Vertical: Use to bottom for a top-to-
bottom gradient, which is the default.
• Diagonal: Keywords like to bottom right
or to top left create diagonal
gradients.
[Link]: linear -gradient (to
bottom, pink, black);

2. background: linear -gradient(to


right, color1, color2);

3. background: linear -gradient(to


bottom right, color1, color2);
<html>
<head>
<style>
#CMSHS {
height: 200px;
background -image: linear -gradient (red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>


<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="CMSHS"></div>

</body>
</html>
LESSON 5 - CSS GRADIENT

2. Angle: Alternatively, an
angle can be set to control
Linear the gradient direction.
Gradient
LESSON 5 - CSS GRADIENT

• If you want more control


over the direction of the
gradient, you can define
Using
an angle, instead of the
Angles
predefined directions (to
bottom, to top, to right,
to left, to bottom right).
LESSON 5 - CSS GRADIENT

• A value of
⚬ 0deg is equivalent to
￭ "to top".
Using • A value of
⚬ 90deg is equivalent to
Angles
￭ "to right".
• A value of
⚬ 180deg is equivalent to
￭ "to bottom".
<html>
<head>
<style>
#cmshs1 {
height: 100px;
background -image: linear -gradient(0deg, red, yellow);
}

#cmshs2 {
height: 100px;
background -image: linear -gradient(90deg, red, yellow);
}
LESSON 5 - CSS GRADIENT

• Color Stops: Points


where the color changes.
Linear You can specify the
Gradient colors and where these
transitions happen.
LESSON 5 - CSS GRADIENT

Linear
Gradient
LESSON 5 - CSS GRADIENT

Linear Gradient:
1. Create a linear gradient that
goes from right to left.
ACTIVITY
2. Use three colors: pink on the
#1
left, red in the middle, and blue
on the right.
3. Code this in CodePen.
LESSON 5 - CSS GRADIENT

• A radial gradient is
defined by its center.
Radial • To create a radial
Gradient gradient you must also
define at least two
color stops.
<html>
<head>
<style>
#cmshs1 {
height: 150px;
width: 200px;
background -image: radial -gradient (red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient</h1>

<div id="cmshs"></div>

</body>
</html>
<html>
<head>
<style>
#cmshs1 {
height: 150px;
width: 200px;
background -image: radial -gradient(red, yellow, green);
}

#cmshs2 {
height: 150px;
width: 200px;
background -image: radial -gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>


<div id="cmshs1"></div>

<h2><strong>Circle:</strong></h2>
<div id="cmshs2"></div>

</body>
</html>
LESSON 5 - CSS GRADIENT

Radial Gradient:
1. Create a radial gradient starting
from the center of a circle.
ACTIVITY
2. Start with yellow in the center,
#2
blend to orange, and end with
purple at the edges.
LESSON 5 - CSS GRADIENT

• A conic gradient is a
gradient with color
Conic
transitions rotated
Gradient around a center point.
• To create a conic
gradient you must define
at least two colors.
<html>
<head>
<style>
#cmshs1 {
height: 200px;
width: 200px;
background -image: conic -gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Conic Gradient - Three Colors</h1>

<div id="cmshs1"></div>

</body>
</html>
LESSON 5 - CSS GRADIENT

• Just add border-


radius: 50% to make
Create the conic gradient
Pie Charts
look like a pie.
<html>
<head>
<style>
#cmshs1 {
height: 200px;
width: 200px;
background -image: conic -gradient(red, yellow, green, blue, black);
border -radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="cmshs1"></div>
</body>
</html>
LESSON 5 - CSS GRADIENT

Conic Gradient:
[Link] a conic gradient that
begins at the top and spins around
ACTIVITY
a central point.
#3
[Link] at least 5 to 6 colors of
your choice to include in the
gradient.
[Link] an angle for this activity.
LESSON 5 - CSS GRADIENT

• The repeating-linear-
gradient() function
Repeating is used to repeat
Linear
linear gradients.
Gradient
<html>
<head>
<style>
#cmshs1 {
height: 200px;
background -image: repeating -linear -gradient(red, yellow
10%, green 20%);
}

#cmshs2 {
height: 200px;
background -image: repeating -linear -gradient
(45deg,red,yellow 7%,green 10%);
}
LESSON 5 - CSS GRADIENT

Repeating Linear Gradient:


[Link] a repeating linear
gradient at a 45-degree angle.
ACTIVITY
[Link] 4 colors, and for each
#4
color, define both a starting and
ending percentage (e.g., 5%, 10%)
to control the width of each stripe.
LESSON 5 - CSS GRADIENT

• The repeating-linear-
gradient() function
Repeating is used to repeat
Radial
radial gradients.
Gradient
<html>
<head>
<style>
#cmshs1 {
height: 150px;
width: 200px;
background -image: repeating -radial -gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

<div id="cmshs1"></div>

</body>
</html>
LESSON 5 - CSS GRADIENT

Repeating Radial Gradient:


[Link] a repeating radial
gradient that starts from the
ACTIVITY
center of a circle and expands
#5
outward.
[Link] 4 colors and specify
intervals for each color (e.g., 10%,
20%, etc.) to form distinct, layered
rings.
LESSON 5 - CSS GRADIENT

• The repeating-conic-
gradient() function
Repeating is used to repeat
Conic
conic gradients.
Gradient
<html>
<head>
<style>
#cmshs1 {
height: 200px;
width: 200px;
background -image: repeating -conic -gradient(red 10%, yellow 20%);
border -radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient</h1>

<div id="cmshs1"></div>

</body>
</html>
<html>
<head>
<style>
#cmshs1 {
height: 200px;
width: 200px;
background -image: repeating -conic -gradient(red 0deg 10deg, yellow
10deg 20deg, blue 20deg 30deg);
border -radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color -starts and -stops</h1>

<div id="cmshs1"></div>

</body>
</html>
LESSON 5 - CSS GRADIENT

Repeating Conic Gradient:


[Link] a repeating conic gradient that
begins at the top and radiates around the
ACTIVITY center in a circular pattern.
[Link] 7 colors, arranging each to cover
#6
a specific angle range (e.g., 0deg to
20deg, 20deg to 40deg, etc.), creating a
colorful, rainbow-like effect.
[Link] the gradient smoothly repeats to
give the appearance of a continuous,
multi-colored wheel.
LESSON 5 - CSS GRADIENT

• What are the four


types of
gradients?
LESSON 5 - CSS GRADIENT

• What is a conic
gradient?
LESSON 5 - CSS GRADIENT

• TEXT
GRADIENT
LESSON 5 - CSS GRADIENT

TEXT
• Vendor
Prefix
GRADIENT
LESSON 5 - CSS GRADIENT

- It acts as a “bridge” or
connection between a
TEXT browser and a CSS
GRADIENT
property that might not
yet be fully standardized
across all browsers.
LESSON 5 - CSS GRADIENT

The -webkit- prefix in CSS is


a vendor prefix used
- WEBKIT - specifically for properties
and features that are
supported only in WebKit-
based browsers.
LESSON 5 - CSS GRADIENT

• Create a short tagline


for a company and apply
ACTIVITY
a gradient effect that
(TEXT
GRADIENT) matches the theme of
the company.
LESSON 5 - CSS GRADIENT

• Relevance of tagline – 40%


• Gradient Application – 25%
RUBRICS
• Color Choice – 20%
• Creativity – 10%
• Technical Execution – 5%
• Total: 100%

You might also like