Quality Development with CSS3

69
QUALITY DEVELOPMENT WITH CSS3 Shay Howe September 2011 www.shayhowe.com @letscounthedays

description

 

Transcript of Quality Development with CSS3

Page 1: Quality Development with CSS3

QUALITY DEVELOPMENT

WITH CSS3

Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays

Page 2: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SHAY HOWEwww.shayhowe.com – @letscounthedays

@letscounthedays

Page 3: Quality Development with CSS3

Quality Development with HTML5 & CSS3

HTML5Markup language to give

content structure and meaning.

@letscounthedays

CSS3Presentation language to

give content style and appearance.

Page 4: Quality Development with CSS3

Quality Development with HTML5 & CSS3 @letscounthedays

Page 5: Quality Development with CSS3

Quality Development with HTML5 & CSS3 @letscounthedays

Page 6: Quality Development with CSS3

Quality Development with HTML5 & CSS3

CSS3

@letscounthedays

Page 7: Quality Development with CSS3

Quality Development with HTML5 & CSS3

VENDOR PREFIXESChrome-­‐chrome-­‐

Microsoft-­‐ms-­‐

Mozilla-­‐moz-­‐

@letscounthedays

Opera-­‐o-­‐

Webkit-­‐webkit-­‐

Page 8: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 9: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SELECTORS

@letscounthedays

Page 10: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ATTRIBUTEa[target]  {  ...  }Elements with the attribute

a[src="http://www.shayhowe.com/"]  {  ...  }Elements with the attribute value

a[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...

@letscounthedays

Page 11: Quality Development with CSS3

Quality Development with HTML5 & CSS3

:TARGET PSEUDO-CLASSsection#web-­‐design:target  {  ...  }

http://www.shayhowe.com/#web-­‐design

@letscounthedays

Page 12: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ELEMENT PSEUDO-CLASSESinput[type="text"]:enabled  {  ...  }Enabled input

input[type="text"]:disabled  {  ...  }Disabled input

input:checked  {  ...  }Checked input

@letscounthedays

Page 13: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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 ...)

@letscounthedays

Page 14: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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 elements

@letscounthedays

Page 15: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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)

@letscounthedays

Page 16: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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 element

@letscounthedays

Page 17: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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 element

@letscounthedays

Page 18: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SELECTORS

@letscounthedays

Page 19: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BACKGROUNDS

@letscounthedays

Page 20: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 21: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BACKGROUND-SIZEsection  {background-­‐size:  178px  238px;

}

section  {background-­‐size:  85%  auto;

}

@letscounthedays

Page 22: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BACKGROUND-CLIP

section  {background-­‐clip:  border-­‐box;

}

section  {background-­‐clip:  padding-­‐box;

}

@letscounthedays

Page 23: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BACKGROUND-ORIGIN

section  {background-­‐origin:  border-­‐box;

}

section  {background-­‐origin:  content-­‐box;

}

@letscounthedays

Page 24: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BACKGROUNDS

@letscounthedays

Page 25: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BORDERS

@letscounthedays

Page 26: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BORDER-RADIUSsection  {border-­‐radius:  5px;

}

section  {border-­‐radius:  5px  20px  60px  0;

}

@letscounthedays

Page 27: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ELLIPTICAL CORNERSsection  {border-­‐radius:60px  /  30px;

}

section  {border-­‐radius:5px  10px  6px  20px  /  10px  30px  40px  80px;

}

@letscounthedays

Page 28: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 29: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BORDER-IMAGE KEYWORDSsection  {border-­‐image:  url(paper.png)  10  repeat;border-­‐width:  10px;

}

section  {border-­‐image:  url(paper.png)  10  stretch;border-­‐width:  10px;}

@letscounthedays

Page 30: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BORDERS

@letscounthedays

Page 31: Quality Development with CSS3

Quality Development with HTML5 & CSS3

GRADIENTS

@letscounthedays

Page 32: Quality Development with CSS3

Quality Development with HTML5 & CSS3

LINEAR-GRADIENTsection  {background-­‐color:#f60;  

background-­‐image:url(gradient.png);  

   background-­‐image:linear-­‐gradient(top,  #f60,  #f00);  

}

@letscounthedays

Page 33: Quality Development with CSS3

Quality Development with HTML5 & CSS3

COLOR STOPSsection  {background-­‐image:

linear-­‐gradient(left,  #f9e600,  #6f156c  35%,  #fd7c00  65%,  #002874);

}

@letscounthedays

Page 34: Quality Development with CSS3

Quality Development with HTML5 & CSS3

RADIAL-GRADIENTsection  {  background-­‐image:

radial-­‐gradient(center  45deg,circle  closest-­‐corner,  #ff0,  #f60);

}

@letscounthedays

Page 35: Quality Development with CSS3

Quality Development with HTML5 & CSS3

GRADIENTS

@letscounthedays

Page 36: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ADDITIONAL FEATURES

@letscounthedays

Page 37: Quality Development with CSS3

Quality Development with HTML5 & CSS3

CALCsection  {width:  600px;width:  calc(100%  -­‐  20px);

}

section  {width:  100px;width:  calc(100%  -­‐  20px  /  6);

}

@letscounthedays

Page 38: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;  

}

@letscounthedays

Page 39: Quality Development with CSS3

Quality Development with HTML5 & CSS3

FONT-FACE

@letscounthedays

Page 40: Quality Development with CSS3

Quality Development with HTML5 & CSS3

MULTI-COLUMN LAYOUTSsection  {column-­‐count:  3;column-­‐gap:  20px;

}

section  {column-­‐width:  220px;column-­‐gap:  40px;column-­‐rule:  1px  solid  rgb(255,255,255);

}

@letscounthedays

Page 41: Quality Development with CSS3

Quality Development with HTML5 & CSS3

MULTI-COLUMN LAYOUTS

@letscounthedays

Page 42: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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);}

@letscounthedays

Page 43: Quality Development with CSS3

Quality Development with HTML5 & CSS3

BOX & TEXT SHADOWS

@letscounthedays

Page 44: Quality Development with CSS3

Quality Development with HTML5 & CSS3

OPACITYsection  {background-­‐color:  rgba(255,  102,  0,  0.5);

}

section  {background-­‐color:  hlsa(24,  100%,  100%,  0.5);

}

@letscounthedays

Page 45: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TEXT-OVERFLOWselect  {text-­‐overflow:  ellipsis;

}

@letscounthedays

Page 46: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSFORMS

@letscounthedays

Page 47: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ROTATEsection  {transform:  rotate(10deg);

}

section  {transform:  rotate(-­‐30deg);

}

@letscounthedays

Page 48: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ORIGINsection  {transform:  rotate(30deg);transform-­‐origin:  100%  0;

}

section  {transform:  rotate(30deg);transform-­‐origin:  right  top;

}

@letscounthedays

Page 49: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SCALEsection  {transform:  scaleX(1.5);transform:  scaleY(.4);

}

section  {transform:  scale(1.5,  .4);

}

section  {    transform:  scale(.4);}

@letscounthedays

Page 50: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SKEWsection  {transform:  skewX(10deg);transform:  skewY(30deg);

}

section  {transform:  skew(10deg,  30deg);

}

@letscounthedays

Page 51: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSLATEsection  {transform:  translateX(50px);transform:  translateY(10%);

}

section  {transform:  translate(50px,  10%);

}

@letscounthedays

Page 52: Quality Development with CSS3

Quality Development with HTML5 & CSS3

MULTIPLE TRANSFORMSsection  {transform:  rotate(30deg);transform:  scale(.4);transform:  skew(-­‐15deg,  -­‐15deg);transform:  translate(50px,  10%);

}

@letscounthedays

Page 53: Quality Development with CSS3

Quality Development with HTML5 & CSS3

HOMEWORK3D Transformsmatrix3dperspectiveperspective-­‐originrotate3dscale3dtranslate3d

@letscounthedays

Page 54: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSFORMS

@letscounthedays

Page 55: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSITIONS

@letscounthedays

Page 56: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 57: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 58: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSITIONSsection  {transition:  all  .25s  linear;

}

Transitionable PropertiesBackgrounds, Borders, Colors, Dimensions, Fonts, Margins, Opacity, Padding, Position, Transforms

@letscounthedays

Page 59: Quality Development with CSS3

Quality Development with HTML5 & CSS3

TRANSITIONS

@letscounthedays

Page 60: Quality Development with CSS3

Quality Development with HTML5 & CSS3

KEYFRAME ANIMATIONS

@letscounthedays

Page 61: Quality Development with CSS3

Quality Development with HTML5 & CSS3

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;

}

@letscounthedays

Page 62: Quality Development with CSS3

Quality Development with HTML5 & CSS3

KEYFRAMESsection  {animation:  walking  5s  1  ease-­‐in-­‐out;

}

@letscounthedays

Page 63: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ANIMATION PROPERTIES• animation-­‐name• animation-­‐delay• animation-­‐direction• animation-­‐duration• animation-­‐iteration-­‐count• animation-­‐timing-­‐function

@letscounthedays

Page 64: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ANIMATIONS

@letscounthedays

Page 65: Quality Development with CSS3

Quality Development with HTML5 & CSS3

MEDIA QUERIES

@letscounthedays

Page 66: Quality Development with CSS3

Quality Development with HTML5 & CSS3

SCREEN SIZE<link  rel="stylesheet"media="screen  and  (min-­‐width:  960px)"  href="960.css">

@media  screen  and  (min-­‐width:  960px)  {...

}

@letscounthedays

Page 67: Quality Development with CSS3

Quality Development with HTML5 & CSS3

ORIENTATION@media  screen  and  (min-­‐width:  960px)  and  (orientation:  portrait),  screen  and  (min-­‐width:  480px)  and  (orientation:  landscape)  {...

}

@letscounthedays

Page 68: Quality Development with CSS3

Quality Development with HTML5 & CSS3

MEDIA QUERIES• aspect-­‐ratio• color• device-­‐aspect-­‐ratio• device-­‐height• device-­‐width• height• max-­‐height• max-­‐width• monochrome• orientation• resolution• width

@letscounthedays

Page 69: Quality Development with CSS3

Quality Development with HTML5 & CSS3

QUESTIONS?Thank you!

@letscounthedays