(a)
To set the left position of the red ball to 0 pixels and add a drop shadow with a horizontal offset of −40 pixels, a vertical offset of 20 pixels, a blur radius of 25 pixels, and a color value of rgb(51, 51, 51) at the time 0%.
(b)
To set the horizontal scale of the red ball to 1, use the transform property with the scaleX function at the time 49%.
(c)
To set the left position of the red ball to 380 pixels. Set the drop shadow to an offset of 0 pixels in the horizontal and vertical direction with a blur of 0 pixels and a color value of rgb(51, 51, 51) at the time 50%. Set the value of scaleX function used with the transform property to 0.4.
(d)
To set the value of scaleX function to 1.0at the time 51%.
(e)
To set the left position of the red ball to 0 pixels. Set the offset of the drop shadow to −40 pixels in the horizontal direction and 20 pixels in the vertical direction witha blur of 25 pixels and a color value of rgb(51, 51, 51) at the time 100%.
Want to see the full answer?
Check out a sample textbook solutionChapter 8 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
- 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. 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 rightarrow_forwardPlease answer correctly. Also, I attachs the answer option on the image as well.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
- 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.arrow_forwardCreate an interactive sign-up sheet.● Make the sign-up sheet interactive for the user.● Add a selection element to ask the user for their gender. Add the options “Male,” “Female,” and “Prefer not to mention.”● Use onblur and onfocus to add red borders to the input elements when the user leaves without any input, and a green border if a value is typed and the user is done with the input element.● Upon submission of the form, print all the information that the user has provided on a div or p tag at the bottom of the page.● Use fieldset and legend tag to separate the input part from the output part of the form.● Include a reset button to clear users input and also the information displayed at the bottom of the page.● Feel free also to design your own version and add other features.arrow_forward. Write down the code for Image Slideshow and insert buttons for “Previous” and “Next” pictures to the left and right of the main picture respectively.arrow_forward
- Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forwardEvent Listeners Go to the co_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded: Runs the calcCart() function. Add an event handler to the modelQty field in the cart form that runs the calcCart() function when the field value is changed. A for loop that loops through every option in the group of shipping option buttons, adding an event handler to run the calcCart() function when each option button is clicked. JavaScript Functions Create the calcCart() function to calculate the cost of the customer’s order using field values in the cart form. Within the calcCart() function do the following: Create a variable named orderCost that is equal to the cost of the espresso machine stored in the modelCost field multiplied by the quantity of machines ordered as stored in the modelQty field. Display the value of the orderCost variable in the orderCost field, formatted as U.S.…arrow_forwardCreate a temperature and relative humidity range that is appropriate for your workspace.arrow_forward
- Create the page layout as shown in the screenshot above. In particular, we will call the top, bottom, left, and right portions of the page "header", "footer", "content", and "menu", respectively. Note that the content part of the page is further divided into three blocks: the top block has a heading and a paragraph, and is followed by two blocks - one on the left with two images, and one on the right with three "announcements". The header should use large, white, center-aligned text on a red background with a thick black border. There should be some space between the text and the border. The footer should use green, centered-aligned text on a gray background. The menu has an unordered list on a black background. The background of the list is red. Each item in the list is hyperlinked except for "Home". The unlinked text should be black, and the linked text should be white. When a user mouse over a link, the color of the text should change to black. There should be some space between…arrow_forwardNote: The remaining buttons and paragraphs do not have id attributes. You will need to construct selectors to meet these challenges. For the following I need the Javascript code not the HTML code. In the "myPage" section, select the third button and assign a "click" listener. When clicked, it should change the text content of the third paragraph in the "myPage" section to "Third button clicked." ///////// // HINT: You should look at the HTML carefully to // make your selectors. In the "myPage" section, select the fourth button and assign a "click" listener. When clicked, it should add a class named "fourthPara" to the fourth paragraph in the "myPage" section. In the "myPage" section, select the fifth button and assign a "click" listener. When clicked, it should toggle the class named "fourthPara" for the fifth paragraph in the "myPage" section. In the "myPage" section, select the sixth button and assign a "click" listener. When clicked, it should change the text content of the sixth…arrow_forwardPixel-wise: ST_MapAlgebra. Pixel groupings a/b Nothing abovearrow_forward
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L