Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | doncho-minkov |
View: | 972 times |
Download: | 2 times |
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.