2D Transforms test Dr. Foltz December, 2020 Transforms define the state of an element and occur outside the document flow. There are a variety of transforms. All examples in this document use the :hover property for simplicity. Since the transform property actually alters the appearance of an element onscreen, screen shots are inadequate to describe the impact. Scale The scale transform makes an element larger or smaller. .scale:hover { transform: scale(1.

Dr. Foltz December, 2020 3D transforms alter an element in a three-dimensional space. Still images simply do not capture what happens! (Please note that the example in our textbook is quite incomplete; look at the full example in the download files). Basic Steps Make a space within which to rotate Make a thing to rotate Make the front and back of the thing. Add a transform to rotate when the state changes.

Background images are tricky: it can be difficult to find a text color that is legible over the image. Also, unless done properly, the background image will be too large or will repeat itself over and over. The following CSS demonstrates a background image. Notice the CSS is attached to the body; we are creating a background image for the entire body of the document. Please notice the background-image element. The format is quite different from a normal image element!

Dr. Foltz January, 2021 The CSS background-clip property defines how far a background should extend within an element. There are several possible values: border-box: This is the default. The background will extend behind the border. padding-box: The background extends to the inside edge of the border. content-box: The background only extends to the edge of content. initial: Resets to default value. inherit: Inherit the property from parent element.

Dr. Foltz December, 2020 There are several different ways to represent color within HTML and CSS. These include: Color names We can simply identify colors by name, such as red, blue, or green. Browsers may use different variations for the actual colors, however. This is NOT recommended for production; however, it’s the easiest way to learn HTML and CSS. body {background-color: blue;} RGB values We specify values for the amount of red, green, and blue.

Dr. Foltz December, 2020 CSS3 Attribute Selectors The attribute selectors allow the designer to select HTML elements with specific values. The following example will place a green border around every image that has an alt attribute. HTML <img src="image.jpg" alt="image"> CSS img:[alt] {border: thick solid green}; Specific values may also be selected. HTML <img src="image.jpg" alt="wow"> CSS img:[alt="wow"] {border: thick solid green}; Missing values can be targeted using the :not() selector.

Dr. Foltz November, 2020 It is possible to create and use variables within CSS. These could be used to declare a value once and then to reuse that value throughout a large site. As an example, a web site author could define primary site colors using variables, then simply reference these variable names throughout the rest of the site. This would only be a benefit for large sites where the color codes are used repeatedly.