basics of web design chapter 6 more css basics key concepts

Basics of Web Design

Chapter 6

More CSS Basics

Key Concepts

Learning Outcomes

Apply shadows with CSS3

Configure rounded corners with CSS3

Configure background images with CSS3

Configure opacity, RGBA color, HSLA color, and gradients with CSS3

CSS3 Rounded Corners

Before CSS3, if web designers wanted boxes with rounded corners, they had to use images.

CSS3 introduced a new property, border-radius, that allows web designers to have rounded borders without using images.

border-*-radius Properties

The property value contains one or two length/percentage values. These values define the radii of a quarter ellipse that defines the shape of the corner of the border.

The first value is the horizontal radius while the second value is the vertical radius.

If the second value is omitted, its value is the same as the first value.

If either value is 0, then the corner is square, not rounded.

border-top-left-radius Property

The border-top-left-radius property defines the shape of the border of the top-left corner and allows us to have rounded borders.

Red is the horizontal radiusBlue is the vertical radius

border-top-right-radius Property

The border-top-right-radius property defines the shape of the border of the top-right corner and allows us to have rounded borders.

Red is the horizontal radiusBlue is the vertical radius

border-top-right-radius: 50px 100px;

border-top-right-radius: 100px 50px;

border-top-right-radius: 50px 50px;

border-top-right-radius: 50px;

border-bottom-left-radius Property

The border-bottom-left-radius property defines the shape of the border of the bottom-left corner and allows us to have rounded borders.

Red is the horizontal radiusBlue is the vertical radius

border-bottom-left-radius: 50px 100px;

border-bottom-left-radius: 100px 50px;

border-bottom-left-radius: 50px 50px;

border-bottom-left-radius: 50px;

border-bottom-right-radius Property

The border-bottom-right-radius property defines the shape of the border of the bottom-right corner and allows us to have rounded borders.

Red is the horizontal radiusBlue is the vertical radius

border-bottom-right-radius: 50px 100px;

border-bottom-right-radius: 100px 50px;

border-bottom-right-radius: 50px 50px;

border-bottom-right-radius: 50px;

border-radius Property

The border-radius property is used to add rounded borders to elements. It is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.

Example:

div {border: 2px solid #FF0000;border-radius: 25px 20px 15px 30px / 30px

15px 20px 25px;}

top-left

top-right

bottom-right

bottom-left

top-left

top-right

bottom-right

bottom-left

If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

box-shadow Property

The box-shadow property attaches one or more drop-shadows to the box.

Required values are the position of the horizontal shadow and the position of the vertical shadow.

Optional values include the blur distance, the size of the shadow (spread), the color of the shadow, and whether the shadow is outset (default) or inset.

You can set multiple shadows on a box with a comma separated list

Example:

div {    box-shadow: 10px 10px 5px 10px #888888;}

text-shadow Property

The text-shadow property adds shadow to your text.

You can have multiple shadows applied to a single piece of text using a comma separated list.

Required values are the position of the horizontal shadow and the position of the vertical shadow.

Optional values include the blur radius and the color of the shadow.

Example:

div { text-shadow: 0px 0px 4px #FFF, 0px -5px 4px #FF3, 2px -10px 6px #FD3, -2px -15px 11px #F80, 2px -25px 18px #F20; }

text-shadow Property

Examples of what can be accomplished with the text-shadow property

background-clip Property

The background-clip property specifies the painting area of the background. It confines the display of the background image.

Values are:

border-box (default)

padding-box

content-box

background-origin Property

The background-origin property specifies what the background-position property should be relative to.

Values are:

border-box

padding-box (default)

content-box

background-size Property

The background-size property specifies the size of the background image. It can be used to resize or scale the background image.

Example:

div {    background: url(img_flwr.gif);    background-size: 35%;    background-repeat: no-repeat;}

Original image

Resized image

opacity Property

The opacity property sets the opacity level for an element.

1 is completely opaque (default), 0.5 is 50% see-through, and 0 is completely transparent.

Example:

h1{background-color: #FFFFFF;opacity: 0.6;

}

Understanding Color

Understanding Color

The colors on your monitor are made by mixing red, green, and blue.

We’ve been using hexadecimal values to represent the red, green, and blue values to create color.

A select group of colors also have HTML color names

We can also specify color using RGB(a) and HSL(a)

RGB Color

RGB color requires three values:

Red color

Green color

Blue color

The values for red, green, and blue must be decimal values from 0 to 255.

Example:

h1 { color: rgb(102,205,170); }

RGB VALUES

rgb(102,205,170)

RGBA Color

RGBA color is an extension of the RGB color values by adding in an alpha channel.

The alpha channel specifies the opacity of the color.

RGBA color requires four values: Red color, Green color, Blue color, and Alpha (transparency)

The values for red, green and blue must be decimal values from 0 to 255.

The alpha value must be a number between 0 (transparent) and 1 (opaque)

Example:h1 { color: #ffffff;

color: rgba(255, 255, 255, 0.7); }

HSL Color

Hue is a degree on the color wheel (from 0 to 360) 0 (or 360) is red, 120 is green, 240 is blue

Saturation is a percentage value 0% means a shade of gray and 100% is the full color

Lightness is also a percentage value 0% is black and 100% is white.

LIGHTNESSSATURATIONHUE

HSL Color

Using the HSL color, you specify the degree of the hue, the percentage of saturation, and the percentage of lightness.

Example:

h1 {background-color: hsl(120, 100%, 50%);}

THIS IS MY HEADING

HSLA Color

HSLA color is an extension of the HSL color values by adding in an alpha channel.

The alpha channel specifies the opacity of the color.

HSLA color requires four values: degree of the hue, percentage of saturation, percentage of lightness, and alpha (transparency)

The value for hue must be a value between 0 and 360 while the values for saturation and lightness must be a percent between 0% and 100%.

The alpha value must be a number between 0 (transparent) and 1 (opaque)

Example:h1 {background-color: hsla(120, 100%, 100%, 0.7);} 

CSS3 Gradients

Gradient: a smooth blending of shades from one color to another.

Before CSS3, you would have to use images to have gradients. Now we can use CSS.

Use the background-image property

linear-gradient()

radial-gradient()

linear-gradient

Use linear-gradient as a value of the background property.

At a minimum, you must declare two values, the starting color and the ending color

Example:

#grad {background: linear-gradient(#FF0000, #0000FF);}

linear-gradient

You can also specify the direction you want the gradient to go in To right

To left

To top

To bottom

You can also specify an angle to have more control over the direction of the gradient (45deg, 90deg, 180deg)

Example: #grad {background: linear-gradient(to left, #FF0000, #0000FF);}

#grad {background: linear-gradient(45deg, #FF0000, #0000FF);}

To top left

To top right

To bottom left

To bottom right

linear-gradient

You can also set multiple gradient stops in a linear gradient

For example, if you want a rainbow:

#grad {background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

radial-gradient

A radial-gradient is defined by its center.

You must define at least two color stops.

By default, a radial gradient shape is an ellipse, size is farthest corner, and position is center.

Example:

#grad {background: radial-gradient(red, green, blue);}

radial-gradient

You can set the shape and the value is either circle or ellipse (default).

Example:

#grad {background: radial-gradient(circle, red, yellow, green);}

You can also set the size of the gradient using the following values:

closest-side

farthest-side

closest-corner

farthest-corner

Example:

#grad {background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);}

Summary

This chapter expanded your CSS skillset

You configured text with CSS properties

You were introduced to the box model.

You configured CSS properties related to the box model, such as margin, border, padding, and width

You centered a web page using CSS.

You explored new CSS3 properties including:

border-radius

box-shadow

text-shadow

opacity

Coding Examples

Questions?

Homework