1. More CSS

2. Lecture Overview CSS3 Crash Course What makes a good selector? CSS Reference

3. CSS3 Crash Course!!! CSE 33453

4. CSS3 Outline 1.Borders 2.Background images 3.RGBA 4.@Font-face 5.Transform 6.Transition

5. CSS3 Outline 1.Borders 1.Border-radius 2.Box shadow 3.Border-image 2.Background images 3.Color 4.@Font-face 5.Transform 6.Transition

6. Border-radius Helpful for rounded corners, ellipses, circles, etc. No longer have to cheat and use images. CSE 33456

7. Border-radius border-radius: 1em 5em; First value specifies horizontal radius Second value specifies vertical radius If a second value is omitted the first is applied to both CSE 33457

8. Box-shadow Attaches one of more drop-shadows to the box Shadow will match border-radius CSE 33458

9. Box-shadow box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ First length is horizontal offset of shadow Second length is vertical offset of shadow Third length is blur radius of shadow Four length is spread distance CSE 33459

10. Border-image Developers can use images for borders instead of border styles. No more settling for borders that are just solid, dash, groove, etc. CSE 334510

11. CSS3 Outline 1.Borders 2.Background images 1.Background-size 2.Background-origin 3.Multiple background images 3.Color 4.@Font-face 5.Transform 6.Transition

12. Background-size Specifies the size of background images. background-size: dimension | contain | cover CSE 334512

13. Background-size Contain – scale the image, while preserving aspect ratio, to make the image contained by the background area. Cover – scale the image, while preserving aspect ratio, to make the image cover the background area. See demo for clarificationdemo CSE 334513

14. Background-origin Specifies the position of the origin of an image specified using the background-image CSS property.background-image Background-origin: padding-box, border-box, content- box CSE 334514

15. Multiple Background Images Allows developers to specify multiple background images for box elements CSE 334515

16. Multiple Background Images Each images generates a separate ‘background layer’. The first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively. background-image: url(sheep.png), url(grassandsky.png); CSE 334516

17. CSS3 Outline 1.Borders 2.Background images 3.Color 1.Color keywords 2.RGBA 3.HSLA 4.@Font-face 5.Transform 6.Transition

18. Color Keywords Case-insensitive identifiers which represent a specific color, e.g. red, blue, green, lightblue. Over a 100 named colors, see here.here These colors have no transparency. CSE 334518

19. RGB Represents 3 channels – Red, green, and blue Hexadecimal notation – 6 character format: #FF00FF – 3character format: #F0F – Both formats represent the same color CSE 334519

20. RGB Functional notation – rgb (R, G, B); – Integer format : Valid values are 0-255 rgb (255, 0, 255) – Percentage format: Valid values are 0%-100% rgb (100%, 0%, 100%) CSE 334520

21. RGBA Extends the RGB model to include “alpha” to specify opacity Alpha value is float number from 0.0 – 1.0 Alpha = 0 – Transparent Alpha =.5 – Semi transparent Alpha = 1 – opaque CSE 334521

22. RGBA rgba(255,0,0,0.1) rgba(255,0,0,0.4) rgba(255,0,0,0.7) rgba(255,0,0, 1) CSE 334522 /* 10% opaque red */ /* 40% opaque red */ /* 70% opaque red */ /* 100% opaque red */

23. CSS Moment of Clarity Setting the css opacity property on an element applies to its children element as well. When you want an element’s bg to have transparency in it, but not its children, use rgba. CSE 334523

24. HSLA Hue, saturation, lightness, alpha Hue – represents an angle of color (0-360). Red = 0 = 360 Green = 120 = 480 Blue = 240 = 600 CSE 334524

25. HSLA Saturation – refers to the dominance of hue in a color – Possible values are 0-100% 100% is full saturation 0% is a shade of grey CSE 334525

26. HSLA Lightness – how light or dark a color is – Possible values are 0-100% 100% is white 0% is black 50% is normal Alpha – same as rgba CSE 334526

27. Benefits of HSLA Far more intuitive. You can guess at the colors you want then tweak. Easier to create sets of colors by finding a hue and then varying lightness and saturation Produces better randomized values than rgb. CSE 334527

28. CSS3 Outline 1.Borders 2.Background images 3.Color 4.@Font-face 5.Transform 6.Transition

29. @font-face Allows developers to specify online fonts to display text. This eliminates the need to rely on fonts installed on the user’s computer. CSE 334529

30. @font-face @font-face { font-family: ; src: [, ]*; [font-weight: ]; [font-style: ]; } Check out Google Web Fonts for a collection of over 500 fonts.Google Web Fonts Use fonts that you upload to a server CSE 334530

31. CSS3 Outline 1.Borders 2.Background images 3.Color 4.@Font-face 5.Transform 1.Translate 2.Rotate 3.Scale 4.skew 6.Transition

32. Transform Lets you translate, rotate, scale, and skew elements. Based on matrix math CSE 334532

33. Translate Specifies a 2D translation transform: translate( tx[, ty]) /*one or two values. transform: translateX(tx) /*translates along x axis*/ transform: translateY(ty) /*translates along y axis*/ CSE 334533

34. Rotate Rotates the element clockwise around its origin by the specified angle. transform: rotate(angle); /* rotate(30deg) */ CSE 334534

35. Scale A 2D scaling operation described by [sx, sy]. If sy isn’t specified, it is assumed to be equal to sx. transform: scale(sx[, sy]) /*1 or 2 unitless numbers*/ transform: scaleX(sx) /* scaleX(2.7) */ transform: scaleY(sy) /* scaleY(.5) */ CSE 334535

36. Scale sx = 1 and sy = 1 results in no scaling. sx = 0.5 and sy = 0.5 results in the element being scaled to half its size. sx = 2.0 and sy = 2.0 results in the element being scaled to twice its size. transform: scale(sx[, sy]) /*1 or 2 unitless numbers*/ transform: scaleX(sx) /* scaleX(2.7) */ transform: scaleY(sy) /* scaleY(.5) */ CSE 334536

37. Skew Skews the element around the X and Y axes by the specified angles Don’t use skew(). It has been removed from the standard. transform: skewX(angle); /* skewX(-30deg) */ transform: skewY(angle); /* skewY(30deg) */ *you need the deg following the angle* CSE 334537

38. CSS3 Outline 1.Borders 2.Background images 3.Color 4.@Font-face 5.Transform 6.Transition 1.Transition-property 2.Transition-duration 3.Transition-timing-function 4.Transition-delay

39. Transition Allows developers to define transitions between two states of an element. CSE 334539

40. Transition-property Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed in the property are animated during transitions; changes to all other properties occur instantaneously as usual. CSE 334540

41. Transition-duration Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. CSE 334541

42. Transition-timing-function Specifies a bezier curve for determining how intermediate values are computed. Pre-defined timing values ease, equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) linear, equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in, equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) ease-out, equivalent to cubic-bezier(0, 0, 0.58, 1.0) ease-in-out, equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) CSE 334542

43. CSS transition function manipulator http://cssglue.com/cubic CSE 334543

44. Transition-delay Defines how long to wait between the time a property is changed and the transition actually begins CSE 334544

45. Animatable Properties See here for an exhaustive listhere CSE 334545

46. Animations Very similar to transitions – Both animate a property over time – Both have duration – Both have an optional delay – Both have a timing function However, animations are different b/c – They allow multi step animations aka keyframes – Can repeat any number of times – Go forwards and backwards CSE 334546

47. Let the web move you Read more about transition and animations here here CSE 334547

48. Vendor Prefixes Many CSS3 properties are not supported by their actual property name. Instead, browsers provide a vendor specific prefix to the property name for usage. CSE 334548

49. Vendor Prefixes Internet Explorer: -ms-propertyName Firefox: -moz-propertyName Opera: -o-propertyName Safari /Chrome: -webkit-propertyName CSE 334549

50. Vendor Prefix Example -ms-transform : rotate (7deg); -moz-transform : rotate (7deg); -o-transform : rotate (7deg); -webkit-transform : rotate (7deg); CSE 334550

51. Vendor Prefix Drama Unfortunately, the W3 has yet agree upon/complete the CSS3 standard. Fortunately, browsers are ahead of the standard and use prefixes for un-standardized features. CSE 334551

52. Vendor Prefix Always consult a CSS reference to determine if a CSS3 feature is implemented or uses a vendor prefix. CSE 334552

53. Addition CSS Info CSE 334553

54. Semantic Class Names Use class names that describe the content, not its presentation. Use class names that describe the status of the content. CSE 334554

55. Don’t use class/id names that are visual.red { font-size: 16px; color: green; }.standardBlue { color: purple; } CSS is so cool! CSE! Sample text CSE 334555

56. What class name would you use for the green content? CSE 334556

57. Concise Selectors Item 1 CSE 334557

58. CSS References Mozilla Developer Network W3schools W3 CSE 334558