HTML and CSS

LEARN THE QUICK AND EASY WAY!

VISUAL QUICKSTART GUIDE

HTML and CSS 8th Edition

Chapter 14: Enhancements and Effects with CSS3



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.



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.



Browser Compatibility

• This table illustrates when browser support was first introduced for each CSS property.

Geneva Vander Poel

Missing table



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.



Dribbble Site in Modern and Older Browsers



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.



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)



CSS3 Generator and CSS3, Please!



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.



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.



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.



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.



Adding Drop Shadows to Text

• Text-shadow property adds dynamic drop-shadow effects to text in elements such as paragraphs, headings.



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.



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



To Reset Text-Shadow Back to Its Default Value

• Type text-shadow: none.



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.



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.



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.



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.



Sampling of Box-Shadow Effects



To Reset Box-Shadow Back to Its Default Value

• Type -webkit-box-shadow: none.• Type box-shadow: none.



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.



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.



Multiple Backgrounds in IE8IE8 displays background-color as a fallback

IE8 given a background color and image



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.



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.



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.



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.



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.



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.



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%.



Specifying the Direction of Gradients



Two Ways to Angle a Gradient

Keywords Degrees



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).



Create a Gradient with Multiple Colors



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).



Div's Opacity

Opacity set to default: 1 Opacity set to .50



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.



Generated Content Map

• The arrow at the bottom of the bubble is pure CSS, not an image.



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.

Date post:	31-Dec-2015
Category:	Documents
Upload:	samantha-mason
View:	44 times
Download:	1 times

HTML and CSS

Documents