This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
Unit04 Advanced CSS
Review horizontal desktop navigation
Use two column phone button navigation
Implement multiple Google fonts in the page design
Implement CSS gradients
Implement CSS shadows
Implement CSS textures
Implement CSS rounded corners
Implement CSS transparency
Implement CSS transitions
Implement CSS large desktop wrappers
In this unit you will be expanding your capabilities to spice up a site appropriately using advanced CSS techniques. I will introduce you to a few techniques and then you can explore additional ones on your own. In this series I demonstrate a site that has all the the required elements for the assignment and then I show you how to implement each one individually. Unlike previous tutorials, I don't show you how I built the example site but rather I show each item in isolation. It's up to you to implement these in your own work as appropriate.
Box Shadows Explained
Box Shadows can have multiple variations from an outer glow to a cast shadow from a spotlight to a soft shadow, to an inset shadow.
A positive value for the horizontal offset creates a shadow to the right, a negative length to the left.
A positive value for the vertical offset pushes the shadow down, a negative one up.
The larger the value, the more the shadow’s edge is blurred. Negative values not allowed!
Positive values cause the shadow shape to expand in all directions. Negative values contract.
This is the color of the shadow. Sometimes an rgba value is used to provide more control.
In addition to these values you can append the word "inset" at the end and cause the Shadow to be inside the box rather than outside. box-shadow: 0 0 4px rgba(0,0,0,.7) inset;