CSS3

ART340

CSS

What does CSS stand for? What is the purpose of CSS?

CSS

Cascading Style Sheets (CSS) is a language for adding style to web documents.

History of CSS

CSS1: Released in 1996. The first official version. Properties for font,

color, and spacing for HTML elements. CSS2: Released in 1998.

Adding properties for positioning. Allowed styles for other media types.

CSS3: Still in development. Adds support for vertical text, rounded

borders, shadows, multiple background images on one elements and a larger list of color names.

Color Names

CSS 2.1 allowed for 17 color names. CSS3 allows for 140 color names. In 2011, they were not supported. Now

they are! To see a list of the color name keywords,

visit: www.learningwebdesign.com/colornames.ht

ml www.w3.org/TR/css3-color/#svg-color

Example: Instead of color: #FFA07A; you would use color: lightsalmon;

Opacity

The Opacity Property Allows you to specify the opacity of an

element and its child elements. p { background-color: rgb (0, 0, 0); opacity: 0.5;

} The RGBA Property

Adds a fourth, alpha, value to the RGB value.

A number between 0.0 and 1.0. (.5 = 50%) Only affects the element and not children.

p {background-color: rgb (0, 0, 0, 0.5); }

border-radius

The CSS3 property for adding rounded corners.

Example:div {border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}

Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-radius

box-shadow

The CSS3 property for adding shadows to boxes.div {box-shadow: 10px 10px 5px #888888; }

Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_box-shadow

border-image

The CSS3 property that allows you to use an image for a border.div {border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */}

Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-image

text-shadow

The CSS3 property that applies shadow to text.

Not supported by Internet Explorer. h1

{text-shadow: 5px 5px 5px #FF0000;}

Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_text-shadow_tut

shadows

@font-face

Allows designers to upload and reference typefaces in their CSS.

Firefox, Chrome, Safari, and Opera supports .ttf (True Type Fonts) and .otf (OpenType Fonts).

IE9+ only supports .eot (Embedded OpenType).@font-face {font-family: myFirstFont;src: url('Sansation_Light.ttf'),     url('Sansation_Light.eot'); /* IE9+ */}

div {font-family:myFirstFont;}

Multiple Background Images

CSS3 allows you to add several background images to one element.body{ background-image:url(img_flwr.gif),url(img_tree.gif);}

Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background_multiple

Gradients

CSS3 allows you to specify a gradient for the background of a box.

Created using the background-image property. Different browsers require a different syntax.

Very complex. I recommend using a generator.

Try it:http://

ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

Transform Properties

A transform is an effect that lets an element change shape, size and position.

You can transform your elements using 2D or 3D transformation.

2D transform methods: translate() – moves the elements from its

position. rotate() – rotates the element to specific degree. scale() – increases/decreases size. skew() – turns in a given x and y angle matrix() – combines all 2D methods into one.

Transform Properties, cont.

3D transform methods include: rotateX() – mirrors on x-axis. rotateY() – mirrors on y-axis.

For the markup, visit: http://

www.w3schools.com/css3/css3_2dtransforms.asp

http://www.w3schools.com/css3/css3_3dtransforms.asp

CSS3 Generators

http://css3generator.com/ http://www.css3.me/ http://www.css3maker.com/ http://css3gen.com/

Can I Use…

If you are curious whether or not you can use something, visit: http://caniuse.com/