CSS3

1. CSS3 ART340

2. CSS Quick Review: • What does CSS stand for? • What is the purpose of CSS?

3. 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

4. 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;

5. 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); }

6. 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

7. 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

8. 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

9. text-shadow • The CSS3 property that applies shadow to text. • Not supported by Internet Explorer. • h1{text-shadow: 5px 5px5px #FF0000;} Try it: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_text-shadow_tut shadows

10. @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;}

11. 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

12. 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; }

13. 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

14. 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.

15. 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

16. 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. CSS TRANSITIONS PANEL

17. Transitions in Dreamweaver • What properties will be specified in the transitions? • What will be the duration of the transition? • Will there be a delay? • What timing function will you use? • What will be the end values? Example: http://www.the-art-of-web.com/css/timing-function/#.UV92pKXy_TQ NEW TRANSITION DIALOG BOX

18. 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 bezierhandles Example: http://www.the-art-of-web.com/css/timing-function/

19. CSS3 Generators • http://css3generator.com/ • http://www.css3.me/ • http://www.css3maker.com/ • http://css3gen.com/

20. Can I Use… • If you are curious whether or not you can use something, visit: • http://caniuse.com/