QUALITY DEVELOPMENT
WITH CSS3
Shay HoweSeptember 2011www.shayhowe.com – @letscounthedays
Quality Development with HTML5 & CSS3
SHAY HOWEwww.shayhowe.com – @letscounthedays
@letscounthedays
Quality Development with HTML5 & CSS3
HTML5Markup language to give
content structure and meaning.
@letscounthedays
CSS3Presentation language to
give content style and appearance.
Quality Development with HTML5 & CSS3 @letscounthedays
Quality Development with HTML5 & CSS3 @letscounthedays
Quality Development with HTML5 & CSS3
CSS3
@letscounthedays
Quality Development with HTML5 & CSS3
VENDOR PREFIXESChrome-‐chrome-‐
Microsoft-‐ms-‐
Mozilla-‐moz-‐
@letscounthedays
Opera-‐o-‐
Webkit-‐webkit-‐
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
Quality Development with HTML5 & CSS3
SELECTORS
@letscounthedays
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
Quality Development with HTML5 & CSS3
:TARGET PSEUDO-CLASSsection#web-‐design:target { ... }
http://www.shayhowe.com/#web-‐design
@letscounthedays
Quality Development with HTML5 & CSS3
ELEMENT PSEUDO-CLASSESinput[type="text"]:enabled { ... }Enabled input
input[type="text"]:disabled { ... }Disabled input
input:checked { ... }Checked input
@letscounthedays
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
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
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
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
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
Quality Development with HTML5 & CSS3
SELECTORS
@letscounthedays
Quality Development with HTML5 & CSS3
BACKGROUNDS
@letscounthedays
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
Quality Development with HTML5 & CSS3
BACKGROUND-SIZEsection {background-‐size: 178px 238px;
}
section {background-‐size: 85% auto;
}
@letscounthedays
Quality Development with HTML5 & CSS3
BACKGROUND-CLIP
section {background-‐clip: border-‐box;
}
section {background-‐clip: padding-‐box;
}
@letscounthedays
Quality Development with HTML5 & CSS3
BACKGROUND-ORIGIN
section {background-‐origin: border-‐box;
}
section {background-‐origin: content-‐box;
}
@letscounthedays
Quality Development with HTML5 & CSS3
BACKGROUNDS
@letscounthedays
Quality Development with HTML5 & CSS3
BORDERS
@letscounthedays
Quality Development with HTML5 & CSS3
BORDER-RADIUSsection {border-‐radius: 5px;
}
section {border-‐radius: 5px 20px 60px 0;
}
@letscounthedays
Quality Development with HTML5 & CSS3
ELLIPTICAL CORNERSsection {border-‐radius:60px / 30px;
}
section {border-‐radius:5px 10px 6px 20px / 10px 30px 40px 80px;
}
@letscounthedays
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
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
Quality Development with HTML5 & CSS3
BORDERS
@letscounthedays
Quality Development with HTML5 & CSS3
GRADIENTS
@letscounthedays
Quality Development with HTML5 & CSS3
LINEAR-GRADIENTsection {background-‐color:#f60;
background-‐image:url(gradient.png);
background-‐image:linear-‐gradient(top, #f60, #f00);
}
@letscounthedays
Quality Development with HTML5 & CSS3
COLOR STOPSsection {background-‐image:
linear-‐gradient(left, #f9e600, #6f156c 35%, #fd7c00 65%, #002874);
}
@letscounthedays
Quality Development with HTML5 & CSS3
RADIAL-GRADIENTsection { background-‐image:
radial-‐gradient(center 45deg,circle closest-‐corner, #ff0, #f60);
}
@letscounthedays
Quality Development with HTML5 & CSS3
GRADIENTS
@letscounthedays
Quality Development with HTML5 & CSS3
ADDITIONAL FEATURES
@letscounthedays
Quality Development with HTML5 & CSS3
CALCsection {width: 600px;width: calc(100% -‐ 20px);
}
section {width: 100px;width: calc(100% -‐ 20px / 6);
}
@letscounthedays
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
Quality Development with HTML5 & CSS3
FONT-FACE
@letscounthedays
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
Quality Development with HTML5 & CSS3
MULTI-COLUMN LAYOUTS
@letscounthedays
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
Quality Development with HTML5 & CSS3
BOX & TEXT SHADOWS
@letscounthedays
Quality Development with HTML5 & CSS3
OPACITYsection {background-‐color: rgba(255, 102, 0, 0.5);
}
section {background-‐color: hlsa(24, 100%, 100%, 0.5);
}
@letscounthedays
Quality Development with HTML5 & CSS3
TEXT-OVERFLOWselect {text-‐overflow: ellipsis;
}
@letscounthedays
Quality Development with HTML5 & CSS3
TRANSFORMS
@letscounthedays
Quality Development with HTML5 & CSS3
ROTATEsection {transform: rotate(10deg);
}
section {transform: rotate(-‐30deg);
}
@letscounthedays
Quality Development with HTML5 & CSS3
ORIGINsection {transform: rotate(30deg);transform-‐origin: 100% 0;
}
section {transform: rotate(30deg);transform-‐origin: right top;
}
@letscounthedays
Quality Development with HTML5 & CSS3
SCALEsection {transform: scaleX(1.5);transform: scaleY(.4);
}
section {transform: scale(1.5, .4);
}
section { transform: scale(.4);}
@letscounthedays
Quality Development with HTML5 & CSS3
SKEWsection {transform: skewX(10deg);transform: skewY(30deg);
}
section {transform: skew(10deg, 30deg);
}
@letscounthedays
Quality Development with HTML5 & CSS3
TRANSLATEsection {transform: translateX(50px);transform: translateY(10%);
}
section {transform: translate(50px, 10%);
}
@letscounthedays
Quality Development with HTML5 & CSS3
MULTIPLE TRANSFORMSsection {transform: rotate(30deg);transform: scale(.4);transform: skew(-‐15deg, -‐15deg);transform: translate(50px, 10%);
}
@letscounthedays
Quality Development with HTML5 & CSS3
HOMEWORK3D Transformsmatrix3dperspectiveperspective-‐originrotate3dscale3dtranslate3d
@letscounthedays
Quality Development with HTML5 & CSS3
TRANSFORMS
@letscounthedays
Quality Development with HTML5 & CSS3
TRANSITIONS
@letscounthedays
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
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
Quality Development with HTML5 & CSS3
TRANSITIONSsection {transition: all .25s linear;
}
Transitionable PropertiesBackgrounds, Borders, Colors, Dimensions, Fonts, Margins, Opacity, Padding, Position, Transforms
@letscounthedays
Quality Development with HTML5 & CSS3
TRANSITIONS
@letscounthedays
Quality Development with HTML5 & CSS3
KEYFRAME ANIMATIONS
@letscounthedays
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
Quality Development with HTML5 & CSS3
KEYFRAMESsection {animation: walking 5s 1 ease-‐in-‐out;
}
@letscounthedays
Quality Development with HTML5 & CSS3
ANIMATION PROPERTIES• animation-‐name• animation-‐delay• animation-‐direction• animation-‐duration• animation-‐iteration-‐count• animation-‐timing-‐function
@letscounthedays
Quality Development with HTML5 & CSS3
ANIMATIONS
@letscounthedays
Quality Development with HTML5 & CSS3
MEDIA QUERIES
@letscounthedays
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
Quality Development with HTML5 & CSS3
ORIENTATION@media screen and (min-‐width: 960px) and (orientation: portrait), screen and (min-‐width: 480px) and (orientation: landscape) {...
}
@letscounthedays
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
Quality Development with HTML5 & CSS3
QUESTIONS?Thank you!
@letscounthedays
Top Related