Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Can some answer the following questions, thank you! Go to the sf_effects.css file in your editor. Within the Body Header Styles section, create a style

Can some answer the following questions, thank you! Go to the sf_effects.css file in your editor. Within the Body Header Styles section, create a style rule for the body element to add drop shadows to the left and right border of the page body with an offset of 10 pixels, a blur of 50 pixels, and the color rgb(51, 51, 51). Note that the right border is a mirror image of the left border. 4 Go to the Navigation Tabs List Styles section. Amy has created a navigation list with the class name tabs that appears at the top of the page with the body header. Create a style rule for the body > header nav.tabs selector that changes the background to the image file sf_back1.png with no tiling, centered horizontally and vertically within the element and sized to cover the entire navigation list. 5 Amy wants the individual list items in the tabs navigation list to appear as tabs in a recipe box. She wants each of these tabs to be trapezoidal in shape. To create this effect, youll create a style rule for the body > header nav.tabs li selector that transforms the list item by setting the perspective of its 3D space to 50 pixels and rotating it 20 around the x-axis. 6 As users hover the mouse pointer over the navigation tabs, Amy wants a rollover effect in which the tabs appear to come to the front. Create a style rule for the body > header nav.tabs li selector that uses the pseudo-element hover that changes the background color to rgb(231, 231, 231). 7 Go to the Left Section Styles section. Referring to Figure 4-67, notice that in the left section of the page, Amy has placed two vertical navigation lists. She wants these navigation lists to have rounded borders. For the vertical navigation lists in the left section, create a style rule for the section#left nav.vertical selector that adds a 1-pixel solid border with color value rgb(20, 167, 170) and has a radius of 25 pixels at each corner. 8 The rounded corner also has to apply to the h1 heading within each navigation list. Create a style rule for h1 elements nested within the left section vertical navigation list that sets the top-left and top-right corner radii to 25 pixels. 9 Go to the Center Article Styles section. The article element contains an image and brief description of the Apple Bavarian Torte, which is the subject of this sample page. Create a style rule for the section#center article selector that adds the following: a) a radial gradient to the background with a white center with a color stop of 30% transitioning to rgb(151, 151, 151), b) a 1-pixel solid border with color value rgb(151, 151, 151) and a radius of 50 pixels, and c) a box shadow with horizontal and vertical offsets of 10 pixels with a 20-pixel blur and a color of rgb(51, 51, 51). 10 Go to the Blockquote Styles section. Amy has included three sample reviews from users of the Save your Fork website. Amy wants the text of these reviews to appear within the image of a speech bubble. For every blockquote element, create a style rule that does the following: a) sets the background image to the sf_speech.png with no tiling and a horizontal and vertical size of 100% to cover the entire block quote, and b) uses the drop-shadow filter to add a drop shadow around the speech bubble with horizontal and vertical offsets of 5 pixels, a blur of 10 pixels and the color rgb(51, 51, 51). 11 Amy has included the photo of each reviewer registered on the site within the citation for each review. She wants these images to appear as circles rather than squares. To do this, create a style rule for the selector cite img that sets the border radius to 50%. css: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 4 Case Problem 2 Save your Fork Graphic Design Styles Author: Date: Filename: sf_effects.css */ /* Body Header Styles */ /* Navigation Tabs List Styles */ /* Left Section Styles */ /* Center Article Styles */ /* Blockquote Styles */

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Database Design Using Entity Relationship Diagrams

Authors: Sikha Saha Bagui, Richard Walsh Earp

3rd Edition

103201718X, 978-1032017181

More Books

Students also viewed these Databases questions

Question

Understanding Groups

Answered: 1 week ago