CSS Tutorial: Cascading Style Sheets Part 2 | PDF
Document Details
Uploaded by RicherVictory5626
2013
Tags
Summary
This document is a tutorial on Cascading Style Sheets (CSS) Part 2. It covers the CSS3 text-shadow and box-shadow properties, as well as transitioning between images using CSS. It includes code examples for each concept.
Full Transcript
Chapter 5 Introduction to Cascading Style Sheets (CSS): Part 2 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved. 5.1 Text Shadows The CSS3 text-shadow property makes it easy to add a text shadow effect t...
Chapter 5 Introduction to Cascading Style Sheets (CSS): Part 2 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved. 5.1 Text Shadows The CSS3 text-shadow property makes it easy to add a text shadow effect to any text (Fig. 5.1). 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. Copyright © Pearson, Inc. 2013. All Rights Reserved. 5.4 Box Shadows You can shadow any block-level element in CSS3. Figure 5.3 shows you how to create a box shadow. ◦ Horizontal offset of the shadow—the number of pixels that the box-shadow will appear to the left or the right of the box. A positive value moves the box-shadow to the right ◦ Vertical offset of the shadow—the number of pixels the box-shadow will be shifted up or down from the box. A positive value moves the box-shadow down. ◦ Blur radius—A blur-radius of 0px would result in a shadow with a sharp edge (no blur). The greater the value, the more the edges of the shadow are blurred. ◦ Color—the box-shadow’s color. Copyright © Pearson, Inc. 2013. All Rights Reserved. Copyright © Pearson, Inc. 2013. All Rights Reserved. Copyright © Pearson, Inc. 2013. All Rights Reserved. 5.13.3 Transitioning Between Images We can use the transition property to create the visually beautiful effect of melting one image into another (Fig. 5.14). The transition property includes three values. First, we specify that the transition will occur on the opacity of the image. The second value, 4s, is the transition-duration. The third value, ease-in-out, is the transition-timing- function. Next, we define :hover with an opacity of 0, so when the cursor hovers over the top image, its opacity becomes fully transparent, revealing the bottom image directly behind it. We then add the bottom and top images, placing one directly behind the other. Copyright © Pearson, Inc. 2013. All Rights Reserved. Copyright © Pearson, Inc. 2013. All Rights Reserved. Copyright © Pearson, Inc. 2013. All Rights Reserved. More: http://www.w3schools.com/css/css3_transitions.asp Copyright © Pearson, Inc. 2013. All Rights Reserved.
