CSS 3 – OverviewCSS 3 – OverviewWhat is new in CSS 3?What is new in CSS 3?

Nikolay KostovNikolay Kostov

Telerik Mobile Development CourseTelerik Mobile Development Coursemobiledevcourse.telerik.com

Technical TrainerTechnical Trainerhttp://www.nikolay.it

Table of ContentsTable of Contents

1.1. What is CSS 3?What is CSS 3?

2.2. SelectorsSelectors

3.3. FontsFonts

4.4. ColorsColors

5.5. Backgrounds Backgrounds

6.6. BordersBorders

7.7. Box ModelBox Model

8.8. AnimationsAnimations

2

What is CSS 3?What is CSS 3?

What is CSS 3?What is CSS 3?

Cascading Style Sheets level 3 is Cascading Style Sheets level 3 is the most recent iteration of CSSthe most recent iteration of CSS

It is divided into several separateIt is divided into several separatedocuments called "modules"documents called "modules"

CSS 3 has not been approved as a CSS 3 has not been approved as a specification, but there are already specification, but there are already a lot of properties that are a lot of properties that are supported in various browsers. supported in various browsers.

The earliest CSS 3 drafts were The earliest CSS 3 drafts were published in June 1999published in June 1999

4

SelectorsSelectors

Attribute SelectorsAttribute Selectors E[foo^="bar"]E[foo^="bar"]

An An EE element whose "foo" attribute element whose "foo" attribute value begins exactly with the string value begins exactly with the string "bar""bar"

Example: Example: a[srca[src^="https://"]^="https://"] E[foo$="bar"]E[foo$="bar"]

An An EE element whose "foo" attribute element whose "foo" attribute value ends exactly with the string "bar"value ends exactly with the string "bar"

E[foo*="bar"]E[foo*="bar"] An An EE element whose "foo" attribute element whose "foo" attribute

value contains the substring "bar"value contains the substring "bar"6

Attribute SelectorsAttribute SelectorsLive DemoLive Demo

Structural Pseudo-Structural Pseudo-classesclasses

:root:root The root of the documentThe root of the document

E:nth-child(n)E:nth-child(n) An An EE element, the element, the n-thn-th child of its child of its

parentparent E:nth-last-child(n)E:nth-last-child(n)

An An EE element, the element, the n-thn-th child of its child of its parent, counting from the last onparent, counting from the last on

E:nth-of-type(n)E:nth-of-type(n) An An EE element, element, the n-th the n-th sibling of its sibling of its

typetype 8

Structural Pseudo-Structural Pseudo-classes (2)classes (2)

E:nth-last-of-type(n)E:nth-last-of-type(n) An An EE element, the element, the n-thn-th sibling of its sibling of its

type, counting from the last onetype, counting from the last one E:last-childE:last-child

An An EE element, last child of its parent element, last child of its parent E:first-of-typeE:first-of-type

An An EE element, first sibling of its type element, first sibling of its type E:last-of-typeE:last-of-type

An An EE element, last sibling of its type element, last sibling of its type9

Structural Pseudo-Structural Pseudo-classes (3)classes (3)

E:only-childE:only-child An An EE element, only child of its parent element, only child of its parent

E:only-of-typeE:only-of-type An An EE element, only sibling of its type element, only sibling of its type

E:emptyE:empty An An EE element that has no children element that has no children

(including text nodes)(including text nodes) More detailed descriptions:More detailed descriptions:

http://www.w3.org/TR/css3-selectors/#structural-pseudos 10

Structural SelectorsStructural SelectorsLive DemoLive Demo

The UI Element StatesThe UI Element StatesPseudo-classesPseudo-classes

E:enabledE:enabled A user interface element A user interface element EE which is which is

enabledenabled E:disabledE:disabled

A user interface element A user interface element EE which is which is disableddisabled

E:checkedE:checked A user interface element A user interface element EE which is which is

checked (for instance a radio-button or checked (for instance a radio-button or checkbox)checkbox)

Currently supported only in Opera!Currently supported only in Opera!12

UI SelectorsUI SelectorsLive DemoLive Demo

Other CSS 3 SelectorsOther CSS 3 Selectors E:targetE:target

An An EE element being the target of element being the target of the referring URIthe referring URI

E:not(s)E:not(s) An An EE element that does not match element that does not match

simple selectorsimple selector E ~ FE ~ F

An An FF element preceded by an element preceded by an EE elementelement

14

Other CSS 3 Other CSS 3 SelectorsSelectors

Live DemoLive Demo

FontsFonts

Font EmbedsFont Embeds Use Use @font-face@font-face to declare font to declare font Point to font file on serverPoint to font file on server Call font with font-familyCall font with font-family Currently not supported in IECurrently not supported in IE Use font embedding instead of Use font embedding instead of

imagesimages@font-face {@font-face {font-family: SketchRockwell;font-family: SketchRockwell;src: url('SketchRockwell-Bold.ttf');src: url('SketchRockwell-Bold.ttf');

}}.my_CSS3_class {.my_CSS3_class {

font-family: SketchRockwell;font-family: SketchRockwell;font-size: 3.2em;font-size: 3.2em;

}}17

Text ShadowText Shadow Applies shadow to textApplies shadow to text Syntax: Syntax: text-shadow: <horizontal-text-shadow: <horizontal-distance> <vertical-distance>distance> <vertical-distance><blur-radius> <shadow-color>;<blur-radius> <shadow-color>;

Do not alter the size of a boxDo not alter the size of a box

18

text-shadow: 2px 2px 7px #000000;text-shadow: 2px 2px 7px #000000;

Text OverflowText Overflow Specifies what should happen when Specifies what should happen when

text overflows the containing elementtext overflows the containing element Syntax:Syntax: text-overflow: <value>;text-overflow: <value>; Possible values:Possible values:

ellipsisellipsis - Display ellipses to represent - Display ellipses to represent clipped textclipped text

clipclip - Default value, clips text - Default value, clips text

Currently not supported in Firefox Currently not supported in Firefox and IEand IE

19

Word WrappingWord Wrapping Allows long words to be able to be Allows long words to be able to be

broken and wrap onto the next linebroken and wrap onto the next line Syntax:Syntax: word-wrap: <value>;word-wrap: <value>; Possible values:Possible values:

normalnormal

break-wordbreak-word

Supported in all major browsersSupported in all major browsers20

CSS 3 FontsCSS 3 FontsLive DemoLive Demo

ColorsColors

OpacityOpacity Sets the opacity level for an elementSets the opacity level for an element Syntax:Syntax: opacity: <value>;opacity: <value>; Value from Value from 0.00.0 (fully transparent) to (fully transparent) to 1.01.0

The opacity is supported in all major The opacity is supported in all major browsers.browsers.

Note: IE8 and earlier supports an Note: IE8 and earlier supports an alternative, the filter property: filter: alternative, the filter property: filter: Alpha(opacity=50).Alpha(opacity=50).

Example:Example:23

<img src="img.jpg" style= " <img src="img.jpg" style= " opacity: 0.4;opacity: 0.4;filter: filter: alpha(opacity=40)" />alpha(opacity=40)" />

RGBA ColorsRGBA Colors

24

Standard RGB colors with an Standard RGB colors with an opacity value for the color (alpha opacity value for the color (alpha channel)channel)

Syntax:Syntax: rgba(<red>, <green>,rgba(<red>, <green>,<blue>, <alpha>)<blue>, <alpha>)

The range for The range for redred, , greengreen and and blueblue is is between integers between integers 00 and and 255255

The range for the alpha channel is The range for the alpha channel is between between 0.00.0 and and 1.01.0

Example: Example: rgba(255, 0, 0, 0.5)rgba(255, 0, 0, 0.5)

HSL ColorsHSL Colors Hue is a degree on the color wheelHue is a degree on the color wheel

00 (or (or 360360) is red, ) is red, 120120 is green, is green, 240240 is is blueblue

Saturation is a percentage valueSaturation is a percentage value 100%100% is the full color is the full color

Lightness is also a percentageLightness is also a percentage 0%0% is dark (black) is dark (black)

100%100% is light (white) is light (white)

50%50% is the average is the average25

HSLA ColorsHSLA Colors HSLA allows a fourth value, which HSLA allows a fourth value, which

sets the Opacity (via the Alpha sets the Opacity (via the Alpha channel) of the element.channel) of the element.

As RGBA is to RGB, HSLA is to HSLAs RGBA is to RGB, HSLA is to HSL Supported in IE9+, Firefox 3+, Supported in IE9+, Firefox 3+,

Chrome, Safari, and in Opera 10+Chrome, Safari, and in Opera 10+ Example:Example:

hsla(0, 100%, 50%, 0.5)hsla(0, 100%, 50%, 0.5)

Result:Result:

26

CSS 3 ColorsCSS 3 ColorsLive DemoLive Demo

BackgroundsBackgrounds

Gradient BackgroundsGradient Backgrounds Gradients are smooth transitions Gradients are smooth transitions

between two or more specified between two or more specified colorscolors

Use of CSS gradients can replace Use of CSS gradients can replace images and reduce download timeimages and reduce download time

Create a more flexible layout, and Create a more flexible layout, and look better while zoominglook better while zooming

Supported in all major browsers via Supported in all major browsers via different keywordsdifferent keywords

This is still an experimental featureThis is still an experimental feature29

Gradient Backgrounds Gradient Backgrounds ExampleExample

30

/* Firefox 3.6+ *//* Firefox 3.6+ */background: -moz-linear-gradient(100% 100% background: -moz-linear-gradient(100% 100% 90deg, 90deg, #FFFF00, #0000FF);#FFFF00, #0000FF);/* Safari 4-5, Chrome 1-9 *//* Safari 4-5, Chrome 1-9 */background: -webkit-gradient(linear, 0% 0%, 0% background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0000FF), to(#FFFF00));100%, from(#0000FF), to(#FFFF00));/* Safari 5.1+, Chrome 10+ *//* Safari 5.1+, Chrome 10+ */background: -webkit-linear-gradient(#FFFF00, background: -webkit-linear-gradient(#FFFF00, #0000FF);#0000FF);/* Opera 11.10+ *//* Opera 11.10+ */background: -o-linear-gradient(#2F2727, background: -o-linear-gradient(#2F2727, #0000FF);#0000FF);

Multiple BackgroundsMultiple Backgrounds CSS3 allows multiple background CSS3 allows multiple background

imagesimages Simple comma-separated list of Simple comma-separated list of

imagesimages Supported in Firefox (3.6+), Supported in Firefox (3.6+),

Chrome (1.0/1.3+), Opera (10.5+) Chrome (1.0/1.3+), Opera (10.5+) and Internet Explorer (9.0+)and Internet Explorer (9.0+)

Comma separated list for the other Comma separated list for the other propertiesproperties

31

background-image: url(sheep.png), background-image: url(sheep.png), url(grass.png);url(grass.png);

BackgroundsBackgroundsLive DemoLive Demo

BordersBorders

Border colorBorder color

Allows you to create cool colored Allows you to create cool colored bordersborders

Only Firefox supports this type of Only Firefox supports this type of coloringcoloring

34

border: 8px solid #000;border: 8px solid #000;-moz-border-bottom-colors: #555 #666 #777 -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;#888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;#999 #aaa #bbb #ccc;-moz-border-left-colors: #555 #666 #777 #888 -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;#999 #aaa #bbb #ccc;-moz-border-right-colors: #555 #666 #777 #888 -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;#999 #aaa #bbb #ccc;

Border imageBorder image Defines an image to be used instead Defines an image to be used instead

of the normal border of an elementof the normal border of an element Split up into a couple of propertiesSplit up into a couple of properties Example:Example:

The border-image property has 3 The border-image property has 3 parts:parts:

More detailed description:More detailed description: http://css-tricks.com/6883-understan

ding-border-image/ 35

border-image: url(border-image.png) border-image: url(border-image.png) 25% repeat;25% repeat;

Border radiusBorder radius

Allows web developers to easily Allows web developers to easily utilize rounder corners in their utilize rounder corners in their design elementsdesign elements

Widespread browser supportWidespread browser support Syntax:Syntax:

Example:Example:

36

-moz-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;border-radius: 15px;background-color: #FF00FF;background-color: #FF00FF;

border-*-*-radius: [border-*-*-radius: [<length><length>||<%><%>][][<length><length>||<<%>%>]? ]?

Box shadowBox shadow Allows to easily implement multiple Allows to easily implement multiple

drop shadows (outer or inner) on drop shadows (outer or inner) on box elementsbox elements

Specifying values for color, size, Specifying values for color, size, blur and offsetblur and offset

Example:Example:

37

-moz-box-shadow: 10px 10px 5px #888;-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;

BordersBordersLive DemoLive Demo

Box ModelBox Model

CSS3 box-sizingCSS3 box-sizing Determine whether you want an Determine whether you want an

element to render it's borders and element to render it's borders and padding within its specified width, or padding within its specified width, or outside of it.outside of it.

Possible values:Possible values: box-sizing: content-box box-sizing: content-box (default)(default)

box width: 288 pixels + 10 pixels box width: 288 pixels + 10 pixels padding and 1 pixel border on each side padding and 1 pixel border on each side = 300 pixels= 300 pixels

box-sizing: border-boxbox-sizing: border-boxbox width: 300 pixels, including box width: 300 pixels, including padding and borderspadding and borders 40

CSS3 box-sizing CSS3 box-sizing (Example)(Example)

Example: Box with total width of Example: Box with total width of 300 px (including paddings and 300 px (including paddings and borders)borders)

41

width: 300px;border: 1px solid black;padding: 5px;

/* Firefox *//* Firefox */-moz-box-sizing: border-box;-moz-box-sizing: border-box;/* WebKit *//* WebKit */-webkit-box-sizing: border-box;-webkit-box-sizing: border-box;/* Opera 9.5+, Google Chrome *//* Opera 9.5+, Google Chrome */box-sizing: border-box;box-sizing: border-box;

CSS 3 Flexible Box CSS 3 Flexible Box ModelModel

The flexible box model determines The flexible box model determines the way boxes are distributed inside the way boxes are distributed inside other boxes and the way they share other boxes and the way they share the available space.the available space.

New values for "display" property:New values for "display" property: flexboxflexbox

inline-flexboxinline-flexbox This box model is still under This box model is still under

developmentdevelopment Still not supported in major browsersStill not supported in major browsers

42

CSS 3 Box Model CSS 3 Box Model PropertiesProperties

flex-directionflex-direction Specifies how flexbox items are placedSpecifies how flexbox items are placed

flex-orderflex-order May be used to change the ordering of May be used to change the ordering of

the elements. Elements are sorted by the elements. Elements are sorted by this value.this value.

flex-packflex-pack Defines the flexibility of packing spacesDefines the flexibility of packing spaces

flex-alignflex-align Changes the way free space is allocatedChanges the way free space is allocated

43

CSS 3 flex-directionCSS 3 flex-direction The The flex-directionflex-direction property specifies property specifies

how flexbox items are placed in the how flexbox items are placed in the flexbox.flexbox.

Possible values:Possible values: lr – Displays elements from left to rightlr – Displays elements from left to right

rl – Displays elements from right to leftrl – Displays elements from right to left

tb – Displays elements from top to bottomtb – Displays elements from top to bottom

bt – Displays elements from bottom to topbt – Displays elements from bottom to top

inline and inline-reverseinline and inline-reverse

block and block-reverse block and block-reverse

44

Box ModelBox ModelLive DemoLive Demo

AnimationsAnimations

AnimationsAnimations Works in all webkit browsersWorks in all webkit browsers Example:Example:

47

@keyframes resize {@keyframes resize {0% {...}0% {...}50% {...}50% {...}100% {...}100% {...}

}}

#box {#box {animation-name: resize;animation-name: resize;animation-duration: 1s;animation-duration: 1s;animation-iteration-count: 4;animation-iteration-count: 4;animation-direction: alternate; animation-direction: alternate;

animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}}

TransitionsTransitions Add an effect when changing from Add an effect when changing from

one style to anotherone style to another Different timing functions:Different timing functions:

ease, ease-in, ease-out, ease-in-out, ease, ease-in, ease-out, ease-in-out, linearlinear

Example:Example:

48

#id_of_element {#id_of_element {-webkit-transition: all 1s ease-in--webkit-transition: all 1s ease-in-

out; out; -moz-transition: all 1s ease--moz-transition: all 1s ease-in-out;in-out;

-o-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;transition: all 1s ease-in-out;

}}

2D Transformations2D Transformations 2D transforms are widely supported2D transforms are widely supported Skew – skew elementSkew – skew element

transform: skew(35deg); transform: skew(35deg); Scale – scale elementScale – scale element

transform: scale(1,0.5); transform: scale(1,0.5); Rotate – rotates elementRotate – rotates element

transform: rotate(45deg);transform: rotate(45deg); Translate – moves elementTranslate – moves element

transform: translate(10px, 20px);transform: translate(10px, 20px);49

3D Transformations3D Transformations 3D transforms are similar to 2D 3D transforms are similar to 2D

transformstransforms Only work in Safari and ChromeOnly work in Safari and Chrome X, Y and Z transformationX, Y and Z transformation

transform: rotateX(180deg);transform: rotateX(180deg); transform: rotateY(180deg);transform: rotateY(180deg); transform: rotateZ(180deg);transform: rotateZ(180deg); perspective: 800;perspective: 800; perspective-origin: 50% 100px;perspective-origin: 50% 100px; translate3d, scale3dtranslate3d, scale3d 50

AnimationsAnimationsLive DemoLive Demo

CSS 3CSS 3

Questions?Questions?

ExercisesExercises

53

1.1. Using your knowledge of CSS 3 style Using your knowledge of CSS 3 style the given HTML code and approximate the given HTML code and approximate the end result (shown in the image the end result (shown in the image below:below:<div id="example_form"><div id="example_form"> <h1>Example form</h1><h1>Example form</h1> Your name:Your name: <input value="Mark <input value="Mark DuBois"/>DuBois"/> Your email:Your email: <input <input value="Mark@...." />value="Mark@...." /> <input value="Subscribe" <input value="Subscribe" type="submit" />type="submit" /></div></div>

Exercises (2)Exercises (2)

54

2.2. Using CSS3 make a rotating 3DUsing CSS3 make a rotating 3D Rubik Cube. Rubik Cube.

3.3. Using CSS3 make a text that is Using CSS3 make a text that is pulsing, i.e. gets bigger, then smaller, pulsing, i.e. gets bigger, then smaller, etc. while blinking with different etc. while blinking with different colors.colors.

4.4. Using CSS3 make a text bouncing Using CSS3 make a text bouncing around the screen (the browser).around the screen (the browser).

Hint: the text should change its positionHint: the text should change its position

Exercises (3)Exercises (3)

55

5.5. Using CSS3 make a landscape with a Using CSS3 make a landscape with a

lake/sea with ships moving in it.lake/sea with ships moving in it.