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

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

Chapter 6 More CSS Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
CSS level 3. History of CSS CSS level 1 – original CSS CSS level 2 CSS level 2 Revision 1 (CSS2.1) – up to CSS2.1 monolithic structure CSS level 3 – specification.
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
Intro to CSS3 Vishal Kurup. Cascading Style Sheets Developed to enable the separation of document content from document presentation Initial release in.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
CIS 1310 – HTML & CSS 4 Visual Elements and Graphics.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
INF Web Design HTML5 and CSS3. HTML 5 and CSS 3 to the rescue? HTML 5 Specifically designed for web applications on all platforms HTML 5 will update.
CSS to Know And this is just the beginning. What to What?  Tags = regular HTML  Ids = #id, only one hashtag per page  Class =.class, many as you want.
IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.
Week 6.  Browser DOCTYPE switching What it means for you  – now is the time  CSS3 Web design for the 21 st Century.
Cascading style sheets (CSS)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
By Tuyet Le & Madhura Pitale. Seating Chart with CSS3.
INTRODUCTION TO HTML5 Styling with CSS3. Round Border Corners  You can modify any element that supports the border property and render rounded borders.
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Ins & Outs of. CSS3 is Modular Can we use it now?
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
Tutorial 8 Enhancing a Web Site with Advanced CSS
COMP213 – Web Interface Design
HTML, CSS, and XML Tutorial 8 Enhancing a Web Site with Advanced CSS.
More CSS.
Today’s Agenda Advanced CSS Techniques Floating Z-index Centering Sliding Doors Fluid Layouts CSS3 Advanced CSS Lab Mini Project #2.
INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.
Unit I Applying Advanced Styling CSS. CSS3 can style many aspects that in the past required integration of images New features are not supported by all.
Cascading Style Sheets Chapters 5-6 Color and Background Controls Border and Margin Controls.
Neal Stublen New Element Styling  html5shiv.js provided support in older IE browsers for new sectioning elements aside, header,
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 7: CSS Building Blocks.
CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:
Gradients and Shadows Both gradients and shadows are visual elements that must be used consciously. Gradients make color transitions smooth and shadows.
Managing the Graphical Interface by Using CSS Lesson 7.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Tutorial 4 Creating Page Layouts with CSS
Web Design (15) CSS Opacity, Link Colours & Background Images.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
PERSPECTIVES: TUTORIAL 4 CREATING PAGE LAYOUTS WITH CSS.
Web Design (17) CSS Box Element (2). ‘Box’ Web Site (1) Insert a navigation bar into the index.html file and create links to ‘index.html’, ‘pageone.html’
Creating Visual Effects
Web Development & Design Foundations with HTML5 8th Edition
Formatting Text with CSS
Chapter 5 Introduction to Cascading Style Sheets (CSS): Part 2
Tutorial 4 Topic: CSS 3.0 Li Xu
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Advanced CSS BIS1523 – Lecture 20.
Creating Visual Effects and Animation
Web Systems & Technologies
BOX DIMENSIONS width, height div { height: 300px; width: 400px; background-color: #ee3e80;} p { height: 75%; width: 75%; background-color:
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Chapter 6 More CSS Basics Key Concepts
Cascading Style Sheets
Objectives Create a figure box Add a background image
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
HTML5 Level I Session III
HTML5 Level I Session III
Box model, spacing, borders, backgrounds
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
SEEM4570 Tutorial 3: CSS + CSS3.0
How to use the CSS box model for spacing, borders, and backgrounds
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
ITI 133: HTML5 Desktop and Mobile Level I
Presentation transcript:

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

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.

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.

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

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.

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

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.

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)

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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.

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.

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.