New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 4, Problem 21RA
Program Plan Intro
To create a style rule to set translate -30 pixels along the y-axis and rotate it -50 degree around the y-axis in figure3 of figure box.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
1. Create a div element with a width and height of 500 px. Create a diagonal linear gradient using colors of the rainbow- Red, Orange, Yellow, Green, Blue, Indigo, Violet.
2. Also create another div element with a width and height of 600 px. create a radial gradient with three colors. Start in the bottom left corner with the colors changing as they move along the gradient line to the right.
create another div element with a width and height of 600 px. create a radial gradient with three colors. Start in the bottom left corner with the colors changing as they move along the gradient line to the right.
have three versions of the image with the same height and width. All three versions are placed inside of a figure element.
three images should have margin.
the first version should have an invert filter, with a text on the bottom of it. The text should have background opacity, border, padding, different font-size, and font color.
the second version should have a blur filter, with a text in the middle of it. The text should have background opacity, different font size and color, padding, box shadow, and a hyperlink with background color, font color, and padding.
the third version must have a linear gradient filter, have at least three paragraphs with different width and placed in different places on the webpage, and have a title in the center of webpage.
Chapter 4 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 4.1 - Prob. 1QCCh. 4.1 - Prob. 2QCCh. 4.1 - Prob. 3QCCh. 4.1 - Prob. 4QCCh. 4.1 - Prob. 5QCCh. 4.1 - Prob. 6QCCh. 4.1 - Prob. 7QCCh. 4.1 - Prob. 8QCCh. 4.1 - Prob. 9QCCh. 4.2 - Prob. 1QC
Ch. 4.2 - Prob. 2QCCh. 4.2 - Prob. 3QCCh. 4.2 - Prob. 4QCCh. 4.2 - Prob. 5QCCh. 4.2 - Prob. 6QCCh. 4.2 - Prob. 7QCCh. 4.2 - Prob. 8QCCh. 4.2 - Prob. 9QCCh. 4.3 - Prob. 1QCCh. 4.3 - Prob. 2QCCh. 4.3 - Prob. 3QCCh. 4.3 - Prob. 4QCCh. 4.3 - Prob. 5QCCh. 4.3 - Prob. 6QCCh. 4.3 - Prob. 7QCCh. 4.3 - Prob. 8QCCh. 4.3 - Prob. 9QCCh. 4 - Prob. 1RACh. 4 - Prob. 2RACh. 4 - Prob. 3RACh. 4 - Prob. 4RACh. 4 - Prob. 5RACh. 4 - Prob. 6RACh. 4 - Prob. 7RACh. 4 - Prob. 8RACh. 4 - Prob. 9RACh. 4 - Prob. 10RACh. 4 - Prob. 11RACh. 4 - Prob. 12RACh. 4 - Prob. 13RACh. 4 - Prob. 14RACh. 4 - Prob. 15RACh. 4 - Prob. 16RACh. 4 - Prob. 17RACh. 4 - Prob. 18RACh. 4 - Prob. 19RACh. 4 - Prob. 20RACh. 4 - Prob. 21RACh. 4 - Prob. 22RACh. 4 - Prob. 23RACh. 4 - Prob. 24RACh. 4 - Prob. 25RACh. 4 - Prob. 1CP1Ch. 4 - Prob. 2CP1Ch. 4 - Prob. 3CP1Ch. 4 - Prob. 4CP1Ch. 4 - Prob. 5CP1Ch. 4 - Prob. 6CP1Ch. 4 - Prob. 7CP1Ch. 4 - Prob. 8CP1Ch. 4 - Prob. 9CP1Ch. 4 - Prob. 10CP1Ch. 4 - Prob. 11CP1Ch. 4 - Prob. 1CP2Ch. 4 - Prob. 2CP2Ch. 4 - Prob. 3CP2Ch. 4 - Prob. 4CP2Ch. 4 - Prob. 5CP2Ch. 4 - Prob. 6CP2Ch. 4 - Prob. 7CP2Ch. 4 - Prob. 8CP2Ch. 4 - Prob. 9CP2Ch. 4 - Prob. 10CP2Ch. 4 - Prob. 11CP2Ch. 4 - Prob. 12CP2Ch. 4 - Prob. 1CP3Ch. 4 - Prob. 2CP3Ch. 4 - Prob. 3CP3Ch. 4 - Prob. 4CP3Ch. 4 - Prob. 5CP3Ch. 4 - Prob. 6CP3Ch. 4 - Prob. 7CP3Ch. 4 - Prob. 8CP3Ch. 4 - Prob. 9CP3Ch. 4 - Prob. 10CP3Ch. 4 - Prob. 11CP3Ch. 4 - Prob. 12CP3Ch. 4 - Prob. 13CP3Ch. 4 - Prob. 1CP4Ch. 4 - Prob. 2CP4Ch. 4 - Prob. 3CP4Ch. 4 - Prob. 4CP4Ch. 4 - Prob. 5CP4Ch. 4 - Prob. 6CP4
Knowledge Booster
Similar questions
- Revise the following img element to attach it to the mapsites image map: <img src=”logo.png” alt=”” />arrow_forwardCreate a style rule for the #fig1 through #fig6 elements which are hovered, that rotates the elements to 0 degrees using the transform property, and applies a 2-second transition to all properties of those figures.arrow_forwardCreate a style rule for img elements within hovered figure elements that: Sets the width to 100% Applies the drop-shadow(offset-x offset-y blur-radius color) and grayscale(0) filter functions, Sets the drop shadow offset to 10 pixels in the horizontal and vertical directions and the blur radius to 20 pixels, Sets the color value to black, and Applies a transition to the change in the filter property over a 2-second interval.arrow_forward
- Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img element within the article element to none. Center the text contained within the ul element belonging to the submenu class. 3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following: Float the nav element on the left page margin. Set the width of the nav element to 130 pixels and the height to 400 pixels. Set the…arrow_forwardHelp me complete this task. Add the following style rules for the form elements. Create a style rule for the fieldset and input elements that sets the bottom margin to 2%. Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold. Create a style rule for the label that sets the display to block and sets padding-top to 3%. Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff). --my css /* Style for body specifies a background color */ body { background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center; font-family: Geneva, Arial, sans-serif; } /* Style for the container element */ #container { width: 90%; margin: 0 auto; }…arrow_forwardThe document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for 20 characters per line only. A light-gray image of yourself must be superimposed over the center of the text as a nested element. Modify this document to add four buttons labeled, respectively, Northwest, Northeast, Southwest, and Southeast. When they're pressed, the buttons must move your image to the specified corner of the text. Initially, your image must appear in the northwest (upper-left) corner of the text. Modify the document described in the previous exercise, using different file names, to make the buttons toggle their respective copies of your image on and off so that, at any time, the document may include none, one, two, three, or four copies of your image. The initial document should have no images shown. (two files)arrow_forward
- What can you use the plot's tight_layout() method for? Select an answer: to automatically adjust subplots so they fit into the figure area to reduce the pixel resolution of the exported image to remove unnecessary legend elements from the plot to move all axis labels into the chart itselfarrow_forwardHow do I get my code to match the requirements in the picture? * {box-sizing: border-box;} body {background-color: #3F2860;font-family: Verdana,Arial, sans-serif;color:#3F2860;margin: 0px;padding: 0px;} #wrapper {background-color:#F5F5F5;width:100%;min-width:0px;max-width : 1540px;margin-left : auto;margin-right : auto;margin: 0px;color:#3F2860;padding: 0px;} #main {margin-left:170px;padding-top:1em;padding-right:2em;Padding-left:1em;background-color:#F5F5F5;height: 500px;} h2{margin-top:0px;text-align: center;} p,h3{ text-align: center; } #nav{ float:left;height:500px;width:25%;position:relative;width:160px;padding:1em;} #hero { text-align: left; margin-left: 10%;} #ylp { float: center; background-repeat: no-repeat; background-position: right; height: 300px; width: 90%; margin-left: 1%;} #image {float:left;width:30%;position:relative;} span{ margin-left: 40px; font-size: small;} #des{ float: right; width: 70%; position: relative;} #mathero { height:…arrow_forwardThe manoeuvre The vertical and slow-move-vertical methods are the ones that need to be practised initially. To move the circle to a place that is 70 pixels to the left of where it is now located in your document, use the moveHorizontal command.arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L