CSS3 Refresher

CSS3 Refresher
CSS3 Refresher Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
Roadmap • Intro • Basics • Selectors • Box Model • Positioning & Floats • 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 Simplicity – less images – less markup – less Javascript – less Flash Better performance – fewer HTTP requests Better Search Engine Placement – text as real text, not images or Flash – speed
Basics Generic Syntax: Syntax: selector { property: value; property2: value2, value3; ... }
Inheritance If an HTML element B is nested into another element 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-position: inside; list-style-style: circle; } Style disc | circle square | decimal Position lower-roman | inside | outside 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; } origin top left | top center | top right | repeat center left | border-box | content-box no-repeat | repeat etc. repeat-x | repeat-y
Background & Colors div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); background-color: hsla(240, 100%, 50%, 0.2); } HSL RGBA = RGB + opacity hue saturation lightness HSLA = HSL + opacity
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) right-top start of the gradient left-bottom end of the gradient from starting color to final color
Text p { Text-align color: grey; left | right letter-spacing: 5px; center | justify text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; Text-decoration word-spacing: 10px; none underline } text-transform overline None | capitalize | line through Lowercase | uppercase
Text Effects p { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word; } 2px horizontal shadow 10px vertical shadow 5px blur distance #FF0000 color
Other Text Properties
Selectors Classical ways to select elements in CSS2: • by type a { color: red; } • by id #redLink { color: red; } • by class .redLink { color: red; }
Other Selectors from CSS1 & CSS2 • div p all <p> elements inside a <div> • div>p all <p> elements where the parent is a <div> • div+p all <p> elements that are placed immediately after <div> • [target] all elements with a target attribute • [target=_blank] all elements with target= "_blank“ • p:first-child p:first- every <p> element that is the first child of its parent
Some selectors introduced in CSS3 • a[src^="https"] a[src^="https"] src every <a> element whose src attribute value begins with "https” a[src$=".pdf src$=".pdf"] • a[src$=".pdf"] every <a> element whose src attribute value ends with ".pdf” a[src src*=“mobile"] • a[src*=“mobile"] every <a> element whose src attribute value contains the substring “mobile“ p:nth- • p:nth-child(2) every <p> element that is the second child of its parent p:nth-last- • p:nth-last-child(2) every <p> element that is the second child of its parent, counting from the last child • :not(p) every element that is not a <p> element
The Box Model All HTML elements can be considered as boxes
Borders & dimensions div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }
Images as borders div { border-image:url(border.png) 30 30 round; }
The Display Property It specifies if/how an element is displayed div { display: none; } The element will be hidden, and the page will be displayed as if the element is not there
The Display Property Other usual values: block • 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 vertically 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 flexible box model box-orient Values: horizontal | vertical | inherit How should the box's children be aligned aligned? box-direction Values: normal | reverse | inherit sets the order in which the elements will be displayed
Flex Box main elements box-pack Values: start | end | center | justify Sets the alignment of the box along the box- orient axis box-orient: horizontal; box-pack: end;
Flex Box main elements box-align Values: start | end | center | baseline | stretch Sets how the box's children are aligned in the box box-orient: horizontal; 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 #box1 { box’s space width: 100px; } #box2 { 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 to visible, collapse, inherit
Positioning • Static • 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 elements we can adjust a relatively positioned element with offset properties: top, right, bottom, and left http://bit.ly/I8cEaF
Relative Positioning It is possible to create a coordinate system for child elements http://bit.ly/I8cEaF
Absolute Positioning an absolutely positioned element is removed from the normal flow it won’t affect or be affected by any other element in the flow http://bit.ly/I8cEaF
http://bit.ly/I8cEaF Fixed Positioning shares all the rules of an absolutely positioned element a fixed element does not scroll with the document
Inherit Positioning The element inherits 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 right as it can Elements are floated only horizontally The float CSS property can accept one of 4 values: left, right, none, and inherit
Float The elements before the floating element will not be affected The elements after the floating element will flow around it - to avoid this, use the clear property Generally, a floated element should have an explicitly set width For a deeper explanation of CSS float: http://bit.ly/I8cAb5
Fonts Before CSS3, web designers had to use fonts that were already installed on the user's device With CSS3, web designers can use whatever font they like @font-face { font-weight font-family: NAME; normal src: url(Dimbo.ttf); bold font-weight: normal; 100 font-style: normal; font-style 200 } normal … italic oblique
Fonts Usage To use the font for an HTML element, refer to the name of the font (NAME) through the font-family font- property div { font-family: NAME; }
Some Fonts Sources... www.dafont.com www.urbanfonts.com www.losttype.com
Visual Effects Three main mechanisms: 1. Transforms (both 2D and 3D) 2. Transitions 3. Animations
Transforms A transform is an effect that lets an element change shape, size, position … 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 one style to another The effect can be gradual A transition is composed of 2 parts: 1. The CSS property to add the effect 2. The duration of the effect The effect will start when the specified CSS property changes value
Transition syntax A transition contains 4 properties: • property – the name of the CSS property the transition effect is for (can be all) • duration – how many seconds (or milliseconds) the transition effect takes to complete • timing-function timing- – linear, ease, ease-in, ease-out, ease-in-out • delay – when the transition effect will start
Example .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 480px; } $(‘.imageThumbnail’).addClass(‘zoomed’);
Animations An animation is an effect that lets an element gradually change from one style to another You can change style in loop, repeating, etc. To bind an animation to an element, you have to specify at least: 1. Name of the animation 2. Duration of the animation div { animation: test 5s ease-in; }
Animation Definition An animation is defined in a keyframe 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;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } results in http://bit.ly/IrtfTY
Animation Properties http://bit.ly/IrpUnX
Transitions VS Animations • Trigger – 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 – Transitions can be perfomed once for each activation – Animations can be looped
Media Types Media Queries are based on Media Types A media type is a specification of the actual media that is being used to access the page Examples of media types include • screen computer screens screen: • print printed document print: • braille for Braille-based devices braille: • tv for television devices tv:
Media Types There are two main ways to specify a media type: • <link> in the HTML page <link rel=“stylesheet” href=“style.css” media=“screen” /> • @media within the CSS file @media screen { div { color: red; } }
Media Queries They allow you to to change style based on specific conditions For example, they can be about • device’s display size • orientation of the device • Resolution of the display • ...
Example http://bit.ly/I5mR1u
Media Queries A media query is a boolean expression The CSS associated with the media query expression is applied only if it evaluates to true A media query consists of 1. a media type 2. 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 using the and operator @media screen and (max-device-width: 480px){ /* your style */ }
The COMMA operator The comma keyword acts as an or operator @media screen and (color), handheld and (color) { /* your style */ }
The NOT operator You can explicitly ignore a specific type of device by using the not operator @media not (width:480px) { /* your style */ }
The ONLY expression It is used to “hide the CSS to older browsers that can hide” hide read media types but cannot handle media queries In this case the styling information will not be visible to those browsers @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 iPad in landscape orientation @media only screen and (device-width: 768px) and (orientation: landscape) iPhone and Android devices @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
References http://www.w3schools.com

Check these out next

CSS3 Refresher

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Similar a CSS3 Refresher(20)

Más de Ivano Malavolta(20)

Último(20)

CSS3 Refresher