Notes from Code School's Front End Formation: Level 5
Fonts and Interactions
- Font Face
- Transforms
- Transitions
- Progressive Enhancement
Font Face
Using @font-face, we have the ability to use online fonts on our websites.
E.g.
@font-face {
font-family: 'OpenSansRegular';
src: url('opensansregular-webfont.eot');
font-style: normal;
font-weight: normal;
}
1. <font-family> We will specify the font-family, which is what we'll use to call the font.
2. <src> We'll add the location of the font files through the src property
3. <font-style> We will specify the font style to be normal.
4. <font-weight> We'll specify the font weight to be normal.
To use the @font-face property, specify the font-family to be the same name as what you assigned in the @font-face property above.
e.g.
h1 {
font-family: 'OpenSansRegular';
}
With the @font-face fonts, just like any other font declaration, we'll want to add fallback fonts, incase that font isn't supported. E.g.
h1 {
font-family: 'OpenSansRegular', Hevetica, Arial, sans-serif;
}
We can also use a varying weights of @font-face fonts:
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: normal;
}
h1 {
font-family: 'OpenSansBold';
}
We can alter the @font-face call in order to use the font-weight and font-style properties as usual. For example, an alternative way to use the bold version of the font 'OpenSansRegular' do this:
1. Start by adding the regular version of the font-family.
2. Point the <src> to the bold version of the font
3. Change the font-weight to 'bold'
@font-face {
font-family: 'OpenSansRegular';
src: url('OpenSansBold-webfont.eot');
font-style: normal;
font-weight: bold;
}
And to call the bold version (assumes you've already declared somewhere that the base font for h1 should be 'OpenSansRegular'):
h1 {
font-weight: bold;
}
Transforms
Using the transform property in CSS3 we can translate, rotate, scale, and skew elements in CSS.
Translate
Translate allows you to create a 2D translation using the transform property. E.g.
.element {
transform: translate(20px, 30px);
}
- Translate the element 20px to the right (moves on the x-axis)
- Translate the element 30px down (moves on the y-axis)
transform: translate(<tx>, <ty>);
- <tx> is a <transition value> for the x-axis, which can be either a length or a percentage
- <ty> (optional) is a <transition value> for the y-axis, which can be either a length or a percentage. If not specified, the value is 0.
Translate can also be expressed like this and will produce the same result:
.element {
transform: translateX(20px);
}
.element {
transform: translateY(30px);
}
Rotate
With rotate, you can rotate and element clockwise around its origin by the specified angle. E.g.
.element {
transform: rotate(45deg);
}
 |
| The element is rotated 45 degrees |
Scale
With scale, you can do a 2D scale by a specified unitless number. E.g.
.element {
transform: scale(1.2);
}
transform: scale(<sx>, <sy>)
The scale transform takes two arguments, a unitless number for the x-axis, and an optional unitless number for the y-axis. If <sy> is not specified, it will default to the value of <sx>. You can also scale and X and Y values individually. E.g.
.element {
transform: scaleX(1.2);
}
.element {
transform: scaleY(0.3);
}
Skew
With skew, an element is skewed around the x or y axis by the angle specified. In this case, x and y must be skewed individually. E.g.
.element {
transform: skewX(-25deg);
}
 |
| The element is skewed -25 degrees along the x-axis. |
Skew-x and skew-y take angle arguments.
Example 1:
.element {
transform: skewX(25deg);
}
Example 2:
.element {
transform: skewY(-85deg);
}
Transition
CSS3 provides transitions, which allow you to transition between two states of a specified element.
For example, if you have an element with a black background, but when we hove over it, we want it to change to blue. We don't want a quick, jarring change but a gradual one.
.element {
background-color: black;
transition: background-color 0.2s ease-in-out;
}
.element:hover {
background-color: blue;
}
The background-color transitions from black to blue over a period of .2 seconds.
Values of Transition Property
transition: <property> <duration> <timing function> <delay>
<property> The name of the CSS property you actually want to transition (optional)
<duration> The duration of the transition. The default value is 0s, or zero seconds.
<timing function> The timing of the transition itself (optional)
Timing Function Keywords aka transition styles:
- ease
- ease-in
- ease-in-out
- linear
- cubic bezier
- step-start
- step-end
- steps()
How to set transition values individually:
.element {
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-n-out;
transition-delay: 0.1s;
}
By using the 'all' keyword, we can transition multiple properties at once. In this case we'll transition both the background color and the text color on a button when someone hovers over it.
.element {
background-color: black;
color: white;
transition: all 0.2s ease-n-out;
}
.element:hover {
background-color: grey;
color: black;
}
Progressive Enhancement
The term "progressive enhancement" refers to the use of the newer features that add to the experience in modern browsers that support those features, but doesn't detract from the experience in older browsers. An example of progressive enhancement:
.element {
background: #ccc;
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0.75);
}
If a browser supports these properties it would look like this:
 |
| .element using CSS3 as shown in browsers that support CSS3 |
If the border-radius and box-shadow properties are not supported, we still get a useable design, which is what progressive enhancement is all about.
 |
| .element using CSS3 as shown in browsers that DO NOT support CSS3 |
Progressive enhancement is important to keep in mind because we want to make sure that we are creating experiences that degrade gracefully for browsers that don't support newer features.
No comments:
Post a Comment