MTA EXAM 98-375 HTML5 Application Development Fundamentals
98-375: OBJECTIVE 3 Format the User Interface by Using CSS
LESSON 3.4 Manage the graphical interface by using CSS
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.
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 borderradius, 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?
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.
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 using @font-face, which includes a reference to the URL containing the font file.
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 counterclockwise.
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, animationduration, animation-timing-function, animation-delay, animationiteration-count, and animation-direction. *3D is not supported at this time; check the list of browser support.
2D TRANSFORMATIONS EXAMPLES
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).
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.
DEMONSTRATION Lesson 3.4 Adding a New Font to a Web Page In this demonstration, you will see how to use the @font-face 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.
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 the @font-face property?
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.
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 borderradius, 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?
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 http://www.microsoft.com/typography/weft.mspx http://msdn.microsoft.com/library/gg589503.aspx http://msdn.microsoft.com/en-us/ie/gg593671 http://www.w3schools.com/css3/default.asp http://code.google.com/webfonts