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 radius Blue 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 radius Blue 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 radius Blue 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 radius Blue 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-lefttop-rightbottom- right bottom- left top-lefttop-rightbottom- 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

 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. LIGHTNESSSATURATION HUE

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