CSS3

Joanna Laine Noriega MSCS Graduate Student, CSULB

4/6/2011

CSS3 Family of Specifications

2D Transforms 3D Transforms Animations Backgrounds and Borders Box Model Cascading and Inheritance Color Content Fonts Generated Content for Paged Media Grid Positioning Hyperlinks Images Layout Lists Marquee Media Queries Multi-column Layout Namespace Paged Media Presentation Levels Ruby Selectors Speech Text Transitions User Interface Values and Units Writing Modes

http://www.w3.org/TR/css3-color/

Color
Hue-Saturation-Lightness (HSL) colors
.red {color: hsl(0, 100%, 50%)}

HSLA (alpha) colors RGBA colors

.seethrublue {color: hsla(240, 100%, 50%, 0.5)}

.mostlyyellow {color: rgba(255, 255, 0, 0.8)}

Opacity - demo

.watermark {opacity: 0.3}

Opacity vs. Alpha

Opacity sets the opacity value for an element and all of its children; RGBA sets the opacity value only for a single declaration.
http://www.w3.org/TR/css3-color/#rgba-color http://www.w3.org/TR/css3-color/#opacity

http://www.w3.org/TR/css3-color/#hsl-color http://www.w3.org/TR/css3-color/#hsla-color

http://www.w3.org/TR/css3-background/

Background
background-clip - demo
The background is painted within (clipped to):
border-box padding-box content-box

http://www.w3.org/TR/css3-background/#the-background-clip

Background
background-origin - demo
The position is relative to:
border-box padding-box content-box

http://www.w3.org/TR/css3-background/#the-background-origin

Background
background-size - demo
Scale the image to fit:
Vertically
contain

Horizontally
cover

http://www.w3.org/TR/css3-background/#the-background-size

Border Image
Specify an image to be used in place of the border styles Border design is taken from the sides and corners of an image Image is carved into 9 pieces Slices may be scaled, stretched and repeated in various ways

http://www.w3.org/TR/css3-background/#border-images

Border Image - demo

border-image-source

border-image-slice

Image to be sliced and used for border Inward offsets from the top, right, bottom, and left edges of the image respectively Divides image into nine regions: four corners, four edges and a middle.
Specifies how the images for the sides and the middle part of the border image are scaled and tiled Stretch, repeat, round or space

border-image-repeat

http://www.w3.org/TR/css3-background/#border-images http://www.lrbabe.com/sdoms/borderImage/#demonstration

Border Radius
Create rounded corners for box borders Shape of corners is defined by the radii of an ellipse

border-radius: 55pt 25pt

http://www.w3.org/TR/css3-background/#corners

Border Radius
Specify the same border radius for all four corners
border-radius demo

Alternatively, specify the radius of each corner

border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius demo

http://www.w3.org/TR/css3-background/#corners

Box Shadow - demo

box-shadow
Attach one or more drop shadows to a box Can be inset or drawn outside the box Specify the horizontal and vertical offsets, as well as the spread distance and color

Horizontal shift: positive values = shift right, negative values = shift left Vertical shift: positive values = shift down, negative values = shift up Spread: pixel blur (how hard the shadow is)
http://www.w3.org/TR/css3-background/#the-box-shadow

http://www.w3.org/TR/css3-ui/

Outline offset - demo

outline-offset
By default, outlines are drawn outside the border Offset allows you to change where the outline is drawn with respect to the border
Expanded using positive values Contracted using negative values

http://www.w3.org/TR/css3-ui/#outline-offset

Box Sizing
box-sizing
content-box
Specify the size of the contents, excluding padding and border

border-box
Specify the size of the entire box, including padding and border

http://www.w3.org/TR/css3-ui/#box-sizing0

demo
content-box

border-box

http://css-tricks.com/box-sizing/

http://www.w3.org/TR/css3-images/

Gradient
Gradients allow you to blend two or more colors together Type of image, can be used anywhere an image can Have no intrinsic size, take the shape of their container Specify color stops, orientation, repetition

http://www.w3.org/TR/css3-images/#gradients

Gradient
linear-gradient - demo
Default implementation
Top to bottom Evenly spaced color stops Does not repeat

http://dev.opera.com/articles/view/css3-linear-gradients/

Gradient
radial-gradient - demo

Default implementation

Inside out Evenly spaced color stops Centered in box Shaped by ellipse inscribed within box

Webkit
-webkit-gradient(radial, a b, c, d e, f, from(g), to(h));

a: circle 1 x-axis b: circle 1 y-axis d: circle 2 x-axis e: circle 2 y-axis g: circle 1 color h: circle 2 color

c: circle 1 radius f: circle 2 radius

Not currently supported in Opera

http://weblog.bocoup.com/webkit-radial-gradients

http://www.w3.org/TR/css3-text/

Text Shadow - demo

text-shadow
Give text a "drop" shadow
text-shadow: <color> <horizontal> <vertical> <spread>

Horizontal shift: positive values = shift right, negative values = shift left Vertical shift: positive values = shift down, negative values = shift up Spread: pixel blur (how hard the shadow is)

http://www.w3.org/TR/css3-text/#text-shadow

http://www.w3.org/TR/css3-2d-transforms/

Transform - demo
Transform functions
translate move scale change size rotate change orientation skew change perspective

http://www.w3.org/TR/css3-2d-transforms/#transform-property http://www.the-art-of-web.com/css/css-animation/#section_3

http://www.w3.org/TR/css3-transitions/

Transition - demo
transition-property
Aspects that can be animated
http://www.w3.org/TR/css3-transitions/#properties-from-css-

transition-duration
Length of animation effect

transition-timing-function
Changes in animation speed over its duration (easing)

http://www.w3.org/TR/css3-transitions/

http://www.w3.org/TR/css3-multicol/

Text Columns - demo

column-count
Number of columns

column-rule
Values for a vertical rule between columns

column-gap
Spacing between columns

http://www.w3.org/TR/css3-multicol/#introduction

http://www.w3.org/TR/css3-fonts/

Font Face - demo

Host your own fonts
Create a @font-face definition

Use hosted fonts http://www.google.com/webfonts Makes stylized text accessible Foreign language blogs

http://www.w3.org/TR/css3-fonts/#font-face-rule http://dev.opera.com/articles/view/seven-web-fonts-showcases/

http://www.w3.org/TR/css3-mediaqueries/

Media Queries
Dynamically reference different styles based on:
Media type
Screen Print Projection Dimensions Orientation Resolution Aspect Ratio

Media features

Media Queries
Specify in HTML
<link href='css/480.css' media='only screen and (max-width: 480px), only screen and (max-device-width: 480px)' rel='stylesheet' type='text/css'>

Specify in CSS - demo

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body { background: LightGreen; } }
http://2010.dconstruct.org/

Links
HTML5 Rocks CSS Slides CSS3 Generator CSS3 Maker Transitions and Transforms Linear Gradient Generator