For this project, we are to apply a CSS shadow effect to the header within the web page created. We are to also apply what is called "absolute positioning" to the header, which definitely displays, depending on the positioning setting choosen, a layered like affect to the header. After applying the shadow effect to my header, I could see a major difference in the headers appearance before and after. At least for me, using two or more different colors for the shadow effect and applying positioning can display a unique, "double" header. I look forward to experimenting more with shadow effects.
Within the elements to include for this project, the required "background-strip" image was definitely one of my favorites. We are to choose an image and apply CSS3 background elements, choosing between left, right, or top positioning. We can also choose what is known as a "fixed background" image in the center of the page. Applying the background-strip left me with way to many choices to choose from, as they all seem to provide great design to a page. I definitely look forward to applying different types of styles of background-strips in the future.
For one of our table elements to be included in our page, I decided on the topic of "CSS :hover Selectors". The following are different types of :hover selectors to choose from in CSS:
| A:Hover |
|---|
| unvisited link - a:link |
| visited link - a:visited |
| mouse over link - a:hover |
| selected link - a:active |
The CSS :hover selector can also be applied to paragraphs and headers.
For one of our table elements to include in our page, I decided on the topic of "CSS Rounded Corners". With CSS "border-radius", the following are different types of rounded corner styles to choose from:
| Rounded Corners |
|---|
| Four values - border radius |
| Three values - border radius |
| Two values - border radius |
| Elliptical corners - border radius |
We are also to include a "width" attribute in our sections of text. The width attribute is generally applied to "div sectioning" within this project. It appears to allow the sections of the text created in my page to "box" together, allowing for more control over a "vertical or horizontal" type display. Along with absolute positioning, the width attribute assist with controlling the overall display of a particular section. Both elements combined within a div definitely provide a way to really create a unique page display. I definitely could use more experience with these elements, but mainly because it seems like a lot of fun to apply them in a pages CSS3.
Another element to be included in this project is a use of image overlapping displayed on the web page created. Using what is called a "z-index", we are to choose at least two images to overlap each other. It is noted that using fairly small images might be best, displaying a bit of a "logo" type image. I choose to overlap four images in order to experiment a bit more with the z-index and absolute positioning. In my opinion, given the right elements choosen, the resulting display can be quite interesting. I would like to experiment more with different sized images to overlap, depending on the theme of the page.