Your SlideShare is downloading. ×
CSS3 Refresher
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 Refresher


Published on

Mobile applications Development - Lecture 11 …

Mobile applications Development - Lecture 11

CSS3 Refresher

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

Published in: Education, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. CSS3 Refresher Ivano Malavolta ivano.malavolta@univaq.it
  • 2. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 3. IntroCSS3 is the presentation companion of HTML5
  • 4. IntroLet’s imagine Flipboard without CSS3
  • 5. IntroIts features aresupported by almost anymobile browser
  • 6. CSS3 Main DriversSimplicity – less images – less markup – less Javascript – less FlashBetter performance – fewer HTTP requestsBetter Search Engine Placement – text as real text, not images or Flash – speed
  • 7. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 8. BasicsGeneric Syntax: Syntax: selector { property: value; property2: value2, value3; ... }
  • 9. InheritanceIf 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; }
  • 10. Combining SelectorsSelectors can be combined h1, h2, h3 { background-color: red; }
  • 11. Listsdiv { 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
  • 12. BackgroundsYou can style a background of any elementdiv { 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-boxno-repeat | repeat etc.repeat-x | repeat-y
  • 13. Background & Colorsdiv { 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
  • 14. GradientsThey can be used in every place you can use an imagediv { 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 gradientleft-bottom end of the gradientfrom starting colorto final color
  • 15. Textp { 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
  • 16. Text Effectsp { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word;} 2px horizontal shadow 10px vertical shadow 5px blur distance #FF0000 color
  • 17. Other Text Properties
  • 18. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 19. SelectorsClassical ways to select elements in CSS2:• by type a { color: red; }• by id #redLink { color: red; }• by class .redLink { color: red; }
  • 20. 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
  • 21. 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
  • 22. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 23. The Box ModelAll HTML elements can be considered as boxes
  • 24. Borders & dimensionsdiv { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red;}
  • 25. Images as bordersdiv { border-image:url(border.png) 30 30 round;}
  • 26. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 27. The Display PropertyIt specifies if/how an element is displayeddiv { display: none;}The element will be hidden, and the page will be displayed as if the element is not there
  • 28. The Display PropertyOther usual values:block• a block element is an element that takes up the full width available, and has a line break before and after itinline• an inline element only takes up as much width as necessary• it can contain only other inline elementsinline-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
  • 29. Flex BoxIt helps in styling elements to be arranged horizontally or verticallybox:• a new value for the display property• a new property box-orient#div { display: box; box-orient: horizontal;}
  • 30. Flex Box main elementsdisplay: box opts an element and its immediate children into the flexible box modelbox-orient Values: horizontal | vertical | inherit How should the boxs children be aligned aligned?box-direction Values: normal | reverse | inherit sets the order in which the elements will be displayed
  • 31. Flex Box main elementsbox-pack Values: start | end | center | justify Sets the alignment of the box along the box- orient axis box-orient: horizontal; box-pack: end;
  • 32. Flex Box main elementsbox-align Values: start | end | center | baseline | stretch Sets how the boxs children are aligned in the box box-orient: horizontal; box-align: center;
  • 33. Flex Box Children by default child elements are not flexible their dimension is set according to their widthbox-flex can be set to any integerIt sets how a child element occupy the #box1 {box’s space width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }
  • 34. The visibility PropertyIt specifies if an element should be visible or hiddendiv.hidden { visibility: hidden;}The element will be hidden, but still affect the layoutIt can also be set tovisible, collapse, inherit
  • 35. Positioning• Static• Relative• Absolute• Fixed• Inherit
  • 36. Static Positioning Elements will stack one on top of the next
  • 37. 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
  • 38. Relative Positioning It is possible to create a coordinate system for child elements
  • 39. 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
  • 40. Fixed Positioning shares all the rules of an absolutely positioned element a fixed element does not scroll with the document
  • 41. 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
  • 42. FloatA floated element will move as far to the left or right as it canElements are floated only horizontallyThe float CSS property can accept one of 4 values: left, right, none, and inherit
  • 43. FloatThe elements before the floating element will not be affectedThe elements after the floating element will flow around it - to avoid this, use the clear propertyGenerally, a floated element should have an explicitly set widthFor a deeper explanation of CSS float:
  • 44. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 45. FontsBefore CSS3, web designers had to use fonts that were already installed on the users deviceWith 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
  • 46. Fonts UsageTo use the font for an HTML element, refer to the name of the font (NAME) through the font-family font- propertydiv { font-family: NAME;}
  • 47. Some Fonts
  • 48. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 49. Visual EffectsThree main mechanisms:1. Transforms (both 2D and 3D)2. Transitions3. Animations
  • 50. 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
  • 51. Transforms
  • 52. Transforms
  • 53. TransitionsThey are used to add an effect when changing from one style to anotherThe effect can be gradualA transition is composed of 2 parts:1. The CSS property to add the effect2. The duration of the effectThe effect will start when the specified CSS property changes value
  • 54. Transition syntaxA 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
  • 55. Example.imageThumbnail { width; 200px; transition: all ease-in 3s;}.zoomed { position: absolute; left: 0px; top: 0px; width: 480px;}$(‘.imageThumbnail’).addClass(‘zoomed’);
  • 56. AnimationsAn animation is an effect that lets an element gradually change from one style to anotherYou can change style in loop, repeating, etc.To bind an animation to an element, you have to specify at least:1. Name of the animation2. Duration of the animation div { animation: test 5s ease-in; }
  • 57. Animation DefinitionAn animation is defined in a keyframeIt splits the animation into parts, and assign a specific style to each partThe various steps within an animation are given as percentuals0% beginning of the animation (from)100% end of the animation (to)
  • 58. 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
  • 59. Animation Properties
  • 60. 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
  • 61. Roadmap• Intro• Basics• Selectors• Box Model• Positioning & Floats• Fonts• Visual Effects• Media Queries
  • 62. Media TypesMedia Queries are based on Media TypesA media type is a specification of the actual media that is being used to access the pageExamples of media types include• screen computer screens screen:• print printed document print:• braille for Braille-based devices braille:• tv for television devices tv:
  • 63. Media TypesThere 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; } }
  • 64. Media QueriesThey allow you to to change style based on specific conditionsFor example, they can be about• device’s display size• orientation of the device• Resolution of the display• ...
  • 65. Example
  • 66. Media QueriesA media query is a boolean expressionThe CSS associated with the media query expression is applied only if it evaluates to trueA media query consists of1. a media type2. a set of media features @media screen and orientation: portrait
  • 67. The Full Media Feature List
  • 68. The AND operatorYou can combine multiple expressions by using the and operator@media screen and (max-device-width: 480px){ /* your style */}
  • 69. The COMMA operatorThe comma keyword acts as an or operator@media screen and (color), handheld and (color) { /* your style */}
  • 70. The NOT operatorYou can explicitly ignore a specific type of device by using the not operator@media not (width:480px) { /* your style */}
  • 71. The ONLY expressionIt is used to “hide the CSS to older browsers that can hide” hide read media types but cannot handle media queriesIn 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)}
  • 72. ExamplesRetina Displays@media only screen and -webkit-min-device-pixel-ratio: 2iPad 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)
  • 73. References