CSS 3 – Overview CSS 3 – Overview What is new in CSS 3? What is new in CSS 3? Nikolay Kostov Nikolay Kostov Telerik Mobile Development Course Telerik Mobile Development Course mobiledevcourse.teleri k.com Technical Trainer Technical Trainer http://www.nikolay.i t
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
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"
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
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
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).
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
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:
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
/* 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:
#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
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.