Scribd
Upload
16 views18 pages

Webdesign 10

Uploaded by

Shan boo
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
16 views18 pages

Webdesign 10

Uploaded by

Shan boo
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
You are on page 1/ 18

1

Web Design
Web Design

HTML & CSS :


design and build websites
h t t p : / / w w w. h t m l a n d c s s b o o k . c o m

S
2

S
Web Design

COLOR
3

Foreground Color
color

The color property allows you to specify


the color of text inside an element. You can
specify any color in CSS in one of three
Web Design

ways:

RGB VALUES
HEX CODES
COLOR NAMES

S
4

Foreground Color
color

RGB VALUES
These express colors in terms of how much
red, green and blue are used to make it up.
Web Design

For example: rgb(100,100,90)

HEX CODES
These are six-digit codes that represent the
amount of red, green and blue in a color,
preceded by a pound or hash # sign. For
example: #ee3e80

S
5

Foreground Color
color

COLOR NAMES
There are 147 predefined color names that
are recognized by browsers. For example:
Web Design

DarkCyan

http://www.147colors.com

http://www.colorname.org

S
6

Background Color
background-color

CSS treats each HTML element as if it appears


in a box, and the background-color property
sets the color of the background for that box.
Web Design

You can specify your choice of background


color in the same three ways you can specify
foreground colors.

If you don’t specify a background color, then


the background is transparent.

S
7

CSS3: Opacity
opa c i t y, rg ba

CSS3 introduces the opacity property which


allows you to specify the opacity of an
element and any of its child elements. The
Web Design

value is a number between 0.0 and 1.0 (so a


value of 0.5 is 50% opacity and 0.15 is 15%
opacity).

S
8

CSS3: Opacity
opa c i t y, rg ba

The CSS3 rgba property allows you to specify


a color, just like you would with an RGB value,
but adds a fourth value to indicate opacity.
Web Design

This value is known as an alpha value and is a


number between 0.0 and 1.0(so a value of 0.5
is 50% opacity and 0.15 is 15% opacity). The
rgba value will only affect the element on
which it is applied( not child elements).

S
9

CSS3: HSL & HSLA


hsl, hsla

The hsl color property has been introduced in


CSS3 as an alternative way to specify colors.
The value of the property starts with the
Web Design

letters hsl, followed by individual values inside


parentheses for:

HUE
SATURATION
LIGHTNESS
ALPHA

S
10

CSS3: HSL & HSLA


hsl, hsla

Hue
This is often represented as a color circle
where the angle represents the color
Web Design

( between 0 and 360 degrees).

S
11

CSS3: HSL & HSLA


hsl, hsla

Saturation
This is the amount of gray in a color. It is
represented as a percentage. 100% is full
Web Design

saturation and 0% is a shade of gray.

S
12

CSS3: HSL & HSLA


hsl, hsla

Lightness
This is the amount of white(lightness) or
black(darkness) in a color. Lightness is
Web Design

represented as a percentage. 0% lightness


is black, 100% lightness is white, and 50%
lightness is normal.

S
13

CSS3: HSL & HSLA


hsl, hsla

Alpha
This is expressed as a number between 0
and 1.0. For example, 0.5 represents 50%
Web Design

transparency, and 0.75 represents 75%


transparency.

S
14

Example

This example shows a pH scale to


demonstrate the different ways that colors
can be specified using CSS (using color
Web Design

names, hex codes, RGB, and HSL).

S
15

Example

This example shows a pH scale to


demonstrate the different ways that colors
can be specified using CSS(using color
Web Design

names, hex codes, RGB, and HSL).

S
16

TASK

Please use table and css to design a palette


web page shown on the right, you can set
colors with RGB, HEX, Color Names or HSL.
Web Design

S
S
17
Web Design
18
Web Design

Thank You！
谢谢！

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy