Question

In: Computer Science

For all img elements create a style rule that applies a sepia filter with a value...

For all img elements create a style rule that applies a sepia filter with a value of 1. Add a black box shadow with horizontal and vertical offsets of 0 pixels and a blur radius of 20 pixels.

Create the following style rules for the five image elements:

  1. For the img1 image, translate the image -150 pixels along the z-axis.
  2. For the img2 image, rotate the image 90 degrees around the x-axis and translate the image -150 pixels along the z-axis.
  3. For the img3 image, rotate the image -90 degrees around the y-axis and translate the image 150 pixels along the z-axis.
  4. For the img4 image, rotate the image 90 degrees around the y-axis and translate the image 150 pixels along the z-axis.
  5. For the img5 image, rotate the image -90 degrees around the x-axis and translate the image -150 pixels along the z-axis.

Solutions

Expert Solution

Source Code:

<html>
<head>

<style>
    #i1,#i2,#i3,#i4,#i5{
      filter:sepia(1);
      box-shadow: 0px 0px 20px black;
}
#i1{
  transform: translateZ(-150px);
}
#i2{
  transform: rotateX(90deg) translateZ(-150px);
}
#i3{
  transform: rotateY(-90deg) translateZ(150px);
}
#i4{
  transform:rotateY(90deg) translateZ(150px);
}
#i5{
  transform:rotateX(-90deg) translateZ(-150px);
}
</style>
</head>

<body>
<div class="images">
    <img src="https://androidcommunity.com/wp-content/uploads/2016/10/Google-Pixel-Sample-Photo-7-200x200.jpg" id="i1" /><br/><br/>
    <img src="https://asialyst.com/fr/wp-content/uploads/2015/03/mt-sample-background-200x200.jpg" id="i2" /><br/><br/>
    <img src="https://androidcommunity.com/wp-content/uploads/2019/05/Honor-20-Pro-Sample-Photo-200x200.jpg" id="i3" /><br/><br/>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQhe8zaG-C4WQR9F51jhq-z8_M2pblJXEGEGA&usqp=CAU" id="i4" /><br/><br/>
    <img src="https://196034-584727-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/09/Project-Engineer-200x200.jpg" id="i5" /><br/><br/>
</div>
</body>
</html>

Related Solutions

Create a style rule for the body element that: Sets the width to 90% of the...
Create a style rule for the body element that: Sets the width to 90% of the browser window, ranging from a minimum width of 640 pixels up to a maximum width of 1024 pixels. Sets the top/bottom margin to 30 pixels and the left/right margin to auto. Displays the body as a CSS grid. Creates six grid columns each with a width of 1fr. Creates five grid rows with widths of 50 pixels, 30 pixels, 1fr, 1fr, and 100 pixels....
1. Go to the Footer Styles section and create a style rule that displays the footer...
1. Go to the Footer Styles section and create a style rule that displays the footer only when both margins are clear of floating objects. 2. Go to the Topics Styles section. This section sets the styles for a list of four topics describing what the company is offering. Karen wants this list to also be displayed horizontally on the page. For list items within the ul element with the id topics, create a style rule to: a) display the...
Create a form using the following HTML elements at a minimum. Style the form in your...
Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...
1. Choose the statement below that is not true: A: The Empirical rule applies to all...
1. Choose the statement below that is not true: A: The Empirical rule applies to all normal distributions. B: Both the Poisson and the exponential distributions are characterized by only their mean. C: All of the statements are true. D: Poisson distributions tend to be less useful the higher the mean is. E: The exponential distribution tends to be a good fit for counting the discrete number of events per time interval. 2.Combining the standard deviations of two negatively correlated...
Python please! Create one program to include all 10 elements: Create a function that prints a...
Python please! Create one program to include all 10 elements: Create a function that prints a sentence passed to the function as parameter. On the next line, print the same sentence without the 1st and the last character, use string slicing. Use the following sentence: This is the sentence. Given a string: This string was copied in an article. Replace the relevant words to read as follows: This string was discovered in the article xyz. Given a string: This string...
Think of all the elements that produce value in a visit to a private practice physician’s...
Think of all the elements that produce value in a visit to a private practice physician’s office, from making the appointment to any follow-up that occurs after the visit. Which of those elements could be managed in a way that would give the practice a competitive advantage over other physicians’ offices? How would you choose the elements most susceptible to creating such an advantage?.
Create a brief argument using all the Toulmin elements and label each element in your argument.
Create a brief argument using all the Toulmin elements and label each element in your argument.
Create a value proposition for a low-cost solar panel car with all the basic electricity requirements...
Create a value proposition for a low-cost solar panel car with all the basic electricity requirements in areas of the world not on traditional electric grids. (400-500 words)
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT