Notes from Code School's Front End Formation: Level 4
CSS3
- border radius
- box shadow
- text shadow (not CSS3 but covered here)
- box sizing
- multiple backgrounds
- color
- opacity
- gradients
Border Radius
The border radius property allows us to apply rounded corners to borders.
 |
| grey box |
An example of a regular box (and our box base):
.box {
background: grey;
height: 50px;
width: 200px;
}
To apply rounded corners do:
.box {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
 |
| border radius 15px |
border-bottom-left-radius: 15px;
}
or you can use the shorthand if all the corners are the same:
.box {
border-radius: 15px;
}
If you have different values for the various corners you can use the shorthand like this:
.box {
}
 |
| border-radius applied with each corner a different value |
In addition to using pixel values you can use percentages to set the border-radius property. E.g.
.box {
border-radius: 50%;
}
 |
| border-radius: 50% |
A 50% border-radius gives our rectangle an oval shape, but if the original shape had an equal height and width (square), a border-radius of 50% would make it a circle.
Box Shadow
Allows us to apply a shadow to a given element.
.box {
box-shadow: 1px 2px 2px #000; /* <1px to the right> <2px down> <2px spread radius> <#000 color> */
}
 |
| box-shadow drop shadow |
box-shadow: <inset> <offset-x> <offset-y> <blur radius> <spread radius> <color>;
Properties of Box Shadow
<inset> (optional) If it is not specified (which is the default), a drop shadow is created rather than an inset shadow. If you use the keyword inset then the box will have an inset shadow.
<offset-x> The offset-x value will move the shadow along the x-axis (left or right).
<offset-y> The offset-y value will move the shadow along the y-axis(up or down).
<blur-radius> (optional) The blur-radius alters the blur amount of the shadow, cause it to become bigger and ligher (with a larger value).
<spread-radius> (optional) The spread-radius causes the shadow to expand or shrink to adjust the size of the shadow. (if not specified will be the same size as the element)
<color> (optional) The color of the shadow itself.
What if you want to set the spread-radius, but not the blur-radius? Because blur-radius comes before spread-radius in the shorthand property order, you must specify the blur-radius as 0, the put in a spread-radius. e.g.
.box {
box-shadow: 1px 2px 0 2px #000;
}
Blur-Radius Property vs. Spread-Radius Property
Blue-radius will appead to get lighter/fades as it gets larger and moves away from the element (gradient style). Spread-radius stays the same solid color as it gets larger, creating a sort of dark background.
 |
| blur-radius vs. spead-radius |
Multiple Box-Shadows
You can specify multiple box-shadows on one element through a comma delimited list. The example below has a small black drop shadow and a blue inset shadow.
.box {
box-shadow:
1px 1px 2px #000,
inset 1px 1px 2px blue;
}
 |
| multiple box-shadows, both drop-shadow and inset shadow on one element |
You can also specify negative values:
.box {
box-shadow: -1px -2px 2px #000;
}
This will move the shadow 1px left and 2px up.
 |
| box-shadow using negative values |
Text-Shadow*
The text-shadow property is very similar to box-shadow, but it applies the shadow to text. *(not CSS3 but still important)
<h1>I have a shadow!</h1>
h1 {
text-shadow: 1px 2px 2px #000;
}
text-shadow: <offset-x> <offset-y> <blur-radius> <color> (blur and color are optional)
Box Sizing
The box sizing property is used to change the default CSS box model, which is used to calculate widths and heights of given elements.Box Model Refresher
- The CSS box model references the design and layout of given HTML elements.
- Each element is a "box" which that consists of margins, borders, padding, and the content of the element.
- The "box model" refers to how those properties are calculated in conjunction with one another in order to set the element's dimensions.
The content of the box is where the actual content, the text and images, are located.
The padding clears the area around the content.
The border goes around both the padding and the content.
The margin clears the area around the border.
 |
| CSS3 Box Model |
To calculate the width of a box:
.box {
border: 2px solid black;
margin: 20px;
padding: 10px;
width: 300px;
}
300px content
10px padding(both left and right sides)
2px border(both left and right sides)
300 + 20 + 4 = 324px (total width of box)
The margin is not part of the calculated total of the box because it only affects the area outside the box.
 |
| Calculate box model, content + padding + border |
The box-sizing property is used to change the default CSS box model, which is used to calculate given widths and heights of elements.
Box-Sizing Elements
- content-box
- padding-box
- border-box
Content Box
Content-box is the default value. The width and height are measured by including only the content, but not the border, margin, or padding. (As seen in the example above).
Padding-Box
The width and height include the padding, but do not include the border or margin.
Example 1:
.box {
box-sizing: padding-box;
border: 2px solid black;
margin: 20px;
width: 300px;
}
 |
| padding-box includes the padding in the width property |
In this example, if the padding is still 10px, then the actual content area will be 280px (300px-20px). To calculate the area your box will take up in the design, do 300px(content & padding) + 4px(border) = 304px.
Border-Box
The width and height include the padding and border, but not the margin.
.box {
box-sizing: border-box;
margin: 20px;
width: 300px;
}
Now the actual content area is 276px because 300px - 20px(padding) - 4px(border) leaves only 276px for content.
 |
| Border-Box includes padding and border in the width property. |
No comments:
Post a Comment