creating visual effects and animation
TRANSCRIPT
![Page 1: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/1.jpg)
Creating Visual Effects and Animation
![Page 2: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/2.jpg)
Objectives
Assess responsive design
Construct a multipart media query
Test layouts with an emulator
Add a column with a media query
Create a widescreen layout
Create responsive navigation
2HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 3: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/3.jpg)
Objectives (continued)
Implement adaptive content
Use progressive enhancement
3HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 4: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/4.jpg)
Add Generated Content
:before and :after pseudo-elements: enable you to insert content into web page using style rules Result known as generated content Can be used for text, pictures, or other
content Must specify value for the content
property• Can be text or path to an image
4HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 5: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/5.jpg)
Add Generated Content (continued):before pseudo-element code and result
5HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 6: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/6.jpg)
Add Visual Form Feedback
CSS supports pseudo-classes specifically for use with forms:
6HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 7: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/7.jpg)
Add Visual Form Feedback (continued)
Code and result using :valid pseudo-class:
7HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 8: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/8.jpg)
Add Visual Form Feedback (continued)
Code and result using :focus pseudo-class:
8HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 9: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/9.jpg)
Create a Gradient
gradient: a visual effect in which an area starts as a single color on one edge/corner and transitions to one or more other colors Modern browsers support gradients as
backgrounds Use the linear-gradient keyword
with values describing the gradient
9HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 10: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/10.jpg)
Create a Gradient (continued)
Examples of linear gradients:
10HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 11: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/11.jpg)
Create a Gradient (continued)
Gradient applied to page background:
11HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 12: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/12.jpg)
Create a CSS Shape
Can use CSS properties to change shapes of HTML elements Enhance visual design Replace shapes that would otherwise
require an image file, reducing page size
12HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 13: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/13.jpg)
Create a CSS Shape (continued)
CSS circle code and result:
13HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 14: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/14.jpg)
Apply Styles Based on Feature Detection
Newer styles not recognized by older browsers (like IE8)
Graceful degradation: when a site uses newer styles in modern browsers while displaying useable layout and all page content in older browsers Modernizr is a free script library that helps
with this process Feature detection: process of detecting
which properties a browser supports14HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 15: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/15.jpg)
Apply Styles Based on Feature Detection (continued)
Feature detection code and results:
15HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 16: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/16.jpg)
Apply a Transform
transform: a change in the appearance of an element in one or more specific ways: rotating, scaling, skewing, and moving (translating)
16HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 17: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/17.jpg)
Apply a Transform (continued)
Implemented in modern browsers with browser prefixes Words or abbreviations added to start of
property name and specific one or more browsers or rendering engines
Create declaration using unprefixed form, then precede with declarations using all browser prefixes
17HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 18: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/18.jpg)
Apply a Transform (continued)
Transform code and result:
18HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 19: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/19.jpg)
Create a Transition
transitions: CSS features that gradually apply changes to properties in response to user actions Supported by modern browsers Create simple animations Example: create transform to rotate an
element, then use transition to spin element into position over several seconds
19HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 20: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/20.jpg)
Create a Transition (continued)
Aspects of transitions that are configurable:
20HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 21: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/21.jpg)
Create a Transition (continued)
Transition code and result:
21HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 22: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/22.jpg)
Animate Content
keyframe animation: an animation created using animation properties and the @keyframes rule Supported by modern browsers Enable you to control what animation
looks like at various points between start and end
@keyframes rule: name for rule, followed by nested rules in braces, with percentage selectors
22HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 23: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/23.jpg)
Animate Content (continued)
Animation-related CSS properties:
23HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 24: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/24.jpg)
Animate Content (continued)
Components of keyframe animation:
24HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 25: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/25.jpg)
Summary
The :before and :after pseudo-elements enable you to insert content -- known as generated content -- into web pages using style rules.
CSS supports several pseudo-classes specifically for use with forms, which you can use to change properties in forms in response to user actions.
25HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 26: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/26.jpg)
Summary (continued)
A gradient is a visual effect in which an area starts as a single color on one edge or corner and transitions gradually to one or more other colors.
You can use CSS properties to change the shapes of HTML elements to enhance your visual design.
26HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 27: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/27.jpg)
Summary (continued)
You can use Modernizr to implement graceful degradation, which describes a layout that uses newer styles in modern browsers while displaying a usable layout and all page content in older browsers.
A transform is a change in the appearance of an element in one or more specific ways (rotating, scaling, skewing, or moving).
27HTML5 and CSS3 – Illustrated, 2nd Edition
![Page 28: Creating Visual Effects and Animation](https://reader033.vdocument.in/reader033/viewer/2022051318/58d15a011a28ab41128b6933/html5/thumbnails/28.jpg)
Summary (continued)
Transitions are CSS features that gradually apply changes to properties in response to user actions over a number of seconds.
A keyframe animation uses animation properties and the @keyframes rule and enables you to control what the animation looks like at various points between the start and end.
28HTML5 and CSS3 – Illustrated, 2nd Edition