1. CSS 3 Overview SyniatkinViacheslav Sevastopol 29 October 2010

3. Fancy eye-catching designsThe modern web page is sometimes like a book, sometimes like an application, sometimes like an extension of your TV. Current web languages were never designed to do this. The web has arrived where it is today despite of the current standards and not because of them.

4. Content Short excursion into the historical domain Overview of CSS 3 Conclusion Some useful references

6. Color of text, backgrounds, and other elements

7. Text attributes such as spacing between words, letters, and lines of text

8. Alignment of text, images, tables and other elements

9. Margin, border, padding, and positioning for most elements

10. Unique identification and generic classification of groups of attributesCSS level 2 was developed by the W3C and published as a Recommendation in May 1998 and: includes a number of new capabilities; removes poorly-supported features and adds already-implemented browser extensions to the specification.

12. Each module is recommended separately

13. Several modules are already considered stable and will probably not change in the future

14. Many are already implemented in current browsers

16. Browser support for CSS3: Selectors

17. CSS 3 Selectors

18. CSS 3 Selectors : not The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

19. CSS 3 Selectors : nth-child nth-child pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. This pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b. :nth-child( { number expression | odd | even } ) {declaration block}

20. CSS 3 Selectors : disabled Disabled matches user interface elements that are disabled. An element is disabled when it can’t be activated or accept focus—this often means the element can’t be selected, be clicked on, or accept text input, although it could do so if it was in an enabled state. :disabled {declaration block}

21. CSS 3 Selectors : checked Checked pseudo-class matches elements like checkboxes or radio buttons that are checked or toggled to the “on” state. In HTML, this state corresponds to theselected and checked attributes. :checked {declaration block}

22. CSS 3 Selectors : first-of-type First-of-type pseudo-class matches the first child element of the specified element type. :first-of-type {declaration block}

23. CSS 3 Properties

25. The bigger the value or the radius, the more curvy and larger are the rounded corners

28. CSS 3 Properties : box-shadow Description The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0; omitted colors are a UA-chosen color. Here is a code example: -webkit-box-shadow: inset 0px 3px 20px 3px #f00, 3px 10px The inset keyword, if present, changes the drop shadow from an outer shadow to an inner shadow

30. First declare the font:@font-face { font-family: Calluna; src: url('Calluna-Regular.otf');}

33. Express in terms of number of columns or width.

37. CSS 3 : Variables One more innovation in CSS 3 is variables. Here is the simple syntax to declare variable: @variables { keyColor: #f00; } And then you can use it anywhere in CSS: h1 { color: var(keyColor); }

38. Conclusion CSS 3 bring many great features as well as fixing problems with the existing implementations CSS 3 will make it easier to achieve real world designs and layouts http://www.romancortes.com/blog/pure-css-coke-can/ http://www.addyosmani.com/resources/googlebox/

39. Some resources User’s guide with examles of css and html (http://htmlbook.ru/ ) Front-end development secrets and fundamentals (http://www.xiper.net/) Collection of CSS-projects (http://www.zurb.com/playground/osx-dock) Css3 news (http://www.css3.info/)