Quality Development with CSS3

14,533 views

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,533
On SlideShare
0
From Embeds
0
Number of Embeds
11,518
Actions
Shares
0
Downloads
192
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Quality Development with CSS3

  1. 1. QUALITY DEVELOPMENTWITH CSS3Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays
  2. 2. SHAY HOWE www.shayhowe.com – @letscounthedaysQuality Development with HTML5 & CSS3 @letscounthedays
  3. 3. HTML5 CSS3 Markup language to give Presentation language to content structure and give content style and meaning. appearance.Quality Development with HTML5 & CSS3 @letscounthedays
  4. 4. Quality Development with HTML5 & CSS3 @letscounthedays
  5. 5. Quality Development with HTML5 & CSS3 @letscounthedays
  6. 6. CSS3Quality Development with HTML5 & CSS3 @letscounthedays
  7. 7. VENDOR PREFIXESChrome Opera-­‐chrome-­‐ -­‐o-­‐Microsoft Webkit-­‐ms-­‐ -­‐webkit-­‐Mozilla-­‐moz-­‐Quality Development with HTML5 & CSS3 @letscounthedays
  8. 8. VENDOR PREFIXESsection  { -­‐chrome-­‐border-­‐radius:  5px; -­‐ms-­‐border-­‐radius:  5px; -­‐moz-­‐border-­‐radius:  5px; -­‐o-­‐border-­‐radius:  5px; -­‐webkit-­‐border-­‐radius:  5px; border-­‐radius:  5px;}Quality Development with HTML5 & CSS3 @letscounthedays
  9. 9. SELECTORSQuality Development with HTML5 & CSS3 @letscounthedays
  10. 10. ATTRIBUTEa[target]  {  ...  }Elements with the attributea[src="http://www.shayhowe.com/"]  {  ...  }Elements with the attribute valuea[src*="shayhowe"]  {  ...  }Elements with an attribute value containing...a[src^="https"]  {  ...  }Elements with an attribute value starting with...a[src$=".pdf"]  {  ...  }Elements with an attribute value ending with...Quality Development with HTML5 & CSS3 @letscounthedays
  11. 11. :TARGET PSEUDO-CLASSsection#web-­‐design:target  {  ...  }http://www.shayhowe.com/#web-­‐designQuality Development with HTML5 & CSS3 @letscounthedays
  12. 12. ELEMENT PSEUDO-CLASSESinput[type="text"]:enabled  {  ...  }Enabled inputinput[type="text"]:disabled  {  ...  }Disabled inputinput:checked  {  ...  }Checked inputQuality Development with HTML5 & CSS3 @letscounthedays
  13. 13. STRUCTURAL PSEUDO-CLASSES:nth-­‐child(3)  {  ...  }Third child element:nth-­‐child(odd)  {  ...  }Odd child elements (1, 3, 5 ...):nth-­‐child(even)  {  ...  }Even child elements (2, 4, 6 ...):nth-­‐child(3n)  {  ...  }Child elements with a multiple of 3 (3, 6, 9 ...):nth-­‐child(3n+11)  {  ...  }Child elements with a multiple of 3 starting at 11 (11, 14, 17 ...)Quality Development with HTML5 & CSS3 @letscounthedays
  14. 14. STRUCTURAL PSEUDO-CLASSES:nth-­‐child(-­‐n+3)  {  ...  }First 3 child elements:nth-­‐last-­‐child(-­‐n+3)  {  ...  }Last 3 child elements:not(:first-­‐of-­‐type):not(:last-­‐of-­‐type)  {  ...  }All elements but the first and last elementsQuality Development with HTML5 & CSS3 @letscounthedays
  15. 15. STRUCTURAL PSEUDO-CLASSES:nth-­‐last-­‐child(3)  {  ...  }Third to last child element:first-­‐child  {  ...  }Last child element (also works with :last-­‐child):nth-­‐of-­‐type(3)  {  ...  }Third child element of this type of element:nth-­‐last-­‐of-­‐type(3)  {  ...  }Third to last child element of this type of element:first-­‐of-­‐type  {  ...  }First child element of this type of element (also works with :last-­‐of-­‐type)Quality Development with HTML5 & CSS3 @letscounthedays
  16. 16. STRUCTURAL PSEUDO-CLASSES:only-­‐child  {  ...  }Only child element:only-­‐of-­‐type  {  ...  }Only child element of this type of element:empty  {  ...  }Empty element (<p></p>):not(p)  {  ...  }Anything but this type of elementQuality Development with HTML5 & CSS3 @letscounthedays
  17. 17. TEXTURAL PSEUDO-CLASSES:first-­‐letter  {  ...  }First letter within the element:first-­‐line  {  ...  }First line within the element:before  {  ...  }Add content before an element:after  {  ...  }Add content after an element::selection  {  ...  }Selected or highlighted elementQuality Development with HTML5 & CSS3 @letscounthedays
  18. 18. SELECTORSQuality Development with HTML5 & CSS3 @letscounthedays
  19. 19. BACKGROUNDSQuality Development with HTML5 & CSS3 @letscounthedays
  20. 20. MULTIPLE BACKGROUNDSsection  { background: url(foreground.png)  no-­‐repeat  0  0, url(middle-­‐ground.png)  no-­‐repeat  0  0, url(background.png)  no-­‐repeat  0  0;}section  { background: url(section-­‐left.png)  no-­‐repeat  0  0, url(section-­‐right.png)  no-­‐repeat  100%  0;}Quality Development with HTML5 & CSS3 @letscounthedays
  21. 21. BACKGROUND-SIZEsection  { background-­‐size:  178px  238px;}section  { background-­‐size:  85%  auto;}Quality Development with HTML5 & CSS3 @letscounthedays
  22. 22. BACKGROUND-CLIPsection  { background-­‐clip:  border-­‐box;}section  { background-­‐clip:  padding-­‐box;}Quality Development with HTML5 & CSS3 @letscounthedays
  23. 23. BACKGROUND-ORIGINsection  { background-­‐origin:  border-­‐box;}section  { background-­‐origin:  content-­‐box;}Quality Development with HTML5 & CSS3 @letscounthedays
  24. 24. BACKGROUNDSQuality Development with HTML5 & CSS3 @letscounthedays
  25. 25. BORDERSQuality Development with HTML5 & CSS3 @letscounthedays
  26. 26. BORDER-RADIUSsection  { border-­‐radius:  5px;}section  { border-­‐radius:  5px  20px  60px  0;}Quality Development with HTML5 & CSS3 @letscounthedays
  27. 27. ELLIPTICAL CORNERSsection  { border-­‐radius: 60px  /  30px;}section  { border-­‐radius: 5px  10px  6px  20px  /  10px  30px  40px  80px;}Quality Development with HTML5 & CSS3 @letscounthedays
  28. 28. BORDER-IMAGEsection  { border-­‐image:  url(paper.png)  10; border-­‐width:  10px;}    section  { border-­‐image:  url(paper.png)  48  22  30  36; border-­‐width:  48px  22px  30px  36px;}Quality Development with HTML5 & CSS3 @letscounthedays
  29. 29. BORDER-IMAGE KEYWORDSsection  { border-­‐image:  url(paper.png)  10  repeat; border-­‐width:  10px;}section  {border-­‐image:  url(paper.png)  10  stretch;border-­‐width:  10px;}Quality Development with HTML5 & CSS3 @letscounthedays
  30. 30. BORDERSQuality Development with HTML5 & CSS3 @letscounthedays
  31. 31. GRADIENTSQuality Development with HTML5 & CSS3 @letscounthedays
  32. 32. LINEAR-GRADIENTsection  { background-­‐color: #f60;   background-­‐image: url(gradient.png);      background-­‐image: linear-­‐gradient(top,  #f60,  #f00);  }Quality Development with HTML5 & CSS3 @letscounthedays
  33. 33. COLOR STOPSsection  { background-­‐image: linear-­‐gradient(left,   #f9e600,   #6f156c  35%,   #fd7c00  65%,   #002874);}Quality Development with HTML5 & CSS3 @letscounthedays
  34. 34. RADIAL-GRADIENTsection  {   background-­‐image: radial-­‐gradient(center  45deg, circle  closest-­‐corner,   #ff0,  #f60);}Quality Development with HTML5 & CSS3 @letscounthedays
  35. 35. GRADIENTSQuality Development with HTML5 & CSS3 @letscounthedays
  36. 36. ADDITIONAL FEATURESQuality Development with HTML5 & CSS3 @letscounthedays
  37. 37. CALCsection  { width:  600px; width:  calc(100%  -­‐  20px);}section  { width:  100px; width:  calc(100%  -­‐  20px  /  6);}Quality Development with HTML5 & CSS3 @letscounthedays
  38. 38. FONT-FACE@font-­‐face  { font-­‐family:  "Museo  Slab"; src:  url("MuseoSlab.svg")  format("svg"); src:  url("MuseoSlab.ttf")  format("truetype"); src:  url("MuseoSlab.woff")  format("woff");}h1  { font-­‐family:  "Museo  Slab",  Georgia,  serif;  }Quality Development with HTML5 & CSS3 @letscounthedays
  39. 39. FONT-FACEQuality Development with HTML5 & CSS3 @letscounthedays
  40. 40. MULTI-COLUMN LAYOUTSsection  { column-­‐count:  3; column-­‐gap:  20px;}section  { column-­‐width:  220px; column-­‐gap:  40px; column-­‐rule:  1px  solid  rgb(255,255,255);}Quality Development with HTML5 & CSS3 @letscounthedays
  41. 41. MULTI-COLUMN LAYOUTSQuality Development with HTML5 & CSS3 @letscounthedays
  42. 42. BOX & TEXT SHADOWSselect  { box-­‐shadow:  3px  3px  5px  rgba(0,  0,  0,  0.4);}section  { box-­‐shadow: inset  0  3px  5px  rgba(0,  0,  0,  0.4), 0  2px  4px  rgba(0,  0,  0,  0.5); text-­‐shadow:  0  -­‐1px  3px  rgba(0,  0,  0,  0.6);}Quality Development with HTML5 & CSS3 @letscounthedays
  43. 43. BOX & TEXT SHADOWSQuality Development with HTML5 & CSS3 @letscounthedays
  44. 44. OPACITYsection  { background-­‐color:  rgba(255,  102,  0,  0.5);}section  { background-­‐color:  hlsa(24,  100%,  100%,  0.5);}Quality Development with HTML5 & CSS3 @letscounthedays
  45. 45. TEXT-OVERFLOWselect  { text-­‐overflow:  ellipsis;}Quality Development with HTML5 & CSS3 @letscounthedays
  46. 46. TRANSFORMSQuality Development with HTML5 & CSS3 @letscounthedays
  47. 47. ROTATEsection  { transform:  rotate(10deg);}section  { transform:  rotate(-­‐30deg);}Quality Development with HTML5 & CSS3 @letscounthedays
  48. 48. ORIGINsection  { transform:  rotate(30deg); transform-­‐origin:  100%  0;}section  { transform:  rotate(30deg); transform-­‐origin:  right  top;}Quality Development with HTML5 & CSS3 @letscounthedays
  49. 49. SCALEsection  { transform:  scaleX(1.5); transform:  scaleY(.4);}section  { transform:  scale(1.5,  .4);}section  {    transform:  scale(.4);}Quality Development with HTML5 & CSS3 @letscounthedays
  50. 50. SKEWsection  { transform:  skewX(10deg); transform:  skewY(30deg);}section  { transform:  skew(10deg,  30deg);}Quality Development with HTML5 & CSS3 @letscounthedays
  51. 51. TRANSLATEsection  { transform:  translateX(50px); transform:  translateY(10%);}section  { transform:  translate(50px,  10%);}Quality Development with HTML5 & CSS3 @letscounthedays
  52. 52. MULTIPLE TRANSFORMSsection  { transform:  rotate(30deg); transform:  scale(.4); transform:  skew(-­‐15deg,  -­‐15deg); transform:  translate(50px,  10%);}Quality Development with HTML5 & CSS3 @letscounthedays
  53. 53. HOMEWORK3D Transformsmatrix3dperspectiveperspective-­‐originrotate3dscale3dtranslate3dQuality Development with HTML5 & CSS3 @letscounthedays
  54. 54. TRANSFORMSQuality Development with HTML5 & CSS3 @letscounthedays
  55. 55. TRANSITIONSQuality Development with HTML5 & CSS3 @letscounthedays
  56. 56. TRANSITIONSsection  { transition-­‐property:  color; transition-­‐duration:  .25s; transition-­‐timing-­‐function:  linear;}section  { transition-­‐property:  background-­‐color; transition-­‐duration:  .5s; transition-­‐delay:  .25s; transition-­‐timing-­‐function:  ease-­‐in;}Quality Development with HTML5 & CSS3 @letscounthedays
  57. 57. TRANSITIONSsection  { transition-­‐property:  color,  background-­‐color; transition-­‐duration:  .25s,  .5s; transition-­‐delay:  0,  .25s; transition-­‐timing-­‐function:  linear,  ease-­‐in;}section  { transition:   color  .25s  linear, background-­‐color  .5s  .25s  ease-­‐in;}Quality Development with HTML5 & CSS3 @letscounthedays
  58. 58. TRANSITIONSsection  { transition:  all  .25s  linear;}Transitionable PropertiesBackgrounds, Borders, Colors, Dimensions, Fonts,Margins, Opacity, Padding, Position, TransformsQuality Development with HTML5 & CSS3 @letscounthedays
  59. 59. TRANSITIONSQuality Development with HTML5 & CSS3 @letscounthedays
  60. 60. KEYFRAME ANIMATIONSQuality Development with HTML5 & CSS3 @letscounthedays
  61. 61. KEYFRAMES@keyframes  walking  { 0%  {  left:  0;  } 50%  {  left:  40%;  } 100%  {  left:  100%;  }}section  { animation-­‐name:  walking; animation-­‐duration:  5s; animation-­‐iteration-­‐count:  1; animation-­‐timing-­‐function:  ease-­‐in-­‐out;}Quality Development with HTML5 & CSS3 @letscounthedays
  62. 62. KEYFRAMESsection  { animation:  walking  5s  1  ease-­‐in-­‐out;}Quality Development with HTML5 & CSS3 @letscounthedays
  63. 63. ANIMATION PROPERTIES• animation-­‐name• animation-­‐delay• animation-­‐direction• animation-­‐duration• animation-­‐iteration-­‐count• animation-­‐timing-­‐functionQuality Development with HTML5 & CSS3 @letscounthedays
  64. 64. ANIMATIONSQuality Development with HTML5 & CSS3 @letscounthedays
  65. 65. MEDIA QUERIESQuality Development with HTML5 & CSS3 @letscounthedays
  66. 66. SCREEN SIZE<link  rel="stylesheet" media="screen  and  (min-­‐width:  960px)"   href="960.css">@media  screen  and  (min-­‐width:  960px)  { ...}Quality Development with HTML5 & CSS3 @letscounthedays
  67. 67. ORIENTATION@media  screen  and  (min-­‐width:  960px)  and   (orientation:  portrait),  screen  and  (min-­‐ width:  480px)  and  (orientation:  landscape)  { ...}Quality Development with HTML5 & CSS3 @letscounthedays
  68. 68. MEDIA QUERIES• aspect-­‐ratio• color• device-­‐aspect-­‐ratio• device-­‐height• device-­‐width• height• max-­‐height• max-­‐width• monochrome• orientation• resolution• widthQuality Development with HTML5 & CSS3 @letscounthedays
  69. 69. QUESTIONS? Thank you!Quality Development with HTML5 & CSS3 @letscounthedays

×