- Practice writing and employing box styling with CSS
- Explore
border,box-shadow,background, and thelinear-gradient()CSS function
As you have already noticed (as an non-programming end-user of the internet) the majority of websites out there use boxes to represent content. Sometimes we see the borders of these boxes, sometimes they have a slight 3D effect, and sometimes they change color when we hover over them.
Now, being the web programmer that you are, you know there is good reason for this! The DOM, via direction from HTML and CSS, defaults to box shapes for the majority of its elements. As such, there are many ways we can manipulate, add effects to, and style our HTML boxes.
Using a 'before' and 'after' example, we will transform a page into a column based presentation. In doing so, we will practice our skills writing re-usable, rule-based, CSS.
This lab is a great time to practice editing CSS directly in Chrome Inspector Tools. This allows us to change properties/values on the fly and see what they look like on screen before going back and editing the actual CSS file.
- Examine what we have rendering already by opening
index.htmlin the browser - Provide a solid
borderfor all of our<img>tiles - Create a raised 3D effect for each of our sections using
box-shadow(the green section has already been implemented) - Provide a
backgroundtexture for the whole page, usingimages/white-wood.jpg - Implement an over-the-top, mind-blowing,
linear-gradient()effect for all of our section titles
For our border, use the border property. In our example, we made a 1px
wide solid dark gray line. You may notice this messes up the proportioning of
your hogs! This is because the border is being considered outside of the image
elements dimensions. Luckily, there exists an easy remedy for this! The
box-sizing property, with a value of border-box, forces our <img> elements
to include the border in their dimensions.
To implement the box-shadow effect, we recommend you look at the .amiable
class and emulate what is being done there for both .indifferent as well as
.dubious. Take a look at box-shadow to see why we have so many
values for the attribute. We chose to provide a shadow that is slightly darker
than the surface, to simulate the effect of less direct lighting.
The background can be edited using the background property in
our body, html section. Use the white-wood.jpg texture in our images/
folder and make sure to use no-repeat and set the background-size value to
cover. Following, examine how adding the fixed value alters the behavior of
scrolling. Choose whichever you like more!
For our final feature, we are going to add a cheesy, questionably distracting,
linear-gradient to our section headers. To do this, we provide the
linear-gradient() as the value to background, i.e.: background: linear-gradient(). While the documentation shows us many
different ways we can use linear-gradient, we will only need to provide three
values in ours: gradient direction, start color, and end color. For example, if
we wanted to make a linear gradient that transitioned from left to right, white
to black, we would do the following:
background: linear-gradient(to right, #FFF, #000).
To reference the documentation when going about solving this lab!
View Box Style Lab on Learn.co and start learning to code for free.