Agenda

Introducing CSS3

CSS3 promises to provide much greater control over the 'experience layer' of a user's interaction with a web page, and also to address some of the problematic layout issues of CSS2.

Technically, the current W3C recommendation for web developers and browser vendors is CSS2. However, if close attention is payed to browser support, many CSS3 features can be effectively deployed today.

CSS3 Module Development

CSS3 is being developed as a series of 'modules'. This allows certain features to be added as a sort of ongoing evolution of CSS, instead of needing to release a monolithic new version.

Since each module can be developed independent of the others, segments of the specification may progress faster (or slower) than others. Browser support for particular CSS3 modules can be very selective, as some of them are not near enough to completion. Other modules of CSS3 are closer to being settled, and several of these are implemented in many modern browsers.

In this course we will focus most attention on the features that are currently well supported by the major modern browsers.

When To Apply CSS3

Since CSS3 is a 'living' specification, there are some features that are still in development and for which browser support is poor. Consult support charts from caniuse.com to determine the status of any particular feature.

Some aspects of the user's browsing experience should be considered critical and others non-critical. If support is poor for a feature, only use the feature on things non-critical.

Critical (Not Ideal For CSS3)

Non Critical (Ideal For CSS3)

Follow Design Priciples

Keep in mind: it is important not to get too carried away with the over-use of any particular technique. When a new, fancy feature is introduced, especially features that add 'visual flair', the tendency for some developers can be to use it everywhere. Judicious and subtle application can often be more effective than going overboard. For example, dont apply the text-shadow to all text on a page. Apply it to add contrast and draw attention to special points of interest. Remember the design principles!

Vendor Prefixes

Several CSS3 features are ready to go in most modern browsers, and can be used immediately.

Other features may not enjoy complete support yet, though browser vendors will sometimes implement experimental support for a CSS3 feature. To ensure a CSS3 technique is correctly deployed, vendor prefixes may need to be added to some property names.

Vendor prefixes

In order to apply a vendor prefix to a CSS3 property such as transition, add the prefix to the beginning of the property name, and do this once for each vendor prefix applicable. After declaring vendor prefixed versions of a property, declare the non-prefixed version. For example:

div{
  -moz-transition: 	background 0.3s ease;
  -ms-transition: 	background 0.3s ease;
  -o-transition: 	background 0.3s ease;
  -webkit-transition: 	background 0.3s ease;
  transition: 		background 0.3s ease;
}

When deploying several vendor prefixes, use the non prefixed version of the property last. When the browser finally supports the property, this ensures the non-prefixed rule can over-ride the prefixed rules.

Autoprefixer

There are several tools and resources that can assist you with the prefixing of CSS3.

We will use the VS Code Autoprefixer plugin.

Enhanced Box Models

Several new properties are being introduced for styling box models.

border-radius

Box models can now be rendered with rounded corners, enabling elements that will display as circles, ovals, teardrops, etc.

border-radius requires a pixel amount determining the radius of the curved round corners, eg:

  • well supported. does not require vendor prefixes
  • border-radius:25px; all 4 corners rounded
  • border-radius:25px 0px; two corners rounded, two not rounded
  • from one to four space delimited values can be applied, one for each corner, clockwise from top left
  • corner specific properties:
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-top-left-radius
    • border-top-right-radius
  • you can even set the slant of the rounded corners
  • if you find that content can sometimes get too close to a rounded edge corner, consider increasing the padding
  • Border radius code generator
Border Radius
box-shadow

Makes a box model cast a shadow effect, with a result much like Photoshop's popular "Drop Shadow" layer style.

box-shadow requires space delimited pixel values to describe how far to cast the shadow horizontally, vertically:

  • well supported. does not require vendor prefixes
  • h-shadow (required) distance to horizontal cast - pixel value
  • v-shadow (required) distance to vertical cast - pixel value
  • blur (optional) blur distance - pixel value
  • spread (optional) size of shadow - pixel value
  • color (optional) color of shadow
  • Basic example: box-shadow:5px 5px 10px black;
  • Cast shadow inside the box: box-shadow:inset 0px 0px 10px 5px #000000;
  • Box shadow code generator
Box Shadow
text-shadow

Creates a shadow effect on text, similar to how box-shadow works.

text-shadow requires space delimited pixel values to describe how far to cast the shadow horizontally, vertically:

  • well supported. does not require vendor prefixes
  • h-shadow (required) distance to horizontal cast - pixel value
  • v-shadow (required) distance to vertical cast - pixel value
  • blur (optional) blur distance - pixel value
  • spread (optional) size of shadow - pixel value
  • color (optional) color of shadow
  • For example: text-shadow:5px 5px 10px black;
  • Text shadow code generator
Text Shadow
border-image

If CSS border styles are insufficient for your design goals, it is now possible to use images as well. A single image is 'sliced' into 9 sections, with each edge and corner segment used as the corresponding border edge/corner. The thickness of an image-based border can be adjusted, and the four border sides can stretch or repeat the image along the x and y axis.

Use a border image code generator to assist in the somewhat verbose syntax. A good tutorial on border-image is available from SitePoint

border-image properties

  • well supported. does not require vendor prefixes
  • border-image-source:
  • border-image-slice:
  • border-image-width:
  • border-image-outset:
  • border-image-repeat:
  • shorthand property: border-image: <source> <slice {1,4}> / <width {1,4}> <outset> <repeat{1,2}>;
rgba()

CSS3 provides another way to define the color of an element, this time allowing you to simultaneously assign the opacity as well as a RGB color value. The rgba() function assigns values to Red, Green, Blue and Alpha (opacity) channels. For example:

.new_color_options{
	/* green and 75% opacity */
	background-color:rgba(0, 255, 0, 0.75);
}
.it_works_anywhere_you_use_color{
	/* blue and 10% opacity */
	color:rgba(0, 0, 255, 0.10);
}
opacity

Opacity affects the transparency of the selected element and descendents.

.semi_transparent{
	/* 70% opacity */
	opacity: 0.70;
}
.completely_transparent{
	/* 0% opacity */
	opacity: 0;
}

Transitions

Transitions allow changes to CSS properties to occur smoothly over a specified period, providing an animated effect.

Shorthand transitions

The basic 3 components of defining transitions can be declared in one line with the shorthand format (transition:property duration timing-function;), for example:

transition pattern: transition:property durationInSeconds timingFunction delay;

Example

Consider the following pseudoclassed anchor tag:

a{
	padding:5px 10px;
	background:#690;
	color:white;
	font:bold 12px arial;
}
a:hover{
	padding:5px 10px;
	background:#9c3;
}

This creates a standard hover effect on a background...

Hover Effect

Next we will add the transition code. Anytime the state of the element undergoes a change, the transition will be triggered.

a{
	padding:5px 10px;
	background:#690;
	color:white;
	font:bold 12px arial;

	/* add transition */
	transition:background 0.3s ease;
}

Smooth Transition Hover Effect!

Additional Transition Options

NOTE: Not all CSS properties can animate as a transition. Consult the list of animate-able properties before using.

Learn more on transitions from the Transitions Guide

Transforms

The transform property allows for the skewing, stretching, scaling and rotating of page elements. Note that transformed page elements remain in normal flow: other page elements will not recognize the transformations.

Filters

CSS3 filters provide several visual effects that can be used on page elements (usually images). They provide mechanisms for blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate and sepia effects.

Animations and Keyframes

CSS animations allow for more sophisticated transitions. The developer first defines various stages of the transition, then a CSS rule is defined that will 'trigger' the animation.

animation pattern animation: name duration iterationCount delay

A keyframe allows you to define the intermediate steps in an animation sequence by defining waypoints (keyframes).

  1. First, define the various stages of the animation. Choose your own identifier, and define at minimum, how the animation will begin (eg: 0%), and end (eg: 100%).
    /* define 3 waypoints for an animation named 'identifier' */
    @keyframes identifier{
    	0%{	box-shadow:2px 2px 5px rgba(0,0,255, .2);	 	}
    	50%{	box-shadow:2px 2px 5px rgba(0,0,255, .9);	 	}
    	100%{	box-shadow:2px 2px 5px rgba(0,0,255, .2);	 	}
    }
  2. Then reference the identifier in a CSS animation
    /* run the animation */
    input:focus{
    	animation:identifier 1.5s infinite ease-in-out;
    }
    

Defining Iterations

Use the iteration count to deterine how many times an animation should repeat

CSS3 Functions

CSS3 functions provide options for creating more 'dynamic' code

Backgrounds

Background Gradient

Instead of requiring images for gradients, CSS3 can now handle the job.

The linear-gradient can display gradients along a single direction:
background: linear-gradient(starting-edge, starting-color, next-color, ...end-color);

#linear-gradient{
	background: linear-gradient(top, white, cornflowerblue, blue);
}

radial-gradient can display gradients spreading outwards in all directions from a starting point:
background: radial-gradient(shape at starting-point, starting-color, next-color, ...end-color);

#radial-gradient{
	background:radial-gradient(circle at center, white 0, cornflowerblue, blue 100%);
}

There will be plenty of gradient variations available, though only linear-gradient has good support at present.

Css-tricks provides examples of several gradient techniques. Experiment with the CSS gradient code generator to get a feel for the variety of options.

Multiple Backgrounds

CSS3 also provides for multiple backgrounds/background images. If overlapping backgrounds include transparent sections the background layers beneath will show through.

You still deploy the background property as before, but you can now provide a comma delimited list of values to it:

#multiple_backgrounds{
	border:solid 1px black;
	height:78px;
	background:	url("images/cloud_small.png") repeat-x 60% 0,
			url("images/cloud.png") repeat-x 30% 0,
			url("images/sun.png") no-repeat,
			cornflowerblue;
}

To Do

There will be no quiz on Session #7.