Ma.

Technical Vocational
Livelihood
QUARTER

2 Computer Programming

Computer Programming (ICT) – Grade 11

TECHNICAL VOCATIONAL LIVELIHOOD
Quarter 2 – Module 1 CSS Background, Color, Gradients and shadow First
Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer: Jenessy Joy T. Pinga
Editors: Ma. Lerma Cantanero
Reviewer: Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation Division

Education Program Supervisor

Wilma Q. Del Rosario, LRMDS
Dr. Libranda L. Agon, Ed. D., EPP/TLE

Printed in the Philippines by ________________________

Department of Education – Division of Pasig City

Office Address: Caruncho Avenue, San Nicolas, Pasig City

Telefax: 641-88-85 / 682-2819
E-mail Address: [email protected]
 Computer
Programming

Quarter 2
Self Learning Module 1
CSS Background, Color,
Gradients and Shadow

Writer: Jenessy Joy T. Pinga

Editor: Ma. Lerma Cantanero
Reviewer/Validator: Rowena O. Dimagiba
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Background,
Color, Gradients and Shadow!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module on CSS Background,
Color, Gradients and Shadow!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATION

The students should be able to:

• understand CSS background, color, gradients and shadow in

designing webpage.
• perform and apply the use of CSS background, color, gradients and
shadow when designing webpage.
• cite the importance of background, color, gradients and shadow in
designing webpage.

PRE–TEST

Instruction: Select the letter that corresponds to the correct answer.

1. The image below shows a ____________.

A. Repeating a linear-gradient
B. Radial Gradient - Differently Spaced Color Stops
C. Repeating a radial-gradient
D. Linear Gradient - Left to Right

2. The image below shows a ____________.

A. Repeating a linear-gradient
B. Radial Gradient - Differently Spaced Color Stops
C. Repeating a radial-gradient
D. Linear Gradient - Left to Right

3. CSS background property that has an example value of no-repeat.

A. background-image
B. background-position
C. background-repeat
D. background-status
 4. CSS background property that has an example value of right bottom.
A. background-image
B. background-position
C. background-repeat
D. background-status

5. CSS background property that has an example value of

url(image1.png).
A. background-image
B. background-position
C. background-repeat
D. background-status

RECAP
Quarter 1 Module 18 defined opacity, differentiated horizontal and
vertical navigation bar and discussed how to make a tooltip. In your own
words describe the following terms:
• CSS Opacity
• CSS Navigation Bar
• CSS Tooltip

LESSON

CSS Backgrounds
CSS backgrounds allow the user to add multiple background images to one
element and it allow greater control of the background element. Take note that not
all browser can support CSS background and its properties.

CSS3 Multiple Backgrounds

Using background-image property we can add multiple images in one

element. It can be done in two way using either the individual background
properties or the background shorthand property.

Individual background properties

#multiple {
background-image: url(image1.png), url(image2.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 5px;
 }
Shorthand property
#multiple {
background: url(image1.png) right bottom no-repeat, url(image2.png) left
top repeat;
}
Example:

CSS3 Background Size

Output:

Background-size property allows you to change the size of background

images. It can be specified in lengths, percentages, or by using one of the two
keywords such as contain and cover.

Contain resize the background image, both its width and its height must fit
inside the content area, depending on the proportions of the background image and
the background positioning area.

Cover resize the background image so that the content area is completely
covered by the background image, both its width and height are equal to or exceed
the content area.
 Example:

Output:

Full Size Background Image

This will cover the entire browser window. You just need HTML element to be
your selector.
Example: (try it with your PC to see what happens)
html {
background: url(image1.png) no-repeat center fixed;
 background-size: cover;
}
Background-origin Property
Background origin property- defines where the background image is
positioned. Example: value are border-box and content box
Example: (try it with your PC to see what happens)
#example {
border: 5px solid black;
padding: 20px;
background: url(image1.png);
background-repeat: no-repeat;
background-origin: border-box;
}
Background-clip Property
Background-clip property defines the painting area of the background.
Three different values:
• border-box - the background is painted to the outside edge of the border.
• padding-box - the background is painted to the outside edge of the
padding
• content-box - the background is painted within the content box
Example: (try it with your PC to see what happens)
#example {
border: 5px dotted black;
padding: 20px;
background: yellow;
background-clip: content-box; }

CSS Color
CSS supports color names, hexadecimal and RGB colors.
In addition, CSS also introduces:
• RGBA colors - rgba(red, green, blue, alpha)
• HSL colors - hsl(hue, saturation, lightness)
• HSLA colors - hsla(hue, saturation, lightness, alpha)
• Opacity – transparent to opaque
Example: (try changing the values with your PC to see what happens)
rgba(255, 0, 0, 0.2);
hsl(0, 100%, 30%);
hsla(0, 100%, 30%, 0.3);
rgb(255, 0, 0);opacity:0.2;

CSS Gradients
Gradients allows us to display transitions between two or more specified
colors.
 Two types of gradients:
• Linear Gradients (to bottom, to top, to right, to left, to bottom right, etc.)
• Radial Gradients (defined by their center)

Linear Gradients

In creating a linear gradient, you must define at least two-color stops. Color
stops are the colors you want to render for the smooth transitions.
Syntax:
background: linear-gradient (direction, color-stop1, color-stop2, ...,);
Example: (try changing the values with your PC to see what happens)
# gradient {
background: linear-gradient (to right, red , yellow); }
Output:

Using Angles
Syntax:
background: linear-gradient (angle, color-stop1, color-stop2);
Example: (try changing the values with your PC to see what happens)
# gradient {
background: linear-gradient (-90deg, red, yellow); }
Output:

Repeating a linear-gradient
Repeating-linear-gradient() function is used to repeat linear gradients.
Example: (try changing the values with your PC to see what happens)
# gradient {
background: repeating-linear-gradient(red, yellow 10%, green 20%);}
Output:

CSS3 Radial Gradients

Radial gradient defines by its center. In creating a linear gradient, you must
define at least two-color stops.
Syntax:
background: radial-gradient(shape size at position, start-color, ..., last-color);
Example: (try changing the values with your PC to see what happens)
# gradient {
background: radial-gradient(red, yellow, green);}
Output:

Radial Gradient - Differently Spaced Color Stops

Example: (try changing the values with your PC to see what happens)
# gradient {
background: radial-gradient(red 5%, yellow 15%, green 60%);}

CSS Shadow Effects

CSS shadow effects has the following properties:
• text-shadow
• box-shadow

text-shadow

Specifying the horizontal shadow and the vertical shadow.

Example: (to see what happens try it with your PC)
h1 {text-shadow: 2px 2px;}

Adding color to the shadow.

Example: (to see what happens try it with your PC)
h1 {text-shadow: 2px 2px yellow;}

Adding blur effect to the shadow.

Example: (to see what happens try it with your PC)
h1 {text-shadow: 2px 2px 5px yellow;}

Adding more than one shadow to the text.

Example: (to see what happens try it with your PC)
h1 {text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;}

box-shadow

Specifying the horizontal shadow and the vertical shadow.

Example: (to see what happens try it with your PC)
div {box-shadow: 5px 5px;}

Adding color to the shadow.

Example: (to see what happens try it with your PC)
div {box -shadow: 5px 5px yellow;}

Adding blur effect to the shadow.

Example: (to see what happens try it with your PC)
div {box-shadow: 5px 5px 3px yellow;}
 ACTIVITIES

Create a webpage about your own understanding of the lesson and apply
the use of CSS background, gradients, color and shadow.

Rubrics:

Needs work Developing Meets Standard Score

Information is not Information is The content has
always clear or clear and correct. accurate and
correct. The The theme or useful information.
theme or main main idea of the The theme or main
idea of the Web Web page is more idea of the Web
Content page is more or or less clear and page is clear and
(Good content less clear but related to the related to the
should be relevant) does not relate to purpose or theme purpose or theme
the purpose or of the project of the project.
theme of the
project.
15 20 25
Background, text Background, text Background, text
format and color format and color format, and color
usage are usage are usage are carefully
randomly chosen somewhat chosen to produce
Visual Design with few consistent with a consistent screen
(Appearance) consistent little layout for all your
elements inappropriate pages
throughout. variation.
15 20 25
Site is difficult to Site is sometimes Readers can get
Structure and
navigate. difficult to around your
Navigation
navigate. website with ease.
(Good navigation
gets you where you
want to go quickly) 15 20 25
Innovation Website has no Some of the page Website has a
(The idea is new, or unique style. has unique style. unique style.
merely iterating on
a previous idea) 15 20 25

Total /100

*Answer the Worksheet number 1 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.
 WRAP–UP

Instructions: Describe the following below based on how you understand

the lesson.

• background-clip
• background-image
• background-origin
• background-size
• Linear Gradients
• Radial Gradients
• Box-shadow
• Text-shadow

VALUING

Instructions: Read and answer the following questions carefully in two to

three sentences each number.

1. What do you think is the importance of using CSS background, color,

gradients and shadow?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. How will you use the knowledge you acquired in this module?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POST TEST
Instructions: Select the letter that corresponds to the correct answer.

1. ____________ resize the background image, both its width and its height
must fit inside the content area,
A. contain
B. cover
C. repeat
D. no-repeat
 2. ______________resize the background image so that the content area is
completely covered by the background image
A. contain
B. cover
C. repeat
D. no-repeat

3. This specifies where the background images are positioned

A. background-image
B. background-origin
C. background-repeat
D. background-clip

4. This can add one or more shadows to an element.

A. box-shadow
B. text-shadow
C. element-shadow
D. font-shadow

5. RGBA stands for _________________.

A. red, green, blue, access
B. red, green, blue, alpha
C. red, green, blue, aim
D. red, green, blue, aqua

KEY TO CORRECTION
A 5. B 5.
B 4. A 4.
C 3. B 3.
B 2. B 2.
D 1. A 1.

Pre-test: Post-test:

REFERENCES
• Accessed August 26, 2020 11:30Am https://www.w3schools.com
• Accessed August 26, 2020 12:00nn https://www.tutorialrepublic.com