Article Styles

Go to the "Article Styles" section. Here you$$ll create borders and backgrounds for the article that Linda Ferris$-$White wrote about her mother. Create a style rule for the article element that:

Displays the background image file tb$\_$back$6.$png placed at the bottom$-$right corner of the element with a size of $15\%$ and no tiling.

Add an $8$ pixel double border with color value rgb$(147,116,68)$ to the right and bottom sides of the article element.

Creates a curved bottom$-$right corner with a radius of $80$ pixels.

Add an interior shadow with horizontal and vertical offsets of $10$ pixels, a $25$ pixel blur, and a color value of rgba$(184,154,112,0\mathrm{.}7).$

Footer Styles

Kevin wants a gradient background for the page footer. Go to the "Footer Styles" section and create a style rule for the footer that adds a linear gradient background with an angle of $325\backslash$deg $,$ going from the color value rgb$(180,148,104)$ with a color stop at $20\%$ of the gradient length to the value rgb$(40,33,23)$ with a color stop at $60\%.$

Next, you will create the design styles for individual pages about Kathleen Ferris and Linda Ferris$-$White. A preview of the content of the Kathleen Ferris page is shown in Figure $469.$

A webpage of Kathleen Ferris displays three images. The first image is displayed at the top, the second image displayed at the bottom left is rotated to negative $50$ degree along the y axis. The third image displayed at the bottom right is rotated $50$ degree along the y axis. Figure $4-69$

Go to the tb$\_$kathleen.html file and create links to the tb$\_$base.css$,$ tb$\_$styles$4.$css$,$ and tb$\_$visual$4.$css files. Study the contents of the file and then close it$.$

Transformation Styles

Go to the tb$\_$visual$4.$css file and scroll down to the "Transformation Styles" section and add a style rule for the article element to set the size of the perspective space to $800$ pixels.

Create a style rule for the figure$1$ figure box to translate it $120$ pixels along the z$-$axis. Create a style rule for the figure$2$ figure box to translate it $20$ pixels along the y$-$axis and rotate it $50\backslash$deg around the y$-$axis. Create a style rule for the figure$3$ figure box to translate it $30$ pixels along the y$-$axis and rotate it $50\backslash$deg around the y$-$axis.

Filter Styles

Next, go to the "Filter Styles" section to apply CSS filters to the page elements. Create a style rule for the figure$1$ figure box that applies a saturation filter with a value of $1\mathrm{.}3.$ Create a style rule for the figure$2$ figure box that sets the brightness to $0\mathrm{.}8$ and the contrast to $1\mathrm{.}5.$ Create a style rule for the figure$3$ figure box that sets the hue rotation to $170\backslash$deg $,$ the saturation to $3,$ and the brightness to $1\mathrm{.}5.$