Comic Director - Introduction to CSS3

“CSS” is a web-based markup language used to describe the look and format of a website or web application, and is used in combination with HTML5 during development. There have been many exciting additions to CSS3 that provide more flexibility to manipulate an app’s look and formatting, allowing for desktop-style layouts and fancier visual treatments. CSS3 is similar to HTML5 in that it is not an entirely new language, but an addition to the same CSS that developers have been using for over a decade. 

Throughout these lessons, code examples will be shown from an app created for Intel called Comic Director, an app that allows users to create, edit, and share comics.

What’s New

Before CSS3, developers had to rely more on images for design and JavaScript for animations. CSS simply didn’t have the capabilities to achieve the look developers were after, resulting in complex and inflexible layout design. Fortunately, that’s all changed now with CSS3! Many techniques, styles, and design patterns used in modern design software are now possible using CSS3.

Animations

HTML elements can now be animated using CSS3 rules. You can change from one style to another without using Flash or JavaScript. Properties like height, rotation, font size, font color, position, and more can be animated within your app or webpage.

In Example 1, the “transition-all” property allows you to animate different parameters (in this case, height, opacity and color) of an element at the same time. The “ease-out” and “ease-in” properties describe the rate at which the transition will proceed. “Ease-in” means the animation will start slow, and end fast.

/* Transitions */
.transition-all {
/*
        Transition between all CSS properties when changed,
        the transition will last 0.2 seconds
use the ease-out easing curve, so it starts slow and  ends zippy fast
        wait 0 seconds to start the animation
*/
        transition: all 0.2s ease-out 0s;
}
 
.transition-height {
        transition: height 0.3s ease-in;
}
.transition-opacity {
        transition: opacity 0.4s;     
}
.transition-color {
      transition: color 1s ease-in-out;

Example 1: Transition-all

Media Queries

Media queries allow you to adjust CSS properties based on the visiting user’s device display properties.  Properties like width and height of the device’s screen, orientation, aspect-ratio, resolution, and more are all conditions that can be queried. This gives you the ability to optimize the layout and design for multiple devices using a single set of HTML and CSS files.

@media screen and (max-width:999px)
{
      #container { width: 800px; }
     
      #extras
      {
            clear: left;
            float: none;
            margin: 0 0 0 225px;
            width: 550px;
      }
}
 
@media screen and (max-width:480px)
{
      #container { width: 400px; }
     
      #nav
      {
            float: none;
            width: auto;
      }
     
      #content
      {
            float: none;
            width: auto;
            margin: 0;
      }
     
      #extras
      {
            float: none;
            width: auto;
            margin: 0;
      }
     
      .feature-image { display: none; }
}

Shadows

The CSS3 text and box shadow additions allow you to more easily add horizontal or vertical shadows to visual elements and adjust things like the blur distance and the color of the shadow.

/*
        Box Shadow: x offset, y offset, blur, spread (optional), color;
*/
.box-shadow {
        box-shadow: 0 0 10px black;
}
.multiple-box-shadow {
        box-shadow: 1px 1px 1px white, -1px -1px 1px black;
}
.box-shadow-width-opacity-and-spread {
        box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.3);

Example 3: Box shadows

/*
        Text Shadow: x offset, y offset, blur, color;
*/
.text-shadow {
        text-shadow: 0 1px 0 white;
}
.multiple-text-shadow {
        text-shadow: 1px 1px 0 white, -1px -1px 0 black;
}

Example 4: Text shadows

Fonts

Before, CSS3 custom fonts could only be done with images. Not anymore! You can use whatever font you’d like, since the font files can be hosted on a web server and automatically downloaded by web applications when needed.

@font-face {
    font-family: 'CustomFontName';
    src: url('../images/type/CustomFontName-webfont.eot');
    src: url('../images/type/CustomFontName-webfont.svg#CustomFontName')       format('svg'),
          url('../images/type/CustomFontName-webfont.eot?#iefix')                       format('embedded-opentype'),
         url('../images/type/CustomFontName-webfont.woff')                             format('woff'),
         url('../images/type/CustomFontName-webfont.ttf')                              format('truetype');
    font-weight: normal;
    font-style: normal;

Example 5: Custom fonts

Filters

With the introduction of filters in CSS3, you now have the freedom to edit images with CSS instead of design software. This allows you to quickly and easily edit images in their app or on your webpage as well as create even more visually interesting effects.  At the moment, support is limited as the potential for filters is being explored.

.saturate {
    filter: saturate(3);
}
.grayscale {
    filter: grayscale(100%);
}
.contrast {
    filter: contrast(160%);
}
.brightness {
    filter: brightness(0.25);
}
.blur {
    filter: blur(3px);
}
.invert {
    filter: invert(100%);
}
.sepia {
    filter: sepia(100%);
}
.huerotate {
    filter: hue-rotate(180deg);
}
.opacity {
    filter: opacity(50%);
}

Example 7: Filters

CSS3 is a huge leap forward for web development and design, especially when paired with HTML5. CSS3 gives you:

  • More control over presentation look and formatting.
  • More options and design freedom.

Overall, CSS3 has made it much easier for you to build visually rich web pages with more sophisticated visual effects, and better user interfaces.

Learn more about HTML5 and Intel developer tools at the Intel® Developer Zone. Check out the Intel® HTML5 Playground code examples and the Intel® HTML5 Development Environment to get started.

Intel® HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

software.intel.com/html5tools

Intel® HTML5 Playground:

The Intel HTML5 Playground provides you with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points.  Anything you that you create, can be shared using a permalink.

software.intel.com/appup/html5-playground

有关编译器优化的更完整信息,请参阅优化通知