Post on 14-Dec-2014
description
CSS3 Refresher
Ivano MalavoltaIvano Malavolta
ivano.malavolta@univaq.it
http://www.di.univaq.it/malavolta
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Intro
CSS3 is the presentation companion of HTML5
Intro
Let’s imagine Flipboard without CSS3
Intro
Its features are
supported by almost any
mobile browser
CSS3 Main Drivers
SimplicitySimplicitySimplicitySimplicity– less images– less images– less markup– less Javascript– less Flash
BetterBetterBetterBetter performanceperformanceperformanceperformance– fewer HTTP requests– fewer HTTP requests
BetterBetterBetterBetter SearchSearchSearchSearch EngineEngineEngineEngine PlacementPlacementPlacementPlacement– text as real text, not images or Flash– speed
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Basics
GenericGenericGenericGeneric SyntaxSyntaxSyntaxSyntax::::
selector {
property: value;
property2: value2, value3;
......
}
Inheritance
If an HTML element BBBB is nested into another element AAAA -� B inherits the style of A� B inherits the style of A
unless B has an explicit style definition
body {
background-color: red;
}
div {
background-color: green;
}
Combining Selectors
Selectors can be combined
h1, h2, h3 {
background-color: red;
}
Lists
div {
list-style-image: url(image.png);list-style-image: url(image.png);
list-style-position: inside;
list-style-style: circle;
}Style
disc | circlesquare | decimal
Positioninside | outside
square | decimallower-roman |upper-roman |lower-alpha |upper-alpha |
none
Backgrounds
You can style a background of any element
div {
background:url(img.png), url(img2.png);
background-size:80px 60px;
background-repeat:no-repeat;
background-origin:content-box;background-origin:content-box;
}
repeatno-repeat | repeatrepeat-x | repeat-y
origintop left | top center | top right | center left | border-box | content-box etc.
Background & Colors
div {
background-color: blue;background-color: blue;
background-color: rgba(0, 0, 255, 0.2);
background-color: hsla(240, 100%, 50%, 0.2);
}
RGBA = RGB + opacityHSL RGBA = RGB + opacity
HSLA = HSL + opacity
HSLhue
saturationlightness
Gradients
They can be used in every place you can use an image
div {
background: -webkit-gradient(linear, right top,
left bottom, from(white), to(black));
}
linear� the type of gradient (also radial, or repeating-linear)linear� the type of gradient (also radial, or repeating-linear)
right-top� start of the gradient
left-bottom� end of the gradient
from� starting color
to� final color
Text
p {
color: grey;Text-alignleft | rightcolor: grey;
letter-spacing: 5px;
text-align: center;
text-decoration: underline;
text-indent: 10px;
text-transform: capitalize;
left | rightcenter | justify
Text-decorationtext-transform: capitalize;
word-spacing: 10px;
}
Text-decorationnone
underlineoverline
line throughtext-transform
None | capitalize | Lowercase | uppercase
Text Effects
p {
text-shadow: 2px 10px 5px #FF0000;text-shadow: 2px 10px 5px #FF0000;
text-overflow: ellipsis;
word-wrap:break-word;
}
2px � horizontal shadow10px � vertical shadow10px � vertical shadow5px � blur distance#FF0000 � color
Other Text Properties
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Selectors
Classical ways to select elements in CSS2:
• by typetypetypetypea { color: red; }
• by idididid#redLink { color: red; }
• by classclassclassclass• by classclassclassclass....redLink { color: red; }
Other Selectors from CSS1 & CSS2
• div pdiv pdiv pdiv p � all <p> elements inside a <div>
• div>pdiv>pdiv>pdiv>p � all <p> elements where the parent is a <div> • div>pdiv>pdiv>pdiv>p � all <p> elements where the parent is a <div>
• div+pdiv+pdiv+pdiv+p � all <p> elements that are placed immediately after <div>
• [target][target][target][target] � all elements with a target attribute
• [target=_blank][target=_blank][target=_blank][target=_blank] � all elements with target= "_blank“"_blank“
• p:firstp:firstp:firstp:first----childchildchildchild � every <p> element that is the first child of its parent
Some selectors introduced in CSS3
• a[a[a[a[srcsrcsrcsrc^="https"] ^="https"] ^="https"] ^="https"] � every <a> element whose srcattribute value begins with "https”attribute value begins with "https”
• a[a[a[a[srcsrcsrcsrc$=".$=".$=".$=".pdfpdfpdfpdf"] "] "] "] � every <a> element whose src attribute value ends with ".pdf”
• a[a[a[a[srcsrcsrcsrc*=“mobile"] *=“mobile"] *=“mobile"] *=“mobile"] � every <a> element whose srcattribute value contains the substring “mobile“
• p:nthp:nthp:nthp:nth----child(2) child(2) child(2) child(2) � every <p> element that is the second • p:nthp:nthp:nthp:nth----child(2) child(2) child(2) child(2) � every <p> element that is the second child of its parent
• p:nthp:nthp:nthp:nth----lastlastlastlast----child(2) child(2) child(2) child(2) � every <p> element that is the second child of its parent, counting from the last child
• :not(p) :not(p) :not(p) :not(p) � every element that is not a <p> element
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
The Box Model
All HTML elements can be considered as boxesboxesboxesboxes
Borders & dimensions
div {
width: 100px;width: 100px;
height: 40px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px red;box-shadow: 10px 10px 5px red;
}
Images as borders
div {
border-image:url(border.png) 30 30 round;border-image:url(border.png) 30 30 round;
}
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
The Display Property
It specifies if/how an element is displayed
div {
display: none;
}
The element will be hidden, and the page will be The element will be hidden, and the page will be displayed as if the element is not there
The Display Property
Other usual values:
blockblock
• a block element is an element that takes up the full width available, and has a line break before and after it
inline
• an inline element only takes up as much width as necessary• it can contain only other inline elements
inline-block
• the element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element– you can set width and height, top and bottom margins and paddings
Flex Box
It helps in styling elements to be arranged horizontally or verticallyvertically
box:
• a new value for the display property• a new property box-orient
#div {
display: box;
box-orient: horizontal;
}
Flex Box main elements
display: box
opts an element and its immediate children into the opts an element and its immediate children into the flexible box model
box-orient
Values: horizontalhorizontalhorizontalhorizontal | vertical | inheritHow should the box's children be alignedalignedalignedaligned?
box-direction
Values: normalnormalnormalnormal | reverse | inheritsets the orderorderorderorder in which the elements will be displayed
Flex Box main elements
box-pack
Values: startstartstartstart | end | center | justifyValues: startstartstartstart | end | center | justify
Sets the alignment of the box along the box-orient axis
box-orient: horizontal;
box-pack: end;box-pack: end;
Flex Box main elements
box-align
Values: start | end | center | baseline | stretchstretchstretchstretchValues: start | end | center | baseline | stretchstretchstretchstretch
Sets how the box's children are aligned in the box
box-orient: horizontal;
box-align: center;box-align: center;
Flex Box Children
by default child elements are not flexible
� their dimension is set according to their width
box-flex can be set to any integer
It sets how a child element occupy the
box’s space#box1 {
width: 100px;
}
#box2 {
box-flex: 1;box-flex: 1;
}
#box3 {
box-flex: 2;
}
The visibility Property
It specifies if an element should be visible or hidden
div.hidden {
visibility: hidden;
}
The element will be hidden, but still affect the layout
It can also be set tovisible, collapse, inherit
Positioning
• Static
• Relative• Relative
• Absolute
• Fixed
• Inherit
Static Positioning
Elements will stack one on top of the next
http://bit.ly/I8cEaF
Relative Positioning
Elements behave exactly the same
way as statically positioned elementsway as statically positioned elements
we can adjust a relatively positioned
element with offset properties:
top,top,top,top, right,right,right,right, bottom, andbottom, andbottom, andbottom, and leftleftleftleft
http://bit.ly/I8cEaF
Relative Positioning
It is possible to create a coordinate system for child elementselements
http://bit.ly/I8cEaF
Absolute Positioning
an absolutely positioned element is removed from the normal flownormal flow
it won’t affect or be
affected by any other
element in the flow
http://bit.ly/I8cEaF
Fixed Positioning
shares all the rules of an absolutely positioned element
http://bit.ly/I8cEaF
a fixed element does not scroll with the document
Inherit Positioning
The element inheritsinheritsinheritsinherits the value of its parent element
Typically, position property elements do not naturally inherit their parent’s values � the static value is assigned if no position value is given
http://bit.ly/I8cEaF
Float
A floated element will move as far to the left or will move as far to the left or will move as far to the left or will move as far to the left or right as it canright as it canright as it canright as it canright as it canright as it canright as it canright as it can
Elements are floated only horizontallyhorizontallyhorizontallyhorizontally
The float CSS property can accept one of 4 values:
left,left,left,left, right,right,right,right, none, andnone, andnone, andnone, and inheritinheritinheritinherit
Float
The elements before the floating element will not be affectedaffected
The elements after the floating element will flow around it
- to avoid this, use the clearclearclearclear property
Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set widthwidthwidthwidth
For a deeper explanation of CSS float: http://bit.ly/I8cAb5
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Fonts
Before CSS3, web designers had to use fonts that were already installed on the user's devicealready installed on the user's device
With CSS3, web designers can use whatever font they like
@font-face {
font-family: NAME;
src: url(Dimbo.ttf);
font-weightnormalboldsrc: url(Dimbo.ttf);
font-weight: normal;
font-style: normal;
}
font-stylenormalitalicoblique
bold100200…
Fonts Usage
To use the font for an HTML element, refer to the name of the font (NAME) through the fontfontfontfont----familyfamilyfamilyfamilyof the font (NAME) through the fontfontfontfont----familyfamilyfamilyfamilyproperty
div {
font-family: NAME;font-family: NAME;
}
Some Fonts Sources...
www.dafont.com
www.urbanfonts.comwww.urbanfonts.com
www.losttype.com
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Visual Effects
Three main mechanisms:
1.1.1.1. TransformsTransformsTransformsTransforms ((((bothbothbothboth 2D and 3D)2D and 3D)2D and 3D)2D and 3D)
2.2.2.2. TransitionsTransitionsTransitionsTransitions
3.3.3.3. AnimationsAnimationsAnimationsAnimations
Transforms
A transform is an effect that lets an element
change shape, size, positionshape, size, positionshape, size, positionshape, size, position, … change shape, size, positionshape, size, positionshape, size, positionshape, size, position, …
You can transform your elements using 2D or 3D transformations
http://bit.ly/IroJ7S
Transforms
http://bit.ly/IrpUnX
Transforms
http://bit.ly/IrpUnX
Transitions
They are used to add an effect when changing from onestyle to anotherstyle to another
The effect can be gradualgradualgradualgradual
A transition is composed of 2 parts:1. The CSS property to add the effect2. The duration of the effect
The effect will start when the specified CSS property changes value
Transition syntax
A transition contains 4 properties:
• propertypropertypropertyproperty• propertypropertypropertyproperty– the name of the CSS property the transition effect is for (can be all)
• durationdurationdurationduration– how many seconds (or milliseconds) the transition effect takes to completetakes to complete
• timingtimingtimingtiming----functionfunctionfunctionfunction– linear, ease, ease-in, ease-out, ease-in-out
• delaydelaydelaydelay– when the transition effect will start
Example
.imageThumbnail {
width; 200px;
transition: all ease-in 3s;transition: all ease-in 3s;
}
.zoomed {
position: absolute;
left: 0px;
top: 0px;top: 0px;
width: 480px;
}
$(‘.imageThumbnail’).addClass(‘zoomed’);
Animations
An animation is an effect that lets an element gradually element gradually element gradually element gradually change from one style to anotherchange from one style to anotherchange from one style to anotherchange from one style to another
You can change style in loop, repeating, etc.
To bindbindbindbind an animation to an element, you have to specify at least:
1. Name of the animation1. Name of the animation
2. Duration of the animationdiv {
animation: test 5s ease-in;
}
Animation Definition
An animation is defined in a keyframekeyframekeyframekeyframe
It splits the animation into parts, and assign a specific style to each part
The various steps within an animation are given as percentuals
0% � beginning of the animation (from)
100% � end of the animation (to)
Example
@keyframes test{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
results inresults in
http://bit.ly/IrtfTYhttp://bit.ly/IrtfTYhttp://bit.ly/IrtfTYhttp://bit.ly/IrtfTY
Animation Properties
http://bit.ly/IrpUnX
Transitions VS Animations
• Trigger– Transitions must be bound to a CSS property change– Transitions must be bound to a CSS property change
– Animations start autonomously
• States– Transitions have start and end states
– Animations can have multiple states
• Repeats• Repeats– Transitions can be perfomed once for each activation
– Animations can be looped
Roadmap
• Intro
• Basics• Basics
• Selectors
• Box Model
• Positioning & Floats
• Fonts• Fonts
• Visual Effects
• Media Queries
Media Types
Media Queries are based on Media Media Media Media TypesTypesTypesTypes
A media type is a specification of the actualactualactualactual media media media media thatis being used to access the page
Examples of media types include
• screenscreenscreenscreen: computer screens
• printprintprintprint: printed document
• braillebraillebraillebraille: for Braille-based devices
• tvtvtvtv: for television devices
Media Types
There are two main ways to specify a media type:
• <link> <link> <link> <link> in the HTML page• <link> <link> <link> <link> in the HTML page
<link rel=“stylesheet”
href=“style.css” media=“screen” />
• @media@media@media@media within the CSS file
@media screen {
div { color: red; }
}
Media Queries
TheyTheyTheyThey allowallowallowallow youyouyouyou totototo totototo change style based on specific change style based on specific change style based on specific change style based on specific conditionsconditionsconditionsconditionsconditionsconditionsconditionsconditions
For example, they can be about
• device’s display sizedisplay sizedisplay sizedisplay size
• orientationorientationorientationorientation of the device
• ResolutionResolutionResolutionResolution of the display
• ...
Example
http://bit.ly/I5mR1u
Media Queries
A media query is a booleanbooleanbooleanboolean expressionexpressionexpressionexpression
The CSS associated with the media query expression isapplied only if it evaluates to true
A media query consists of1. a media type1. a media type2. a set of media features
@media screen and orientation: portrait
The Full Media Feature List
http://slidesha.re/I5oFHZ
The AND operator
You can combine multiple expressions by usingthe andandandand operatorthe andandandand operator
@media screen and (max-device-width: 480px){
/* your style */
}
The COMMA operator
The comma keyword acts as an orororor operator
@media screen and (color),
handheld and (color) {
/* your style */
}
The NOT operator
You can explicitly ignore a specific type of device byusing the notnotnotnot operatorusing the notnotnotnot operator
@media not (width:480px) {
/* your style */
}
The ONLY expression
It is used to “hidehidehidehide” the CSS to older browsers that can read media types but cannot handle media queriesread media types but cannot handle media queries
In this case the styling information will not be visible tothose browsers
@media only screen@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Smartphones(portrait and landscape)
Examples
Retina Displays@media only screen and -webkit-min-device-pixel-ratio: 2@media only screen and -webkit-min-device-pixel-ratio: 2
iPad in landscape orientation@media only screen and
(device-width: 768px) and (orientation: landscape)
iPhone and Android devicesiPhone and Android devices@media only screen and
(min-device-width: 320px) and (max-device-width: 480px)
References
http://www.w3schools.com