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:

For the img1 image, translate the image -150 pixels along the z-axis.
For the img2 image, rotate the image 90 degrees around the x-axis and translate the image -150 pixels along the z-axis.
For the img3 image, rotate the image -90 degrees around the y-axis and translate the image 150 pixels along the z-axis.
For the img4 image, rotate the image 90 degrees around the y-axis and translate the image 150 pixels along the z-axis.
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>

venereology answered 2 hours ago

Next > < Previous

Related Solutions

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...

1/ Certain style properties (in CSS) are passed down from elements to the elements they contain...

1/ Certain style properties (in CSS) are passed down from elements to the elements they contain (their descendents). Inheritance Ancestors Parents Descendents 2/ A characteristic of the element, such as size, color, thickness, and so on. Style rule Property Selector rule Value 3/ The part of a style rule that identifies the element or elements to be affected. Value Declaration Selector Property 4/ How the document is delivered to the user, whether rendered on a computer or mobile device screen,...

What are the key elements of the HIPAA Security Rule?

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 MyArrayForString.java to handle 'String' type elements and create MyArrayForChar.java to handle 'char' type elements. Test...

Create MyArrayForString.java to handle 'String' type elements and create MyArrayForChar.java to handle 'char' type elements. Test them in MyArrayDemo.java. I need this in java on textpad. There are two files, both have instructions in them on what to add in the code. They are posted below. public class MyArrayForDouble { double[] nums; int numElements; public MyArrayForDouble() { // Constructor. automatically called when creating an instance numElements = 0; nums = new double[5]; } public MyArrayForDouble(int capacity) { // Constructor. automatically...

Create MyArrayForString.java to handle 'String' type elements and create MyArrayForChar.java to handle 'char' type elements. Test...

Create MyArrayForString.java to handle 'String' type elements and create MyArrayForChar.java to handle 'char' type elements. Test them in MyArrayDemo.java. I need this in java on textpad. There are two files, both have instructions in them on what to add in the code. They are posted below. I ONLY NEED TO TEST add() linearSearch() remove() and printArray(). public class MyArrayForDouble { double[] nums; int numElements; public MyArrayForDouble() { // Constructor. automatically called when creating an instance numElements = 0; nums =...

Create a brief argument using all the Toulmin elements and label each element in your argument.

Subjects