Return to the cf_effects.css file in your editor and go to the HTML Styles secti

Question

Return to the cf_effects.css file in your editor and go to the HTML Styles section. Debra wants a background displaying a scene from last year’s festival. Add a style rule for the html element that displays the cf_back1.png as a fixed background, centered horizontally and vertically in the browser window and covering the entire window.

4

Go to the Body Styles section and set the background color of the page body to rgba(255, 255, 255, 0.3).

5

Go to the Body Header Styles section and change the background color of the body header to rgba(51, 51, 51, 0.5).

6

Debra has placed useful information for the festival in aside elements placed within the left and right section elements. Go to the Aside Styles section and create a style rule for the section aside selector that adds a 10-pixel double border with color rgba(92, 42, 8, 0.3) and a border radius of 30 pixels.

7

Debra wants a curved border for every h1 heading within an aside element. For the selector section aside h1, create a style rule that sets the border radius of the top-left and top-right corners to 30 pixels.

8

Define the perspective of the 3D space for the left and right sections by creating a style rule for those two sections that sets their perspective value to 450 pixels.

9

Create a style rule that rotates the aside elements within the left section 25° around the y-axis. Create another style rule that rotates the aside elements within the right section –25° around the y-axis.

10

Place the element using relative positioning.

Set the top margin to 180 pixels, the bottom margin to 150 pixels, and the left/right margins to auto.

Set the width and height to 400 pixels.

Set the perspective of the space to 450 pixels.

11

For each div element of the cube_face class, create a style rule that places the faces with absolute positioning and sets their width and height to 400 pixels.

12

Translate the cube_front div element –50 pixels along the z-axis.

Translate the cube_left div element –200 pixels along the x-axis and rotate it 90° around the y-axis.

Translate the cube_right div element 200 pixels along the x-axis and rotate it 90° counter-clockwise around the y-axis.

Translate the cube_top div element –200 pixels along the y-axis and rotate it 90° counter-clockwise around the x-axis.

Translate the cube_bottom div element 200 pixels along the y-axis and rotate it 90° around the x-axis.

13

Save your changes to style sheet file and open cf_home.html in your browser. Verify that the layout of your page matches Figure 4-68 including the center cube with the five faces of photos and text.

@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 4
Case Problem 3

Design Styles for the Chupacabra Music Fest
Author:
Date:

Filename: cf_effects.css

/* HTML Styles */

/* Body Styles */

/* Body Header Styles */

/* Aside Styles */

/* Cube Styles */

Explanation / Answer

/* To set background image */
body {
background-image: url("cf_back1.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* To set the background color of the page body */
body {
background-color:rgba(255,255,255,0.3);
}

/* To set the background color of the body header */
h1 {
background-color:rgba(51,51,51,0.3);
}

/* To set styles for Aside section */
.Aside {
border-style: double;
border-width: 10px;
border-radius: 30px;
border-color: rgba(92,42,8,0.3);
}

/* To set styles for Aside header */
.h1_Aside {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

/* To set perspective */
perspective: 450px;

/* To rotate for Aside elements */
transform: rotateY(25deg);
transform: rotateY(-25deg);

/* To set styles Cube */
#cube {
position: relative;
height: 400px;
width: 400px;
margin-top: 180px;
margin-bottom: 150px;
margin-right: auto;
margin-left: auto;
perspective: 450px;
}

#cube_bottom {
position: absolute;
height: 400px;
width: 400px;
}

#cube_top {
position: absolute;
height: 400px;
width: 400px;
}

#cube_right {
position: absolute;
height: 400px;
width: 400px;
}

#cube_left {
position: absolute;
height: 400px;
width: 400px;
}

#cube_front {
position: absolute;
height: 400px;
width: 400px;
}

/* To transfore cube elements */
#cube_front {
transform: translateZ(-50px);
}

#cube_left {
transform: translateX(-200px);
transform: rotateY(90deg);
}

#cube_right {
transform: translateX(200px);
transform: rotateY(-90deg);
}

#cube_top {
transform: translateY(-200px);
transform: rotateY(-90deg);
}

#cube_bottom {
transform: translateY(200px);
transform: rotateX(90deg);
}

Related Questions

Navigate

• Browse (All)
• Browse R
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.