1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 14: Enhancements and Effects with CSS3

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Use polyfills for progressive enhancement. Implement vendor prefixes. Round the corners of elements. Create a circle using border-radius. Add drop shadow to an element’s text. Create an inset shadow. Apply multiple shadows to an element. Use gradient backgrounds. Set the opacity of elements.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Enhancements and Effects with CSS3 Many new CSS3 properties make it possible to create rounded corners, gradients, and drop shadows, as well as adjust transparency with just CSS. –Webpages use less markup and fewer images. –These pages download and display faster, especially on less powerful devices like smartphones.

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Browser Compatibility This table illustrates when browser support was first introduced for each CSS property.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Progressive Enhancement Progressive enhancement emphasizes creating content and functionality accessible to all users at basic level, regardless of web browser, while providing more capable browsers an enhanced experience. It’s acceptable for websites to look and behave differently in different web browsers as long as the content is accessible.

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Dribbble Site in Modern and Older Browsers

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Polyfills for Non- Supporting Browsers Polyfills (Shims) support HTML5 APIs and CSS3 properties in less-capable browsers. –Typically implemented using JavaScript. –Incurs a performance penalty. JavaScript is slower in less- capable web browsers, particularly older versions of IE.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Understanding Vendor Prefixes Vendor prefixes allows each browser to introduce its own support for unfinished CSS properties without conflicting with final specs or with other browsers. Each major browsers has own prefix: –-webkit- (Webkit/Safari/Chrome) –-moz- (Firefox) – -ms- (Internet Explorer) –-o- (Opera) –-khtml- (Konqueror)

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE CSS3 Generator and CSS3, Please!

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Rounding the Corners of Elements Use CSS3 to round corners of most elements, including form elements, images, and even paragraphs of text, without extra markup or images. To round all corners of an element equally: –Optionally, type -webkit-border-radius: r, where r is the radius value of the corners, expressed as a length (with units). –Type border-radius: r, where r is the same value as in step 1. This is the standard shorthand property syntax.

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Round One Corner of an Element To round the top-left corner: –Optionally, type -webkit-border-top-left-radius: r r is radius value of top-left corner, expressed as length (units). –Type border-top-left-radius: r r is the same value as in step 1. To round the top-right corner: Replace top-left in steps 1 and 2 with top-right. To round the bottom-right corner: Replace top-left in steps 1 and 2 with bottom-right. To round the bottom-left corner: Replace top-left in steps 1 and 2 with bottom-left.

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create Elliptical Corners Optionally, type -webkit-border-radius: x / y, where x is the horizontal radius value of the corners and y is the vertical radius value of the corners, expressed as a length (with units). The values should be separated by a forward slash. Type border-radius: x / y, where x and y are the same values as in step 1.

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create a Circle Using Border-Radius Optionally, type -webkit- border-radius: r –r is the radius value of the element. –To create a circle, use the short-form syntax, and the value of r should be half the height or width of the element. Type border-radius: r –r is the same value as in step 1.

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Drop Shadows to Text Text-shadow property adds dynamic drop- shadow effects to text in elements such as paragraphs, headings.

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Add a Drop Shadow to an Element’s Text Type text-shadow: to begin the element. Type the values for x-offset, y-offset, blur-radius (all three with length units), and color without commas separating them.

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Add Multiple Drop Shadow Styles to an Element’s Text Type text-shadow: to begin the element. Type the values for x-offset, y-offset, blur-radius (all three with length units), and color without commas separating them. The value for blur-radius is optional. Type, (a comma). Repeat step 2 using different values as desired. To reset text-shadow to its default value

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Reset Text-Shadow Back to Its Default Value Type text-shadow: none.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Adding Drop Shadows to Elements Box-shadow property adds shadows to elements, not element’s text. –Requires vendor prefixes for some browsers. –Text-shadow lacks inset keyword and spread attributes. –Six values: X-offset and y-offset with length units. Optional inset keyword. Optional blur-radius with length units. –Blur-radius value assumed zero, unless specified. Optional spread value with length units. –Spread value assumed zero, unless specified. Color value.

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Add a Drop Shadow to an Element Type -webkit-box-shadow: to begin the element. Type the values for x-offset, y-offset, blur-radius, spread (all four with length units), and color. Type box-shadow: and repeat step 2.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create an Inset Shadow Type -webkit-box-shadow: to begin the element. Type inset after the colon, followed by a space. Type the values for x-offset, y-offset, blur-radius, spread (all four with length units), and color. Type box-shadow: and repeat steps 2 and 3.

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Multiple Shadows to an Element Type -webkit-box-shadow: to begin the element. Type the values for x-offset, y-offset, blur-radius, spread (all four with length units), and color. For example, 2px 2px 3px 5px #333. Type, (a comma). Repeat step 2 using different values for each of the properties. Type box-shadow: and repeat steps 2 through 4.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Sampling of Box-Shadow Effects

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Reset Box-Shadow Back to Its Default Value Type -webkit-box-shadow: none. Type box-shadow: none.

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Applying Multiple Backgrounds Multiple backgrounds: Ability to specify multiple backgrounds on a single HTML element. Simplifies HTML code by reducing need for elements whose sole purpose is to attach additional images using CSS.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Apply Multiple Background Images to a Single Element Type background-color: b –b is the background color for older browsers. Type background-image: u –u is a comma-separated list of URL values pointing to your images. Type background-position: p –p is a comma-separated set of positive or negative x- and y- offset pairs with length units or keywords. Type background-repeat: r –r is a comma-separated list of repeat-x, repeat-y, or no- repeat values.

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Multiple Backgrounds in IE8 IE8 displays background- color as a fallback IE8 given a background color and image

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Gradient Backgrounds Gradient backgrounds creates transitions from one color to another without using images. New in CSS3. Two primary styles of gradients: Linear and radial. Include fallback option for browsers that don’t support background gradient property. To create multicolor gradients, specify more than two colors and use optional parameter in gradient syntax.

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create a Fallback Background Type background: color or background-color: color –where color is a hex or RGB value or any of the supported color names. –Best to avoid RGBA, HSL, or HSLA values because IE8 and earlier versions don’t support them.

29. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Define a Linear Gradient Type background: linear-gradient(. Skip this step if you want the gradient to run from top to bottom (the default direction). –Type direction followed by, (a comma) where direction specifies the direction of the gradient as to top, to right, to left, to bottom right, to bottom left, to top right, or to top left. –Or type direction followed by, (a comma) where direction specifies the direction of the gradient as an angle value (like 45deg, 107deg, 180deg, or 310deg). Define the gradient colors Type ); to complete your gradient.

30. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Define a Radial Gradient Type background: radial-gradient(. Specify the gradient’s shape. Skip to auto determine. Otherwise, type circle or ellipse. Specify the gradient’s size. Skip to auto determine (the default value is farthest-corner). Type size –size is a single length for both the width and height. –Or size is a pair of values for the width and height. –Or size closest-side, farthest-side, closest-corner, or farthest-corner.

31. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Define a Radial Gradient Specify gradient’s position. Skip to default. Type pos –pos is position of the center of gradient. Type, (a comma) if you specified a value. Define gradient colors. Type ); to complete gradient.

32. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify the Colors Type at least two colors, separating each with a comma. The first color you specify appears at the start of the gradient, and the last color appears at the end. For radial gradients, they are the innermost and outermost colors, respectively. Colors can be specified using any combination of color names or hex, RGB, RGBA, HSL, or HSLA values. Browsers automatically determine where the colors shift within a gradient unless you specify one or more color stops.

33. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Specify the Colors and Color Stops Follow the instructions to specify colors. Include a percentage with each color value to control where the color appears within the gradient. –Negative percentages are allowed, as are values greater than 100%.

34. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Specifying the Direction of Gradients

35. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Two Ways to Angle a Gradient KeywordsDegrees

36. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create a Gradient with Multiple Colors Repeat first two techniques for creating either linear or radial gradient by specifying type of gradient and starting point. Then type c1 p1, c2 p2, c3 p3) –c# is a color (specified using color names or hex, RGB, RGBa, or HSL values). –p# is position of color (specified as a percentage from 0 to 100).

37. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Create a Gradient with Multiple Colors

38. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting the Opacity of Elements Opacity property changes transparency of elements, including images. To change the opacity of an element: –Type opacity: o o is the level of opaqueness of the element to two decimal places (without units).

39. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Div's Opacity Opacity set to default: 1Opacity set to.50

40. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Effects with Generated Content before and :after pseudo-elements are incredibly handy for adding design flourishes to your pages. –Use them with the content property to include generated content. Generated content is content that is added to your page from CSS, not its usual spot in HTML.

41. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Generated Content Map The arrow at the bottom of the bubble is pure CSS, not an image.

42. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Combining Images with Sprites A sprite is multiple images combined into a single background image file. Use CSS to control which part of the image displays. Apply the sprite to as many elements as desired.