1 / 17

CSS3

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.

pancho
Download Presentation

CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS3 ART340

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

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

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

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

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

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

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

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

  10. text-shadow shadows • 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

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

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

  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. Very 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 Generators • http://css3generator.com/ • http://www.css3.me/ • http://www.css3maker.com/ • http://css3gen.com/

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

More Related