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
