CSS Advanced Techniques (PDF)

Cascading Style Sheets (CSS): Introduction Part 2: Advanced CSS Objectives In this chapter you’ll learn to : Add text shadows and text-stroke effects. Create animations Use multiple background images Text Shadows The CSS3 text-shadow property makes it easy to add...

Cascading Style Sheets (CSS): Introduction Part 2: Advanced CSS Objectives In this chapter you’ll learn to : Add text shadows and text-stroke effects. Create animations Use multiple background images Text Shadows The CSS3 text-shadow property makes it easy to add a text shadow effect to any text Add shadow to text and to elements In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px) To add more than one shadow to the text, you can add a comma-separated list of shadows.  Text Shadows [Horizontal offset] [Vertical] [blur radius] [color] Vertical  shifted up or down from the text color of the text-shadow horizontal offset of the shadow is -4px. A negative value moves the text- shadow to the left; a positive value moves it to the right create a plain border around some text The greater the value, the greater the blurring of the edges. comma-separated list of shadows Run this code example Text Shadows (cont’d.) The CSS3 text-shadow property makes it easy to add a text shadow effect to any text The text-shadow property has four values which represent: Horizontal offset of the shadow—the number of pixels that the text-shadow will appear to the left or the right of the text. A negative value moves the text-shadow to the left; a positive value moves it to the right. Vertical offset of the shadow—the number of pixels that the text-shadow will be shifted up or down from the text. A negative value moves the shadow up, whereas a positive value moves it down. blur radius—the blur (in pixels) of the shadow. A blur-radius of 0px would result in a shadow with a sharp edge (no blur). The greater the value, the greater the blurring of the edges. color—determines the color of the text-shadow. Copyright © Pearson, Inc. 2013. All Rights Reserved.  Box Shadow box-shadow: apply one or more shadows to an element [Horizontal offset] [Vertical] [blur radius] [spread radius][color] spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow Run this code example & the book example Backgrounds add multiple background images to one element You will also learn about the following properties: background-size background-origin background-clip CSS allows you to add multiple background images for an element, through the background-image property. background Images CSS3 allows you to add multiple background images to an element (Fig. 5.8). The style begins by adding two background-images—flower.png and texture.jpg. Next, we specify each image’s placement using property background-position. The comma-separated list of values matches the order of the comma-separated list of images in the background-image property. The first value—bottom right—places the first image, flower.png, in the bottom-right corner of the background in the border-box. The last value—100% center—centers the entire second image, texture.jpg, in the content-box so that it appears behind the content and stretches to fill the content-box. The background-origin determines where each image is placed using the box model we discussed in chapter 4. The first image (flower.png) is in the outermost border-box, and the second image (texture.jpg) is in the innermost content-box. Copyright © Pearson, Inc. 2013. All Rights Reserved. Background adding two background-images— images flower.png and texture.jpg a background image on a specify each image’s placement using website that covers the property background-position entire browser window at all times background-image property The comma-separated list of values to add multiple matches the order of the comma- background images for separated list of images in an element separated the background-image property. by commas background shorthand property Background images 100% center—centers the entire second image, texture.jpg, in the content-box so that it appears behind the content and stretches to fill the content-box Background images background-clip property specifies the painting area of the background. The first image (flower.png) is in the three different values: outermost border-box, and the second image border-box - (default) (texture.jpg) is in the innermost content-box. the background is painted to the outside edge of the border padding-box - the background is painted to the outside edge of the padding content-box - the background is painted within the content box Background images background-size property allows you to specify the size of background images lengths, percentages, or by using one of the two keywords: contain or cover. The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area).  Background images background-origin property specifies where the background image is positioned The background-origin determines where each image is placed using the box model border-box - the background image starts from the upper left corner of the border padding-box - (default) the background image starts from the upper left corner of the padding edge content-box - the background image starts from the upper left corner of the content images are stacked on top of each other, where the first image is closest to the viewer Animation allows animation of HTML elements without using JavaScript element gradually change from one style to another. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.  Animation bind the animation to an element binds the "example" animation to the element animation-duration property defines how long an animation should take to complete And Book example Run this code example  Animation animation-iteration-count property specifies the number of times an animation should run You may use the value infinite to repeat the animation continuously. animation-delay property specifies a delay for the start of an animation And Book example Run this code example  Animation The value alternate used here specifies that the animation animation-direction property will run in alternating directions—in this case, counterclockwise specifies whether an animation (as we define with our keyframes), then clockwise. The default should be played forward value, normal, would run the animation in the same direction for each cycle values: normal - The animation is played as normal (forwards). This is default reverse - The animation is played in reverse direction "alternate" to make the animation run forwards (backwards) first, then backwards alternate - The animation is played forwards first, then backwards alternate-reverse - The animation is played backwards first, then forwards And Book example Run this code example  Animation animation-timing-function property specifies the speed curve of the animation ease - Specifies an animation with a slow start, then fast, then end slowly (this is default) linear - Specifies an animation with the same speed from start to end ease-in - Specifies an animation with a slow start ease-out - Specifies an animation with a slow end ease-in-out - Specifies an animation with a slow start and end And Book example Run this code example  Animation The @keyframes rule is followed by the name of the animation (animation) to which the keyframes are applied the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). specify CSS styles inside change the background-color the @keyframes rule, the of the element when the animation will gradually animation is 25% complete, change from the current 50% complete, and again when style to the new style at the animation is 100% certain times complete And Book example Run this code example  Animation @keyframes rule includes five selectors to represent the points-in-time for our animation And Book example Run this code example  Animation We begin and end the animation at the same point—left: 50px; top: 0px;— creating a rectangular pattern along which the image moves. And Book example Run this code example Animation 200 1 2 5 200 3 1 Animation (cont.) @keyframes Rule and Selectors The @keyframes rule defines the element’s properties that will change during the animation, the values to which those properties will change, and when they’ll change. The @keyframes rule is followed by the name of the animation (animation) to which the keyframes are applied. CSS rules consist of one or more selectors followed by a declaration block in curly braces ({}). Selectors enable you to apply styles to elements of a particular type or attribute. A declaration block consists of one or more declarations, each of which includes the property name followed by a colon (:), a value and a semicolon (;). You can break down the animation into as many points as you like. Copyright © Pearson, Inc. 2013. All Rights Reserved. References:  Internet & World Wide Web: How to Program, Fifth Edition, Deitel, H. M., Deitel, P. J., Deitel & Associates, Inc. Published by Pearson, Copyright © 2012. eText ISBN-13: 9780137618279. Paperback ISBN-13: 9780132151009 Web Programming with HTML5, CSS, and JavaScript, First Edition. John Dean. Jones & Bartlett learning. © 2019. ISBN: 9781284091793 Web Programming and Internet Technologies, 2nd Edition. Porter Scobey. Jones & Bartlett Learning. 2016. ISBN: 9781284070699 New Perspectives on HTML, CSS, and Dynamic HTML 5e, Patrick M. Carey, Carey Associates, Inc. Published by Cengage Learning, ©2013. ISBN-13: 9781111526436 / ISBN-10: 1111526435 https://www.w3schools.com/