1. HTML5 Application Development Fundamentals
MTA Exam
HTML5 Application Development Fundamentals

2. Format the User Interface by Using CSS
98-375: OBJECTIVE 3
Format the User Interface by Using CSS

3. LESSON 3.4
Manage the graphical interface by using CSS

4. overview Lesson 3.4 In this lesson, you will review the following:
Graphics effects – rounded corners, shadows, transparency, background gradients, typography, and Web Open Font Format.
2D and 3D transformations – translate, scale, rotate, skew, and 3D perspective transitions and animations.
SVG filter effects.
Canvas.
CSS3 offers many new ways to style elements on a page. This lesson concentrates on the visual effects of the page, such as adding rounded corners, shadows, 2D and 3D transformations, etc.

5. GUIDING questions Lesson 3.4
How can the new Cascading Style Sheets 3 (CSS3) properties enable the use of fonts that are not pre-loaded on a client PC?
What are the benefits of adding graphic visual effects such as border-radius, 2D and 3D transformations, and SVG filters?
What impact does CSS3 have on the new HTML5 tags used for a drawing canvas and SVG elements?
How can the new CSS3 properties enable the use of fonts that are not pre-loaded on a client PC? With the introduction of WOFF (Web Open Font Format), the developer can include new fonts with the website files. This enables the developer to use fonts other than the current standards fonts (Arial, Helvetica, Times New Roman).
What are the benefits of adding graphic visual effects such as border-radius, 2D and 3D transformations, and SVG filters? These new styles, combined with regions and the new flexible box model, can make it easy for even beginning designers to add style to a site.
What impact does CSS3 have on the new HTML5 tags used for a drawing canvas and SVG elements? The new properties for applying rounded corners, background color, and shadow effects can be applied to these new elements. It also provides filters that can be applied to the SVG graphic before it is rendered.

6. Lecture Lesson 3.4
Graphics Effects – Rounded Corners, Shadows, Transparency, and Background Gradients
Using rounded corners, shadows, transparency and background gradients can make the site appear “softer,” friendlier, and visually appealing.
Graphics effects can be applied to any element on a web page.
Check for the status of browser support for these new styles. It is possible to use the new styles by adding a vendor prefix such as:
-ms- for Internet Explorer
-moz- for firefox
-webkit- for Safari and Chrome
Ask the students to think about how many corners are around each element? What would happen if they styled each of them differently? Draw some creative designs on the board (use various degrees of rounded edges, different line styles, etc.)
Rounded corners are based on a border radius and can be all set to the same or each corner can have a different radius.
Shadows are created using the box-shadow style.
Transparency can be applied to an image object using opacity.

7. Graphics effects continued
Graphics Effects – Typography and Web Open Font Format
Adding custom fonts to a web page is much easier with new CSS3 styles such as Web Open Font Format (WOFF).
WOFF offers an alternative to only using fonts currently installed on end-user PCs.
WOFF is a compressed wrapper for other font formats such as TrueType, OpenType, or Open Font Format.
A downloaded or new font can be added face, which includes a reference to the URL containing the font file.
Support for Level 3 (CSS3) Fonts are available for Microsoft Internet Explorer 9
rule is supported in all major browsers.
Internet Explorer only supports .eot type fonts.
Firefox, Chrome, Safari, and Opera support .ttf and .otf font files.

8. Lecture Lesson 3.4 2D and 3D Transformations
Translate, scale, rotate, skew, and 3D perspective transitions and animations.
The translate() method moves the element from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position.
The scale() method increases or decreases the size of the element, depending on the parameters given for the width (X- axis) and the height (Y-axis); this value is multiplied by the current values.
Example: scale(2,3) doubles the width and triples the height.
With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.
Remember to include an animation duration or it will default to 0.

9. transformations continued
3D* Transformations work similar to 2D, except they have an additional value for the z-axis.
The 3D perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed.
There are six animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction.
*3D is not supported at this time; check the list of browser support.
Animation is not currently supported by Internet Explorer
animation-name property specifies a name for animation.
animation-duration property defines how many seconds or milliseconds an animation takes to complete one cycle.
Remember to include an animation duration or it will default to 0.
animation-timing-function specifies the speed curve of the animation.
animation-delay property defines when the animation will start.
animation-iteration-count property defines how many times an animation should be played
animation-direction property defines whether or not the animation should play in reverse on alternate cycles.
animation-play-state property specifies whether the animation is running or paused.

10. 2D transformations – examples

11. Lecture Lesson 3.4 SVG Filter Effects
SVG filter effects are effects applied to Scalable Vector Graphics (SVG) files. They add special effects to the graphic.
To apply a filter effect to a graphics element or a container element, the 'filter' property is set on a given element.
A filter is applied to an SVG element via the filter attribute, in the form of filter="url(#filterId)", or it can be applied as a CSS property filter:url(#filterId).
The available filters in SVG are:
•feBlend - filter for combining images
•feColorMatrix - filter for color transforms
•feComponentTransfer
•feComposite
•feConvolveMatrix
•feDiffuseLighting
•feDisplacementMap
•feFlood
•feGaussianBlur
•feImage
•feMerge
•feMorphology
•feOffset - filter for drop shadows
•feSpecularLighting
•feTile
•feTurbulence
•feDistantLight - filter for lighting
•fePointLight - filter for lighting
•feSpotLight - filter for lighting

12. Lecture Lesson 3.4
Canvas
The <canvas> tag is new to HTML5, and it is included in the body tag with a width and height.
The new CSS styles can be applied, giving the canvas rounded corners, background color, and even a shadow effect.
The canvas property is discussed in detail in a prior lesson, for additional canvas information, please refer to lesson 2.2 Choose and configure HTML5 tags to display graphics.
An example of the HTML and CSS code for adding style to canvas (to see the canvas, you need Internet Explorer 9 or other compatible browser (check the w3schools browser support page:
<canvas id="canvasElement" width="480" height="320"></canvas>
canvasElement {
border: 1px solid #CCFFCC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #CCFFCC;
-webkit-box-shadow: 10px 10px 5px #CCFFCC;
box-shadow: 10px 10px 5px #CCFFCC;
background-color: #66CCFF; }

13. DEMONSTRATION Lesson 3.4 Adding a New Font to a Web Page
In this demonstration, you will see how to use property to use a font that might not be pre-installed on the client machine.
Unzip the resources file for this lesson.
Make sure both files are unzipped to the same location.
Use a browser to open the NewFontFace.html page.
The page should display the new paragraph text with a new font.
Zipped resources file: ENU-3.4-Resources.zip
Two files will be unzipped: JimNightshade-regular.eot and NewFontFace.html
Place both files in the same directory.
(font was downloaded from Google fonts)
The .ttf file was converted to .eot for Internet Explorer. Free conversion software can be found at:

14. DISCUSSION Lesson 3.4 Why is Typography Important?
Several sans serif and serif fonts are already available to web designers. What is the benefit of property?
Typography has changed dramatically and can provide new styles to a site. Being able to add additional fonts is especially helpful if the website is associated with a company with print material created by a graphic artist or for other unique design needs. Sites can now have a consistent look between printed material and the web that reinforces the corporate identity of the business or organization.

15. In-Class Activity Lesson 3.4
Directions:
Read the scenario in the In-class Activity.
Use the resources in this presentation and your own investigative skills to answer the questions.
In this activity, you will add rounded borders and 2D transformation styles to elements on an HTML page.
In-class Activity document: ENU-3.4-IC.docx
Answer key: ENU-3.4-ICKeydocx
Scenario:
As editors of the school newspaper, Diane and Ann are responsible for the web version of the publication. The paper includes articles from the journalism class and photos from the digital photography club.
They have decide to use new features available in CSS3 to add more style to the web version.
Content:
The current master page includes the layout for the newspaper content. It uses columns and regions as placeholders for the text and images.
Refer to events happening at your school to create an HTML content page.
Add style to the columns by using the border-radius, background, and box-shadow properties. The code below adds a border and rounded border for the top left corner. (Microsoft Internet Explorer 10 or another browser that supports this style is required.)
div {
border:2px solid;
padding:10px;
background:#dddddd;
border-bottom-left-radius:2em;
box-shadow: 10px 10px 5px #888888; }
Test and make changes as necessary until the newspaper is ready to go live.
Final products may vary depending on the students’ ability. Encourage them to experiment by changing the colors and border radius size.

16. REVIEW Lesson 3.4 Can you answer these?
How can the new Cascading Style Sheets 3 (CSS3) properties enable the use of fonts that are not pre-loaded on a client PC?
What are the benefits of adding graphic visual effects such as border-radius, 2D and 3D transformations, and SVG filters?
What impact does CSS3 have on the new HTML5 tags used for a drawing canvas and SVG elements?
How can the new CSS3 properties enable the use of fonts that are not pre-loaded on a client PC? With the introduction of WOFF (Web Open Font Format), the developer can include new fonts with the website files. This enables the developer to use fonts other than the current standards fonts (Arial, Helvetica, Times New Roman).
What are the benefits of adding graphic visual effects such as border-radius, 2D and 3D transformations, and SVG filters? These new styles, combined with regions and the new flexible box model, can make it easy for even beginning designers to add style to a site.
What impact does CSS3 have on the new HTML5 tags used for a drawing canvas and SVG elements? The new properties for applying rounded corners, background color, and shadow effects can be applied to these new elements. It also provides filters that can be applied to the SVG graphic before it is rendered.

17. ADDITIONAL RESOURCES Lesson 3.4
MSDN Resources
Microsoft® Typography
How to Add Rounded Corners with CSS
Internet Explorer® Learning – CSS3
Other Resources
W3 Schools CSS3
Google Web Fonts