Skip to main content
黯羽轻扬Keep Growing Daily

Learning Notes on 'The Book of CSS3'

Free2015-04-27#CSS#css3

This article briefly introduces CSS3 media queries, text effects, gradients, transforms, transitions, animations, flex layout, etc., including tutorial organization and online resource compilation.

1. Browser Prefixes

E{
    -moz-name : value;      /* Firefox */
    -ms-name : value;       /* IE */
    -o-name : value;        /* Opera */
    -webkit-name : value;   /* WebKit */
    name : value;           /* Standard way to adapt to future */
}

2. Media Queries

1. Three Ways to Use Media Queries

  1. In head section

    <link href="css.css" rel="stylesheet" media="mediaType and (expr)" />

  2. At the beginning of CSS file

    @import url("css.css") mediaType and (expr);

  3. Inside style rules

    @media mediaType and (expr) {
    /* styles */
}

2. Values of mediaType

Only all (meaningless, might as well not add it), screen, and print are widely supported by browser vendors. Optional values also include:

  • braille: Braille

  • embossed: Braille printing

  • handheld: Handheld devices, not very useful

  • projection: Projection devices

  • speech: Speech

  • tty: Devices displaying monospace fonts, such as teleprinters

  • tv: Television

So including the first three that are widely supported, there are 10 optional values in total

3. Values of expr

The most commonly used are min-[device-]width and max-[device-]width, for example:

@media screen and (min-width : 800px) {
    /* Apply this style when browser window width >= 800px */
}
/* 
 * General breakpoint values:
 * Below 480px ~ Mobile browser
 * Above 800px ~ Desktop browser
 * 480px to 800px ~ Tablet browser
 */

In addition, there are other properties such as orientation, device-aspect-ratio, device-pixel-ratio, etc. For more information, please check Frontend Observation: media type and media query

4. Constructing Complex Expressions

You can use and and only to construct complex expressions

  • (expr1) and (expr2): AND

  • only (expr): Used to hide stylesheets from devices that don't support Media Query but do support Media Type. For more information, please check Cnblogs: Media Queries Explained

  • mediaType1 (), mediaType2 (): OR

5. Support

[IE9+] supports CSS3 standard, but for non-standard properties, such as device-pixel-ratio, IE11 only partially supports it. For more support differences, please check Can I use

3. Using Web Fonts

The safest font import method:

@font-face {
    font-family : "font";
    src : url("font.eot");
    src : local(" "),   /* Note that quotes wrap a space, can also be other single characters */
          url("font.woff") format("woff"),
          url("font.ttf") format("truetype"),
          url("font.svg#font") format("svg");
}

There are similar methods, please check Fontspring

There is a useful @font-face generator that can convert font formats and generate CSS code, please check Fontsquirrel

4. Text Effects

1. 3D Effect

Mainly achieved using text-shadow property, [IE10+] supports, syntax as follows:

text-shadow : xOffset yOffset blur-radius color;

Specific code:

.shadow1 {
    text-shadow : 
        0 -2px 3px #fff,
        0 -4px 3px #aaa,
        0 -6px 6px #666,
        0 -8px 9px #000;
}

.shadow2 {
    color : #fff;
    text-shadow : 
        0 2px rgba(0, 0, 0, 0.4),
        0 4px rgba(0, 0, 0, 0.4),
        0 6px rgba(0, 0, 0, 0.4),
        0 8px 0 rgba(0, 0, 0, 0.4);
}

.shadow3 {
    background-color : #565656;
    color : #333;
    text-shadow : 0 1px 0 #777, 0 -1px 0 #000;
}

Example:

span.shadow1 { text-shadow : 0 -2px 3px #fff, 0 -4px 3px #aaa, 0 -6px 6px #666, 0 -8px 9px #000; } span.shadow2 { color : #fff; text-shadow : 0 2px rgba(0, 0, 0, 0.4), 0 4px rgba(0, 0, 0, 0.4), 0 6px rgba(0, 0, 0, 0.4), 0 8px 0 rgba(0, 0, 0, 0.4); } span.shadow3 { background-color : #565656; color : #333; text-shadow : 0 1px 0 #777, 0 -1px 0 #000; } .show { background-color : #fafafa; display : block; font-weight : bold; font-size : 60px; padding : 0.2em; }

shadow1: An Yu Qing Yang shadow2: An Yu Qing Yang shadow3: An Yu Qing Yang

P.S. Large font sizes look better for 3D effects; small text shadow effects are hard to see clearly

2. Controlling Text Overflow

text-overflow : clip/ellipsis ~ clip/ellipsis (...), for example:

p {
    /* To display ellipsis on one line, all 3 properties below are indispensable */
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow : hidden;
}

Support: [IE8+] supports

3. Controlling Long Word Automatic Line Break

word-wrap : normal/break-word ~ no line break, will break container/automatic line break

Support: [IE6+] all support, of course, only effective for English words, not for Chinese

5. Border Styles

  1. border-radius: [IE9+] supports

  2. border-image: The effect is very attractive, [IE11+] supports, although jQuery plugins can barely support it, the effect is also barely acceptable. For more information, please check Zhang Xinxu Blog: CSS3 border-image explained, applied, and jQuery plugin

  3. box-shadow: [IE9+] supports, specific usage please check W3School: CSS3 box-shadow property

6. Transparency

  1. opacity : 0.0 - 1.0; [IE9+] supports, IE8 partially supports

  2. color : rgba(r, g, b, a); [IE9+] supports

7. Gradients

Linear gradient/radial gradient, [IE10+] supports, specific usage please check CSS-Tricks

8. Transforms, Transitions, Animations

There are several similar properties, differences as follows:

  • transform: Transform. 2D/3D transforms, translate, rotate, skew, scale

  • translate: Translate. Sub-property of 2D transform

  • transition: Transition. Triggered by events, such as hover, active, etc.

  • animation: Animation. Define keyframes, then apply animation using animation

You can use these things to implement common cool effects, for example:

  1. Transition can make simple animations proceed smoothly, such as link text "floating" to the right when hovering, div width slowly increasing to specified value, etc.

  2. 3D transform can display the back side, such as mouse entering, showing image flip effect

  3. Transform can achieve sash effects, such as the common diagonal "fork me on github" in the upper right corner. For specific implementation, please check Cnblogs: Add "Fork me on Github" sash to your blog

9. Flex Layout

There is a very powerful complete tutorial: Frontend Development Blog: CSS3 Flexbox Complete Tutorial

10. Online Resources

  • Can I Use: [IE8+] and other browsers' support for CSS/HTML5 properties

  • Modernizr: JS library that detects browser support for HTML5 and CSS3 features, the best choice for graceful degradation

  • Code generation tools:

  • Free fonts: Fontsquirrel: Large number of English fonts available for free download

  • CSS3 tutorials/documentation: CSS3 Info, foreign forum, articles update relatively slowly, seems to be declining

  • CSS3 new technologies: MDN, source code downloadable without login

Reference Materials

  • "THE BOOK OF CSS3"

  • Various senior bloggers' posts

Comments

No comments yet. Be the first to share your thoughts.

Leave a comment