1. Web Development Basics Lecture 5 – CSS 3

2. Introduction  Early draft of CSS 3 started in 1999 at the W3C just after the CSS 2 recommendation.  CSS 3 is divided into modules.  Each module get a separate specification.  Adds new capability or extends features defined in CSS 2 and try to preserve backward compatibility.  Around 50 modules are published.  4 modules (Color, Selectors, Media Queries and Namespaces) are already Recommendations.  14 modules (such as Background and Borders, Multi- column, Marquee, etc.) are Candidate Recommendation and consider “safe” to use.

3. Media Queries  Enhancement of the @media rules of CSS and the media attribute in HTML.  Adds parameters such as size (width, height) of display, color depth and aspect-ratio.  Attributes:  Types can be print, screen, (aural), braille, handheld, projection, tty, tv, embossed, speech and special all.  width, height (min-, max-) of the targeted display area.  device-width, device-height (min-, max-) of the rendering surface.  orientation (portrait, landscape).

4. Media Queries  Attributes (continued)  aspect-ratio, device-aspect-ratio the value of the (device-)width to the value of the (device-)height.  color, color-index, monochrome (min-, max-).  resolution of the output device (the density of the pixels).  scan (progressive, interlace) describes the scanning process of "tv".  grid query whether the output device is grid or bitmap.

5. Media Queries  Examples  In HTML  In CSS @media screen and (orientation: portrait) { h1 { width: 20em; } } @media screen and (min-device-width: 800px) { h1 { width: 600px; } }

6. Selectors  Attribute selectors  In CSS 2 was introduce:  * The universal selector.  [att] an element with the att attribute, whatever the value of the attribute. In CSS: img[title] { border: 1px solid black; } In HTML:  [att=val] an element with the att attribute whose value is exactly "val". h1[class="test"] { color: red; } Some heading

7. Selectors  CSS 2 (continued):  [att~=val] an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". img[title~="copy"] { border: 5px dashed green; }  [att|=val] an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-". a[hreflang|="en"] { color: yellow; } test

8. Selectors  CSS 3 introduce:  [att^=val] an element with the att attribute whose value begins with the prefix "val". img[src^="image/"] { border: 1px solid blue; }  [att$=val] an element with the att attribute whose value ends with the suffix "val". a[href$=".com"] { font-size: 1.4em; } search  [att*=val] an element with the att attribute whose value contains at least one instance of the substring "val". p[title*="llo"] { color: red; } Some test...

9. Selectors  Pseudo-classes  UI element states pseudo-classes  :enabled, :disabled, :indeterminate and :checked input:checked { border: 1px solid green; }  negation pseudo-class  :not(X) button:not([DISABLED]) { text-transform: uppercase; }  target pseudo-class :target  http://example.com/main.html#section_2 *:target::before { content: url(target.gif); }  language pseudo-class :lang

10. Selectors  structural pseudo-classes  :root an element that is the root of the document. In HTML 4, this is always the HTML element.  :nth-child(an+b) can take odd (2n+1) or even (2n) p:nth-child(3n+1) { color: red; } p:nth-child(3n+2) { color: green; } p:nth-child(3n+3) { color: navy; }  :nth-of-type() img:nth-of-type(odd) { float: right; } img:nth-of-type(even) { float: left; }  :nth-last-child(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type  :empty p:empty { display: block; }

11. Selectors  In CSS 3, the pseudo-element use a new double colon “::” syntax:  ::first-line  ::first-letter  ::before  ::after p::first-line { text-transform: uppercase; } p::first-letter { font-size: 200%; font-weight: bold; float: left; }

12. Color  Transparency  transparent color keyword  p { background-color: transparent; }  the opacity property  Value in the range 0.0 (fully transparent) to 1.0 (fully opaque)  img:hover { opacity: 0.5; }  rgba() and hsla() color values  p { color: rgba(255, 0, 0, 0.5); }  em { color: hsla(120, 100%, 50%, 0.2); }

13. Backgrounds and Borders  Background properties  background-size  length, percentage, auto, cover, contain  background-origin, background-clip  content-box, padding-box, border-box  Multiple background images body{ background-image: url(sun.png), url(ball.png), url(grass.png); background-position: top right, 80% 50%, bottom; background-origin: content-box, content-box, border-box; background-repeat: no-repeat, no-repeat, repeat-x; }

14. Backgrounds and Borders  Border image  border-image-source  border-image-slice  border-image-width  border-image-outset  border-image-repeat (stretch, repeat, round)  border-image  ! Experimental in Opera (not in IE)!  -webkit-border-image (Safari <= 5), -o-border-image p { border-image: url(img/border.png) 30 30 stretch; }

15. Backgrounds and Borders  Rounded corners  border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius (length, percentage {1, 2})  border-radius (length, percentage {1, 4}) p { border-radius: 20px 50px; } border-top-left-radius: 55pt 25pt

16. Backgrounds and Borders  Miscellaneous Effects  box-decoration-break (slice, clone)  box-shadow ((inset) length{2,4} color)  The first length is the horizontal offset of the shadow.  The second length is the vertical offset.  The third length is a blur radius.  The fourth length is a spread distance. div { box-shadow: 7px 20px 12px blue; }

17. Multi-column  Allow flexible multi-column layout  ! Experimental in -webkit- and -moz- ! Work in Opera and in IE (>=10 (not in IE <=9)).  column-width describes the width of columns.  column-count the number of columns.  columns short for setting column-width and -count.  column-gap sets the distance between columns.  column-rule, column-rule-color, column-rule-style, column-rule-width sets the separator between columns.  break-before, break-after, break-inside (auto, always, avoid, left, right, page, column, avoid-page, avoid- column) describe page/column break behavior before/after/inside the generated box.

18. Multi-column  column-fill (auto, balance) minimize the variation in column length.  column-span (none, all) makes it possible for an element to span across several columns. div { column-count: 3; column-gap: 2em; column-rule: 3px dashed black; } h2 { column-span: all; }

19. Marquee  Make the text moving.  Candidate Recommendation; but experimental in -webkit- and not supported by any other browser!  overflow-style (auto, marquee-line, marquee-block) specifies the scrolling method.  marquee-style (scroll, slide, alternate)  marquee-play-count (number, infinite)  marquee-direction (forward, reverse)  marquee-speed (slow, normal, fast)

20. 2D (and 3D) Transforms  Working draft (will not validate)! BUT 2D in Firefox, IE and Opera, experimental in : -webkit and -ms- (IE9) and 3D not in Opera.  transform (2D, 3D) this property contains a list of “transform functions”.  transform-origin (2D, 3D) property establishes the origin of transformation. I.E. first translating the element by the negated value of the property, then applying the transform, then translating back.  transform-style (3D) flat, preserve-3d.  backface-visibility (3D) visible, hidden.  perspective (3D)  perspective-origin (3D)

21. 2D (and 3D) Transforms  Transform functions:  matrix(a, b, c, d, e, f), matrix3d(4x4 matrix (16 values))  translate(tx [,ty]), translate3d(tx, ty, tz), translateX(tx), translateY(ty), translateZ(tz)  scale(sx [,sy]), scale3d(sx, sy, sz), scaleX(sx) same as scale3d(sx, 1, 1), scaleY(sy), scaleZ(sz)  rotate(angle), rotate3d(x, y, z, angle), rotateX(angle), rotateY(angle), rotateZ(angle)  skew(x_angle [, y_angle]), skewX(angle), skewY(angle) img:hover { transform: rotate(45deg); } a { transform: translate(5px, -7px); }

22. Transitions  Animate properties changes smoothly from the old state to the new state over time.  Working draft! In Firefox, Opera Chrome, IE, experimental in -webkit- (Safari), not in IE<=9.  transition-property specifies the name of the CSS property to which the transition is applied.  transition-duration defines the length of time that a transition takes.  transition-timing-function (ease, linear, ease-in, ease- out, ease-in-out, cubic-bezier(x1, y1, x2, y2), step- start, step-end, steps( [, [ start | end ] ]?))  transition-delay defines when the transition will start.  transition (property, duration, timing-function, delay).

23. Transitions p:hover { width: 300px; background-color: blue; color: white; transition-property: width, background-color, color; transition-duration: 3.5s, 2s, 1.5s; } p { width: 100px; transition: all.5s; }

24. Animations  Animations allow to modify CSS property values over time.  Working draft! In Firefox, Opera, IE, experimental in -webkit-, (not in IE<=9).  Keyframes define the animation. A @keyframes rule consists of the keyword "@keyframes", followed by an identifier giving a name for the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curl-braces ‘{ }’). @keyframes my_move { from { top: 0px; } to { top: 150px; } }

25. Animations  animation-name defines a list of animations that apply. Each name is used to select the keyframe at- rule that provides the animation.  animation-duration defines the length of time that an animation takes to complete one cycle.  animation-timing-function describes how the animation will progress over one cycle of its duration (same as the transition-timing-function for values).  animation-iteration-count (number or infinite) defines the number of times an animation cycle is played.  animation-direction (normal, alternate) defines whether or not the animation should play in reverse on alternate cycles.

26. Animations  animation-delay property defines when the animation will start.  animation shorthand property combines the animation properties into a single property. div { animation-name: my_move; animation-duration: 10s; animation-timing-function: ease-out; animation-iteration-count: infinite; }

27. Image Values  In CSS2, if the background image has transparency (or do not repeat), fallback color will “shine” through p { color: white; background: url("dark.png") black; }  Now, with image() function the browser will use the fallback only if it failed to load the image p { color: white; background: image("dark.png", black); } It can also be used for loading alternatives images background-image: image("im.svg", 'im.png', "im.gif"); Or for Solid-color Images background-image: image(rgba(0,0,55,.5)), url("im.png");

28. Image Values  A gradient is an image that smoothly fades from one color to another.  Work in Firefox, Chrome, IE, Opera, experimental in -webkit- (Safari, chrome <25), -moz- (<16), -o- (<12), (not in IE <= 9).  linear-gradient( [ [ | [ to ] ],]? [, ]+ ) p { background: linear-gradient(-75deg, red, blue); } div { background: linear-gradient(to top right, yellow, blue 20%, #0f0); }

29. Image Values  radial-gradient( [ [ || ] [ at ]?, | at, ]? [, ]+ ) div { background: radial-gradient(circle, yellow, green); } p { background: radial-gradient(20px 30px at 20px 20px, yellow 110px, red 20%, blue); }

30. Image Values  repeating-linear-gradient()  repeating-radial-gradient() body { background: repeating-linear-gradient(red, blue 20px, red 40px); } p { background: repeating-radial-gradient(red, blue 20px, red 40px); }

31. And many more  CSS 3 Font  reintroduce “web font”  CSS 3 Text  text-shadow, word-wrap, text-justify, etc.  CSS 3 User Interface  box-sizing, resize, icon, nav-index, etc.  CSS 3 Speech  Makes the browser talk (Opera, some by VoiceOver in Safari).  etc. Be curious

32. Sources  http://www.w3.org/Style/CSS/current-work http://www.w3.org/Style/CSS/current-work  http://www.w3.org/Style/CSS/specs http://www.w3.org/Style/CSS/specs  http://meiert.com/en/indices/css-properties/ http://meiert.com/en/indices/css-properties/  http://en.wikipedia.org/wiki/Css_3#CSS_3 http://en.wikipedia.org/wiki/Css_3#CSS_3  http://en.wikipedia.org/wiki/Comparison_of_layo ut_engines_%28CSS%29 http://en.wikipedia.org/wiki/Comparison_of_layo ut_engines_%28CSS%29  http://w3schools.com/css3/default.asp http://w3schools.com/css3/default.asp