CSS3ART340

CSS

Quick Review:

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

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 by W3C. Adds support for vertical text, rounded borders,

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

Backwards compatible

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.html 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 [CSS3] 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: rgba (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);background-position: center bottom, left top;

}Try it:

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

background-size

Specifies the size of the background image. Before CSS3, the background image size was

determined by the actual size of the image. Allows us to reuse the background image in different

contexts. div {

background:url(flower.gif);background-size:80px 60px;background-repeat:no-repeat;}

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, which

is more 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.a

sp http://www.w3schools.com/css3/css3_3dtransforms.a

sp

CSS3 Transitions

A transitional effect. Allow property changes in CSS values

that occur over a duration. Can be applied to a variety of CSS

properties, for example: background-color width height opacity

REMEMBER: Always add the transition declarations to the initial state.

C S S T R A N S I T I O N S P A N E L

Transitions in Dreamweaver

1. What properties will be specified in the transitions?

2. What will be the duration of the transition?

3. Will there be a delay?

4. What timing function will you use?

5. What will be the end values?

Example: http://www.the-art-of-web.com/css/timing-function/#.UV92pKXy_TQ

N E W T R A N S I T I O N D I A L O G B O X

Transition States

ease: starts slow, speeds up & then slows down linear: constant, normal rate ease-in: starts slow & speeds up ease-out: starts quickly and speeds up ease-in-out: starts slow, speeds up & slows down cubic-bezier: coordinates describe position of bezier

handles

Example: http://www.the-art-of-web.com/css/timing-function/

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/