CSS 3

Syniatkin ViacheslavSevastopol29 October 2010

Overview

Today’s websiteComplex layoutFancy eye-catching

designs

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

Content

Short excursion into the historical domainOverview of CSS 3ConclusionSome useful references

CSS : development historyThe first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.Among its capabilities are support for:

• Font properties such as typeface and emphasis

• Color of text, backgrounds, and other elements

• Text attributes such as spacing between words, letters, and lines

of text

• Alignment of text, images, tables and other elements

• Margin, border, padding, and positioning for most elements

• Unique identification and generic classification of groups of

attributes

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

CSS level 3 : OverviewUnlike CSS 2, CSS 3 consists of modules

Each module is recommended separately

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

Many are already implemented in current browsers

www.w3.org/Style/CSS/current-work gives the state of each module

Browser support for CSS3: Properties

Browser support for CSS3: Selectors

CSS 3 Selectors

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.

CSS 3 Selectors : nth-childnth-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}

CSS 3 Selectors : disabledDisabled 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}

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}

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}

CSS 3 Properties

CSS 3 Properties : border-radiusIt’s simple to make rounded corners. The css-code to do it

is shown below(for different types of browsers).border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;

border-radius (or variant depending on browser) is used to make rounded corners

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

Much simpler than using CSS 2 (no background images etc. needed)

CSS 3 Properties : text-shadow and box-reflectText shadow defines one or more comma-separated shadow

effects to be applied to the text content of the current element.

Effects consist of a shadow color, a maximum blurring radius for the shadow effect and x/y offset of the shadow effect from the element content.

• For instance: text-shadow: black 1px 1px 2px, red 0 0 1em

CSS 3 Properties : box-reflectDescription Defines a reflection of a border box

Syntax -webkit-box-reflect: direction offset mask-box-image

Parameters• Direction The position of the reflection relative to the border box. Can be above, below, left, or right. • Offset The distance of the reflection from the edge of the border box, in length units or as a percentage. The default value is 0.• Mask-box-image Used to overlay the reflection. If omitted, the reflection has no mask.

Here is an example of text shadow effect and box reflection

CSS 3 Properties : box-shadowDescriptionThe 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

CSS 3 Properties @font-face

@font-face lets you use any licensed TrueType (.ttf) or OpenType (.otf) font on your page

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

Then use it like a normal font:.webFont {font-family: Calluna;}

CSS 3 Properties : text-overflowtext-overflow allows you to deal with clipped

text: that is, text that does not fit into its box. Code example:

p.test {border: 1px solid #000000;white-space: nowrap;width: 100%;overflow: hidden;text-overflow:

ellipsis;/*CLIP*/ }

CSS 3 Properties : columns Allows you to split text

newspaper-like across multiple columns

Express in terms of number of columns or width.

Example 1:column-width: 45%; column-gap 5%;

  Example 2:column-count: 3.

CSS 3 Properties : opacity

Opacity is a value between 0 (fully transparent) and 1 (fully opaque)

Big difference with CSS 2 opacity property is that it is not inherited (just applied to background color and not text)

CSS 3 : animationsTransition • transition-property

• transition-duration  • transition-timing-function

• Transform • translate(x[, y]) • rotate(x, y)

• @-keyframes «animation name» • animation-name • animation-duration • animation-iteration-count 

CSS 3 Properties : animationscombines common animation properties into a

single property.• Parameters:

name: the name of the Aаnimation;duration: specifies the length of time that an animation takes to complete one iteration;timing_function: defines how an animation progresses between keyframes;delay: defines when an animation starts;iteration_count: specifies the number of times an animation iterates;direction: determines whether the animation should play in reverse on alternate iterations.

• Syntax -webkit-animation: name duration timing_function delay iteration_count direction [, ... ]

CSS 3 : VariablesOne 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); }

ConclusionCSS 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/

Some resourcesUser’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/)