1 / 58

More CSS

More CSS. Lecture Overview. CSS3 Crash Course What makes a good selector? CSS Reference . CSS3 Crash Course!!!. CSS3 Outline. Borders Background images RGBA @Font-face Transform Transition. CSS3 Outline. Borders Border-radius Box shadow Border-image Background images Color

cybele
Download Presentation

More CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More CSS

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

  3. CSS3 Crash Course!!! CSE 3345

  4. CSS3 Outline • Borders • Background images • RGBA • @Font-face • Transform • Transition

  5. CSS3 Outline • Borders • Border-radius • Box shadow • Border-image • Background images • Color • @Font-face • Transform • Transition

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

  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 3345

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

  9. Box-shadow box-shadow: rgba(0,0,0,0.4) 10px 10px0 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 3345

  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 3345

  11. CSS3 Outline • Borders • Background images • Background-size • Background-origin • Multiple background images • Color • @Font-face • Transform • Transition

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

  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 clarification CSE 3345

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

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

  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 3345

  17. CSS3 Outline • Borders • Background images • Color • Color keywords • RGBA • HSLA • @Font-face • Transform • 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. • These colors have no transparency. CSE 3345

  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 3345

  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 3345

  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 3345

  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) /* 10% opaque red */ /* 40% opaque red */ /* 70% opaque red */ /* 100% opaque red */ CSE 3345

  23. CSS Moment of Clarity • Setting the cssopacityproperty 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 3345

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

  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 3345

  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 3345

  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 3345

  28. CSS3 Outline • Borders • Background images • Color • @Font-face • Transform • 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 3345

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

  31. CSS3 Outline • Borders • Background images • Color • @Font-face • Transform • Translate • Rotate • Scale • skew • Transition

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

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

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

  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 3345

  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 3345

  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 3345

  38. CSS3 Outline • Borders • Background images • Color • @Font-face • Transform • Transition • Transition-property • Transition-duration • Transition-timing-function • Transition-delay

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

  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 3345

  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 3345

  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 3345

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

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

  45. Animatable Properties • See here for an exhaustive list CSE 3345

  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 3345

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

  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 3345

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

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

More Related