Worksheet 5-css3 PDF

Preview

Summary

week 5 css worksheet...

Description

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Unit 6G4Z2101: Introduction to Web Design and Development Worksheet 5: CSS3 Transforms, transitions and animations

Workshop topic CSS3 introduced some new features which allow you more design options, such as rounding corners on borders, adding shadows to text, and creating transitions and animation. It continues to evolve. When new styles are introduced, before they become a full W3C recommendation, they often need to use browser prefixes to make sure that they work across different browsers. So, adding rounded corners through a stylesheet would have required the following code to make it cross-b NOTE: The CSS used in these examples no longer needs to use the browser prefixes for current versions of browsers (prefixes were discussed in the lecture). If you are experimenting with your own css3 you may need to use them, depending on what properties you use.

Create a box with a drop-shadow effect 1. In Notepad++ create a new html document and save it as css3demo.htm. Add the HTML5 doctype declaration, and the standard html, head, title and body tags (opening and closing). Refer to previous worksheets for help. 2. Create a new css document, and save it as css3.css, then link it to your html document. 3. Add a style for body and set the margins and padding to zero. 4. Set the font-family as Arial, Helvetica, sans-serif. You can apply it to the body, so it styles all the text on the page. 5. In your HTML document add the following code to create a section, around which we’ll create a border with rounded corners:

6. In your CSS document add a style and set the following: a. width and height of 200px b. padding of 10px c. a top and left margin to give it some space d. a 2px solid border with a colour (see http://www.w3schools.com/colors/colors_names.asp ) Page | 1

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology 7. Save both files and open in a browser to check that you can see a box with borders. 8. In your style sheet add the following to your #box style to create rounded corners. Add a comment to say what it does.

9. Save your style sheet and refresh your html in a browser. The box should now have rounded corners. 10. Experiment with changing the pixel value to see what effect it has on the roundness of the corners. Try bigger and smaller values. 11. In the style sheet, add the following to the #box style, to give the box a drop-shadow. Replace the colour with whatever you used for your border colour (or a different colour of your choice).

12. Save your stylesheet and refresh the browser. 13. Experiment with changing the pixel values one at a time to see how they each affect the shadow. Save your stylesheet and refresh your browser after each change. a. b. c. d.

The first pixel value will affect the horizontal offset The second affects the vertical offset The third affects the blur distance If there is no blur distance the shadow edge will be solid (try removing the 3rd pixel value)

14. Add a fourth value to the box-shadow style (try 8px), before the colour code, to create shadow spread. This creates a shadow around all four sides of the box. For example:

15. Change the first two px values to negative values (e.g. -6px). Check in the browser and note that the shadow is now on the left. So you can change where the drop shadow is applied by using positive or negative values.

Page | 2

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Create text shadow Text shadow works in the same way as box shadow; having pixel values for horizontal offset, vertical offset, blur distance and a colour. 1. Add a heading (CSS3 Examples) to your HTML document, definted as . Place it just before the opening tag. 2. Add a style for your heading as shown, choosing one colour for the text, and another for the drop-shadow (try using a lighter shade of the main colour). Use the link at the bottom of page 1 to find hex colour values.

You can add more than one shadow to text by adding a comma, followed by a second set of values, to the same statement. This works better with bigger text. 3. Make the following changes to your h1 style: a. Change the h1 font size to 3em b. After #colour2 add a comma followed by 6px 6px 0px and a third colour (try a different shade of the main colour). NOTE: It can work well having a strong colour for the main text, a much lighter shade for the first shadow and a shade in between for the second shadow (see below). When using drop shadow with text, you also need to consider how easy the text will be to read (i.e. Usability). Smaller values can be more effective. Compare the two examples below, which uses the same colours, but different pixel values.

NOTE: The same drop shadow principles can be applied to borders. Page | 3

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Apply CSS Transforms Transforms allow you to rotate, scale, skew and translate (move) elements. They use ‘transform’ as the property, and the values vary depending on the effect you want to achieve. 1. Add the following statement to your style for #box, then save and check in a browser. The box orientation will have changed, rotating the box around its centre point.

Transforms can be activated by mouse hover. You will change the rotate to be hover-activated, and add a second transform to scale the box up. More than one transform can be added to the same statement. 2. In your stylesheet, add a new style with the selector #box:hover. 3. Use cut and paste (Ctrl+X, Ctrl+V) to move the transform statement from #box to #box::hover in your style sheet. 4. Save your style sheet and refresh the browser. Now the box will rotate as you hover the mouse pointer over it. 5. Amend your transform code to add some scaling to the transform effect. The first value applies to the X axis, the second to the Y axis. Note the effect when you view it in the browser.

Y-axis

X-axis 6. Save your style sheet and test the page in the browser, noting how the scale values affect the box size. 7. In your #box:hover style, replace rotate(45deg) with translateY(6em). 8. Save your style sheet and refresh your browser. The hover action should now cause the box to move instead of rotating.

Page | 4

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology NOTE: You can also use translateX to move across the page. You could also combine translate and rotate in the same statement to both move and scale the box in response to the hover.. 9. Add rotate(180deg) to your transform statement.

10. Save your style sheet and refresh your browser. The hover should now result in the box moving, scaling and rotating. The rotate causes the box to rotate clockwise around its centre point.

Note that you can specify which axis the rotation should use as its pivot point. By default the rotation is clockwise around the object’s centre, but you could rotate it around the Y axis (imagine a vertical line going through the centre). Note how a rotation of 180 degrees around the Y axis will flip the box and its text.

Refer to the following web page to see other transform settings. http://www.w3schools.com/cssref/css3_pr_transform.asp Transforms are often used for things like positioning images for online photo galleries.

Page | 5

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Apply CSS Transitions CSS transitions allow you to animate property changes (e.g. resizing an element or altering background colour), over a given period of time. You can also use transitions to better control transforms. For example, the transforms you just applied to the hover action can create some judder in the movement, which could be controlled better through the use of a transition. 1. In your HTML document create a second section called #box2. 2. In your HTML document add a couple of break tags between the two sections. 3. In your stylesheet, add #box2 as a selector to the style you already have for #box.

4. Save your html and style sheet documents, then refresh the browser. You should have two identical boxes. When using transitions, you include a timing function, defining the duration over which the transition will take place. Page | 6

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology To make a box scale, for example, you set an initial size first. Your box already has values for width and height. Now you need to define the transition. You will alter the box’s width over a duration of 2 seconds. 5. In your style sheet add a new style for #box2, and add the following code. It tells the browser that you are going to change the width of #box2 over 2 seconds. Remember that you have already declared the initial width for #box2 as 200px.

Now you can add a hover statement in which you declare the end value for the property you are transitioning; in this case a new width for #box2. 6. Add the following code to your stylesheet to set the new width for the box:

7. Test in a browser and when you hover over box2 it should smoothly increase in width. You can also add a transform to a transition. So, you could control the transform speed of the hover action you applied to #box1 by using a transition. 8. In your style sheet, above the code for #box:hover add a new style with the following code.

This tells the browser that the transform code for #box (translate, rotate and scale) should now transition over 2 seconds. 9. Save your style sheet, and refresh your browser. Now as you hover over the first box, the hover-activated changes should be much smoother. Note that for the #box:hover transforms, you included translate, rotate and scale properties in the same statement, with no commas in between. As with transforms, you can add several transition actions to a single statement. An important difference is that with transitions you put a comma between each new transition (see the example below). Page | 7

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Note that ‘transition: width 2s’ is actually shorthand for declaring a transition-property and transition-duration. The longhand for the statement above is shown below. transition-property: width, height, transform; transition-duration: 2s; You can also add ease-in, ease-out and ease-in-out functions to slow a transition at the beginning and/or end. You can find a list of the animatable properties at http://www.w3schools.com/cssref/css_animatable.asp

Keyframe Amination Keyframes can give you much more control over animation effects. If you want to move a box across the screen, for example, you could use keyframes to say what position the box should be in at given percentages of whatever duration has been set for the complete animation. 1. Use File > Save As on your html document to create a new html file called animation.htm. 2. Create a new stylesheet called animation.css. 3. In your html document, change the code which links it to the style sheet, so that it links to your new animation.css document. 4. In your html document, delete the code for the section with the box2 id. 5. In your animation.css stylesheet, create a style for #box, giving it the same width, height, padding, margins, border and border-radius as in your previous stylesheet. 6. Give the box a background colour.

Page | 8

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology You will add a CSS animation to make the box move across the screen. Because you are going to move the box, you need to give it a starting position. 7. In your style sheet, give #box a position of relative with a left position of 0 and a top position of 20px. Refer to worksheet 3 if necessary. 8. In your style sheet add an animation function for #box as follows:

This tells the browser we are creating an animation called ‘moveBox’ (you create your own animation name), which will run over a 6-second duration: 9. In your style sheet, add a new block of code to set the keyframe information for the animation called moveBox, as follows: For each percentage value there is a new left offset value. The starting offset of zero means it is offset by 0px from whatever its starting point is. Remember that the box already has a left margin of 10px, so that is the box’s actual left offset value at the beginning of the animation.

NOTE: @keyframes is a standard selector, telling the browser that you are setting the keyframe details for the named animation (in this case moveBox). You decide on the percentages and values to use. The percentages relate to whatever duration you set for the animation (in this case 6 seconds). The code makes the box move more slowly at first as it moves 200px over 30% of the 6s duration. Then it moves another 200px in only 20% of the time. Therefore the second movement is faster. 10. Save your stylesheet and refresh your browser. The box should now move across the screen and back. 11. Try adding suitable code to make the background colour change as the box moves. You can refer to https://css-tricks.com/almanac/properties/a/animation/ for information

Page | 9

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Try it on your own Using what you have learned so far, try the following activities. Create a text effect CSS can be used for creating effects that previously would have been created with Flash, such as animated banners. Advertising banners will often use text effects, such as fading text in. Have a go at creating a banner-type text effect, where three lines of text fade in at different intervals. 1. Create a new html document and add three ‘paragraphs’ (i.e. each tagged as a paragraph in your html) of short text (e.g. CSS3 transitions/can animate/your page). Save your document.

2. Create a new stylesheet, name it, and link it to the html document you just created. 3. In your stylesheet, give the text a large font size (e.g. 6em). 4. In your style sheet, set the font-family for the paragraphs as Arial, Helvetica, sans-serif. 5. In your style sheet, add text-align: center; to your paragraph style. 6. Create a transition which will make each line of text fade in from white to a colour. Using transition-delay, make the second paragraph appear 1 second after the first, and the third one a further second after that. HINTS • You will need to have a way of targeting each paragraph individually • You will need to set starting colour values for the text (remember all the text is white at the start – or the same as the background if you give the page/box a background colour) • You should define a length of time over which the transitions occur • The property being transitioned is color • Since the text is fading in from white, you can’t see it to hover on it. You can make the transition respond to hovering over the body of the document, as in the example below. • Remember to delay the start of the animation for the second and third paragaphs. Page | 10

School of Computing, Maths & Digital Technology Division of Digital Media & Entertainment Technology

Create more animation effects 1. Develop the code for the animated box so that it moves round the screen in a square formation (left, down, right, up), landing back in its starting position. 2. Develop the code further so that the box changes colour as it moves (use background not background-color).

Create an animated photo gallery Look at the screenshot on page 6 from an online photo gallery. Try creating something similar using your own images. You can use what you already know to create the white border around the photos (by applying appropriate margins). When you hover over an image, get it to enlarge, and sit straight on the page (i.e. no rotation).

Create an animated landing page Animations are sometimes used for creating landing pages. Some use Javascript, but others are pure css. Have a go at making your own. There are some links below to examples illustrating the concept of an animated landing page. https://www.vandelaydesign.com/demos/sequential-animation/ https://tympanus.net/Tutorials/SplashComingSoonPageEffects/index3.html (see other demos on that page).

In this workshop you have learned a range of techniques for adding a variety of effects to your html content. Whilst these techniques should not be overused, they do add an extra dimension to what you can achieve with just html and css. See the following example of an animated banner which uses images http://tympanus.net/Tutorials/AnimatedWebBanners/ There are lots of other examples online of what you can do with css animations. When searching look for “pure css3 animations” to find examples that do not rely on javascript.

Page | 11...