Course notes 10
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

CSS3 Enhancements

Much like HTML 5, a large part of the new CSS3 specification is made of "module" abilities, and many of them have significant levels of support. Significant enough that they can, in places, be used successfully. CSS3 properties is an area where thinking in terms of Progressive Enhancement can be very beneficial. Web pages should still be able to function proficiently even if they do not support the CSS3 properties being used to enhance them. They should be used in non-critical situations, like providing feedback, visual embellishments, and interaction. You do not want to use CSS3 properties in critical areas, like branding, where a brower's lack of support prevents the intented function of the element from taking place. Websites such as Quirksmode and Can I Use have extensive compatibility tables for properties and their support across various browsers.

Vendor Prefixes

Due to the new nature of these declarations and selectors, to use some of them you must specifically target different browsers. To do this you place the browser's vendor prefix in front of the actual statement. Eventually, when all is made standard, the vendor prefixes will be dropped and all browsers will support the normal version of the declaration. With this in mind, it is a good idea to place the normal version AFTER the vendor prefixed statements, that way, in the future, the prefixed versions will cascade to the normal version when individual browsers support it.

For ease of use, the three most popular prefixes, Webkit, Mozilla, and Opera, have all been included in every case where they are applicable.

CSS3 Selectors


:first-child , :last-child, :nth-child()

The child selectors allow you to check if the item being selected is the respective child element of its parent. The :nth-child selector allows one to specify an exact number, or odd/even.

    ul.borders li {
        list-style:none;
        padding:5px;
        border-bottom:1px solid black;
        width:200px;
    }
    
    ul.borders li:last-child {
    	border-bottom:none;
    }
    
    ul.borders li:nth-child(2) {
    	color:blue;
    }

    
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

:target

The target selector allows you to specifically style the subject of a hash tag that is currently being viewed.

    a:target {
        color:blue;
    }
    
This elements id = "hashtag". If you view the page with "#hashtag" following the url, this text will be blue.

This elements id = "hashtag2". If you view the page with "#hashtag2" following the url, this text will be blue.

CSS3 Declarations


Border Radius

Rounds the corners of the element. Works similar to margin or padding; can be applied to all 4 corners, or individualy.

    #radius01 {
        -webkit-border-radius: 20px;  	
               /* vendor prefix for webkit based browsers */
        -moz-border-radius: 20px;	
               /* vendor prefix for mozilla browers */
        -o-border-radius: 20px;		
               /* vendor prefix for opera browers */
        border-radius: 20px;		
               /* official version, all browsers will eventually default to this */
    }
    #radius02 {
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;
        -moz-border-radius-bottomright: 20px;
        -moz-border-radius-bottomright: 20px;
        -o-border-top-left-radius: 20px;
        -o-border-bottom-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-right-radius: 20px;
    } 
    #radius03 {
        -webkit-border-radius: 80px; 
        -moz-border-radius: 80px;
        -o-border-radius: 80px; 
        border-radius: 80px;
    }
    
radius01
radius02
radius03

Text Overflow

When used in combination with overflow and word-wrap, this property allows you to trim the contents of a container to its edges.

    #overflow01 {
        overflow:hidden;		
        white-space:nowrap;		
        text-overflow:ellipsis;		/* works in webkit and IE */
        -o-text-overflow:ellipsis;	/* vendor prefix for Opera browsers */
        width:200px;
        height:50px;
    }
    #overflow02 {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;
        -o-text-overflow:clip;
        width:200px;
        height:50px;
    }
    
This text will be cut off by an elipisis
This text will be clipped to the outmost edge

Text Shadow

Creates a shadow on text elements. Syntax follows: X-Offset, Y-Offset, Amount of Blur, Color of Shadow

    #textShadow {
        font-size:24px;
        font-weight:bold;
        text-shadow:2px 2px 3px #666;
    }
    #insetShadow {
        font-size:24px;
        font-weight:bold;
        text-shadow:-1px -1px 1px #000;
        color:#CCC;
    }
    
Normal Shadow    Inset Shadow

Box Shadow

The box shadow property works exactly the same as Text Shadow, but with elements other than text.

        #boxShadow {
            -webkit-box-shadow: 3px 3px 3px #000; 	
                 /* vendor prefix for webkit based browsers */
            -moz-box-shadow:3px 3px 3px #000;		
                 /* vendor prefix for mozilla browers */
            -o-box-shadow:3px 3px 3px #000;		
                 /* vendor prefix for opera browers */
            box-shadow:3px 3px 3px #000;		
                 /* official version, all browsers will eventually default to this */
        }
        

RGBA Colors

Instead of traditional #Hex Values, rgba() allows you to specifity color values as rgba(red, green, blue, alpha). Unlike opacity, rgba() allows you to create transparent effects without fading out content

    #rgba30 {
        background-color:rgba(0, 0, 255, .3);
    }
    #rgba60 {
        background-color:rgba(0, 0, 255, .6);
    }
    #rgba90 {
        background-color:rgba(0, 0, 255, .9);
    }
    
alpha 30%
alpha 60%
alpha 90%

Multiple Background Images

Firefox 3.5+, Safari 4+, Chrome 4+, and Opera all support the attachment of multiple backgrounds to an element in a comma separated list. All background properties(repeat, position, etc..) can be applied as a list. Backgrounds are layed top down, starting with the first attached image.

    div.multiples {
    	width:100px;
        height:100px;  
    }
    
    #oneBG {
    	background-image:url(gradient.png);
    }
    
    #twoBG {
    	background-image: url(redlines.png), url(gradient.png);
    }
    


CSS Gradients

In a style similar to SVG, you can supply elements with multi-colored backgrounds.To check if your targeted browser/engine has support, you should reference the compatibility sites listed at the top of this page. The Webkit and Mozilla syntaxes are both explained below.

You have an amazing amount of control over gradients in CSS, and there are enough different parameters that you could fill pages covering them. The examples here demonstrate the basic linear gradient, if you want to learn more, read the draft spec .

The basics of the gradient syntax involve declaring the different colors(color stops) and the start/end positions across the 'box' onto which the gradient is being drawn. Like most CSS mappings, the origin(0,0) of the box is the top, left corner.

Gradient Syntax
-webkit-gradient( linear, start , stop , color-stop(0%, #color1), color-stop(100%, #color2));

Start and stop can be declared in pixels, percents or words. So "0 0" = "left top". The values that follow are the color stops. The first parameter is the percentage at which that color starts, and the second is the actual color.

-moz-linear-gradient(angle,#color1 0%,#color2 100%);

The angle decides the orientation of the gradient, usually in degrees( suffix with 'deg'). The following are color stops, similar to the webkit syntax.

    div#gradient1 {
        width:200px;
        height:200px;
        background-image:-webkit-gradient(linear,left bottom, right top,
           color-stop(0%,red),color-stop(100%,blue));
        background-image:-moz-linear-gradient(45deg, red 0%,blue 100%);
    }
    

Gradients can get as complex as you let them, and allow you to build detailed and interactive elements that would otherwise require several images. The example below combines several techniques on this page to create a robust button, all with no images:

    a.button {
        padding:5px 10px;
        -webkit-border-radius: 10px;  	
        -moz-border-radius: 10px;	
        -o-border-radius: 10px;		
        border-radius: 10px;		
        
        background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0%,#666),
                 color-stop(100%,#ececec));
        background-image:-moz-linear-gradient(90deg, #666 0%,#ececec 100%);
        
        -webkit-box-shadow: 1px 1px 2px #666; 	
        -moz-box-shadow:1px 1px 2px #666;		
        -o-box-shadow:1px 1px 2px #666;		
        box-shadow:1px 1px 2px #666;		
        
        font-size:14px;
        font-weight:bold;
        text-shadow:0 -1px 1px #333;
        color:white;
        
    }
    
css button