CHS Web Design Track

HTML5 and CSS3 7th Edition

Tutorial 4 Graphic Design with CSS

«Previous Lesson | Chapter Review »

Session 4.3

Transforming Page Objects

Figure 4-47 shows the initial layout and design of the page content.
Function Description
translate(offX, offY) Moves the object offX pixels to the right and offY pixels down; negative values move the object to the left and up
translateX(offX) Moves the object offX pixels to the right; negative values move the object to the left
translateY(offY) Moves the object offY pixels down; negative values move the object up
scale(x, y) Resizes the object by a factor of x horizontally and a factor of y vertically
scaleX(x) Resizes the object by a factor of x horizontally
scaleY(y) Resizes the object by a factor of y horizontally
skew(angleX, angleY) Skews the object by angleX degrees horizontally and angleY degrees vertically
skewX(angleX) Skews the object by angleX degrees horizontally
skewY(angleY) Skews the object by angleY degrees vertically
rotate(angle) Rotates the object by angle degrees clockwise; negative values rotate the object counter-clockwise
matrix(n, n, n, n, n, n) Applies a 2D transformation based on a matrix of six values
 
To open the Genta Komatsu page:
  1. Use your editor to open the tb_genta_txt.html and tb_visual2_txt.css files from the html04 > tutorial folder. Enter your name and the date in the comment section of both files and save them as tb_genta.html and tb_visual2.css respectively.
  2. Return to the tb_genta.html file in your editor. Within the document head, insert the following link elements to link the page to the tb_reset.css, tb_styles2.css, and tb_visual2.css style sheet files. 
    <link href=”tb_reset.css” rel=”stylesheet” />
<link href=”tb_styles2.css” rel=”stylesheet” />
<link href=”tb_visual2.css” rel=”stylesheet” />
  3. Take some time to scroll through the contents of the file. Note that the document content consists mainly of three figure boxes each containing a different photo of Genta Komatsu.
  4. Close the file, saving your changes.
  5. Open the tb_genta.html file in your browser. Figure 4-47 shows the initial layout and design of the page content.
 
To apply the transform style:
  1. Go to the tb_visual2.css file in your editor and scroll as needed to the Transformation Styles section.
  2. Insert the following style rule to rotate the figure2 figure box 40° counter-clockwise, reduce it to 80% of its former size, and shift it 20 pixels to the right and 100 pixels up. Also, add a style to create a drop shadow using the code that follows:
    figure#figure2 {
transform: rotate(-40deg) scale(0.8, 0.8)
translate(20px, -100px);
box-shadow: rgb(101, 101, 101) 10px 10px 25px;
}
  3. Add the following style rule to rotate the figure3 figure box 10° clockwise, resize it to 90% of its current size, and shift it 120 pixels upward. Also add a drop shadow to the figure box using the following style rule:
    figure#figure3 {
transform: rotate(10deg) scale(0.9, 0.9)
translateY(-120px);
box-shadow: rgb(101, 101, 101) 10px -10px 25px;
}
  4. Save your changes to the file and then reload tb_genta.html in your browser.
Figure 4-48 describes the newly added style rules.
Figure 4-49 shows the revised design of the page’s content.

Transformations in Three Dimensions

  • A 3D transformation is a change that involves three spatial axes:
    • an x-axis that runs horizontally across the page
    • a y-axis that runs vertically
    • a z-axis that comes straight out of the page toward and away from the viewer
Function Description
translate3d(offX, offY, offZ) Shifts the object offX pixels horizontally, offY pixels vertically, and offZ pixels along the z-axis
translateX(offX)
translateY(offY)
translateZ(offZ)		 Shifts the object offX, offY, or offZ pixels along the specified axis
rotate3d(x, y, z, angle) Rotates the object around the three-dimensional vector (x, y, z) at a direction of angle
rotateX(angle)
rotateY(angle)
rotateZ(angle)		 Rotates the object around the specified axis at a direction of angle
scale3d(x, y, z) Resizes the object by a factor of x horizontally, a factor of y vertically, and a factor of z along the z-axis
scaleX(x)
scaleY(y)
scaleZ(z)		 Resizes the object by a factor of x, y, or z along the specified axis
perspective(p) Sets the size of the perspective effect to p
matrix3d(n, n, …, n) Applies a 3D transformation based on a matrix of 16 values

Understanding Perspective

To apply the 3D transformations:
  1. Return to the tb_visual2.css file in your editor.
  2. Directly after the Transformation Styles comment, insert the following style rule to set the perspective of the 3D space of the article element.
    article {
perspective: 600px;
}
  3. Next, insert the following style rule for the figure1 figure box to rotate it 30° around the x-axis, shift it 50 pixels along the z-axis, and add a drop shadow.
    figure#figure1 {
transform: rotateX(30deg) translateZ(50px);
box-shadow: rgb(51, 51, 51) 0px 10px 25px;
}
  4. Add the following functions to the transform property for the figure2 figure box to rotate the box 30° around the z-axis and 60° around the y-axis:
    rotateZ(30deg) rotateY(60deg)
  5. Add the following functions to the transform property for the figure3 figure box to rotate the box counter-clockwise 70° around the y-axis and shift it 20 pixels away from the user along the z-axis:
    rotateY(-70deg) translateZ(-20px)
  6. Save your changes to the file and then reload tb_genta.html in your browser.
Figure 4-53 highlights the 3D transformations styles in the style sheet.
Figure 4-54 shows the result of applying 3D transformations to each of the figure boxes on the page.
 

Class Discussion:

Find a few examples of websites using different 2D and 3D functions. Identify the functions used in them.

Exploring CSS filters

Function Description
blur(length) Applies a blur to the image where length defines the size of blur in pixels
brightness(value) Adjusts the brightness where values from 0 to 1 decrease the brightness and values greater than 1 increase the brightness
contrast(value) Adjusts the contrast where values from 0 to 1 decrease the contrast and values greater than 1 increase the contrast
drop-shadow(offsetX offsetY blur color) Adds a drop shadow to the image where offsetX and offsetY are horizontal and vertical distances of the shadow, blur is the shadow blurring, and color is the shadow color
grayscale(value) Displays the image in grayscale from 0, leaving the image unchanged, up to 1, displaying the image in complete grayscale
hue-rotate(angle) Adjusts the hue by angle in the color wheel where 0deg leaves the hue unchanged, 180deg displays the complimentary colors and 360deg again leaves the hue unchanged
invert(value) Inverts the color from 0 (leaving the image unchanged), up to 1 ( completely inverting the colors)
opacity(value) Applies transparency to the image from 0 (making the image transparent), up to 1 (leaving the image opaque)
saturate(value) Adjusts the color saturation where values from 0 to 1 decrease the saturation and values greater than 1 increase the saturation
sepia(value) Displays the color in a sepia tone from 0 (leaving the image unchanged), up to 1 (image completely in sepia)
url(url) Loads an SVG filter file from url
To apply the CSS filters:
  1. Return the tb_visual2.css file in your editor and go down to the Filter Styles section.
  2. Change the figure1 figure box to a sepia tone by adding the following style rule:
    figure#figure1 {
-webkit-filter: sepia(0.8);
filter: sepia(0.8)
}
  3. Change the figure2 figure box to grayscale by adding the style rule:
    figure#figure2 {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
  4. Increase the saturation and contrast for the figure3 figure box with the style rule:
    figure#figure3 {
-webkit-filter: saturate(1.5) contrast(1.2);
filter: saturate(1.5) contrast(1.2);
}
  5. Save your changes to the file and then reload tb_genta.html in your browser. Trouble? CSS filters are not supported by all browsers. Depending on your browser, you might not see any effect from the filters. In particular, Internet Explorer does not support these filter styles at the time of this writing.
Figure 4-57 highlights the CSS filters added to the style sheet.
Figure 4-58 shows the final design of the Genta Komatsu page.
 

Quick Quiz:

  1. True/False: Filters were introduced as a WebKit browser extension.
  2. True/False: Filters control the appearance of page objects through rotation, rescaling, and translation in space.

Working with Image Maps

Defining a Client-Side Image Map

  • Client-side image maps are defined with the following map element:
    <map name=“text”>
        hotspots
    </map>
    • text is the name of the image map
    • hotspots are the defined regions within an image that are linked to different URLs
  • They can be placed anywhere within the body of a web page
  • They are not actually displayed by browsers
  • They are simply used as references for mapping the locations of the hotspots within the image
  • The most common practice is to place a map element below the corresponding image
  • Hotspot within the map element can be defined using the following element:
    <area shape=“shape” coords=“coordinates”
    href=“url” alt=“text” />
    • shape is the shape of the hotspot region
    • coordinates are the list of points that define the boundaries of that region
    • url is the URL of the hypertext link
    • text is alternate text displayed for non-graphical browsers
  • Circular hotspots are defined using the attributes 
    shape=“circle” coords=“x, y, radius”
     where x and y are the coordinates of the center of the circle and radius is the circle’s radius
To create an image map:
  1. Open or return to the tb_komatsu.html file in your editor.
  2. Directly below the figure box, insert the following HTML code:
    <map name=”family_map”>
<area shape=”rect” coords=”74,74,123,141”
href=”tb_ikko.html” alt=”Ikko Komatsu” />
<area shape=”rect” coords=”126,109,177,172”
href=”tb_mika.html” alt=”Mika Komatsu” />
<area shape=”rect” coords=”180,157,230,214”
href=”tb_hiroji.html” alt=”Hiroji Komatsu” />
<area shape=”rect” coords=”258,96,312,165”
href=”tb_genta.html” alt=”Genta Komatsu” />
<area shape=”rect” coords=”342,86,398,162”
href=”tb_suzuko.html” alt=”Suzuko Komatsu” />
</map>
  3. Save your changes to the file.
Figure 4-62 highlights the HTML code for the image map and hotspots.

Applying an Image Map

To apply an image map:
  1. Add the attribute usemap=”#family_map” to the img element for the family portrait.
  2. Save your changes to the file and then reload tb_komatsu.html in your browser.
  3. Click the five faces in the family portrait and verify each face is linked to a separate HTML file devoted to that individual. Use the link under the image of each individual to return to the home page.
Figure 4-63 highlights the code to apply the image map.
 

Class Discussion:

Search the Internet for several websites that use image maps. Then evaluate and critique the maps, explaining what it is you like or dislike about the maps. Pay particular attention to the quality and accuracy of the hotspots within each map.

Session 4.3 Quick Check
  1. Provide the transformation to shift a page object 5 pixels to the right and 10 pixels up.
  2. Provide the transformation to reduce the horizontal and vertical size of an object by 50%.
  3. Provide the transformation to rotate an object 30° counter-clockwise around the x-axis.
  4. What is the difference between using the perspective property and using the perspective function?
  5. Provide the filter to increase the brightness of an object by 20%.
  6. Provide the filter to decrease the contrast of an object to 70% of its default value and to change the hue by 180°.
  7. Provide code to create a circular hotspot centered at the coordinates (150, 220) with a radius of 60 pixels, linked to the help.html file.
  8. Provide the code to create a triangular hotspot with vertices at (200, 5), (300, 125), and (100, 125), linked to the info.html file.
  9. Revise the following img element to attach it to the mapsites image map: <img src=”logo.png” alt=”” />
«Previous Lesson | Chapter Review »