Quality Development with CSS3

QUALITY DEVELOPMENT
WITH CSS3

Shay Howe
September 2011
www.shayhowe.com – @letscounthedays

SHAY HOWE
www.shayhowe.com – @letscounthedays

Quality Development with HTML5 & CSS3 @letscounthedays

HTML5 CSS3
Markup language to give Presentation language to
content structure and give content style and
meaning. appearance.


CSS3

VENDOR PREFIXES
Chrome Opera
-‐chrome-‐ -‐o-‐

Microsoft Webkit
-‐ms-‐ -‐webkit-‐

Mozilla
-‐moz-‐


VENDOR PREFIXES
section
{
-‐chrome-‐border-‐radius:
5px;
-‐ms-‐border-‐radius:
5px;
-‐moz-‐border-‐radius:
5px;
-‐o-‐border-‐radius:
5px;
-‐webkit-‐border-‐radius:
5px;
border-‐radius:
5px;
}


SELECTORS


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


:TARGET PSEUDO-CLASS
section#web-‐design:target
{
...
}

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


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

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

input:checked
{
...
}
Checked input


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


: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


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


: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


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


BACKGROUNDS


MULTIPLE BACKGROUNDS
section
{
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;
}


BACKGROUND-SIZE
section
{
background-‐size:
178px
238px;
}

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


BACKGROUND-CLIP
section
{
background-‐clip:
border-‐box;
}

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


BACKGROUND-ORIGIN
section
{
background-‐origin:
border-‐box;
}

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


BORDERS


BORDER-RADIUS
section
{
border-‐radius:
5px;
}

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


ELLIPTICAL CORNERS
section
{
border-‐radius:
60px
/
30px;
}

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


BORDER-IMAGE
section
{
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;
}


BORDER-IMAGE KEYWORDS
section
{
border-‐image:
url(paper.png)
10
repeat;
border-‐width:
10px;
}

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


GRADIENTS


LINEAR-GRADIENT
section
{
background-‐color:
#f60;

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

linear-‐gradient(top,
#f60,
#f00);

}


COLOR STOPS
section
{
linear-‐gradient(left,

#f9e600,

#6f156c
35%,

#fd7c00
65%,

#002874);
}


RADIAL-GRADIENT
section
{

radial-‐gradient(center
45deg,
circle
closest-‐corner,

#ff0,
#f60);
}


ADDITIONAL
FEATURES


CALC
section
{
width:
600px;
width:
calc(100%
-‐
20px);
}

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


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;

}


FONT-FACE


MULTI-COLUMN LAYOUTS
section
{
column-‐count:
3;
column-‐gap:
20px;
}

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


MULTI-COLUMN LAYOUTS


BOX & TEXT SHADOWS
select
{
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);
}


BOX & TEXT SHADOWS


OPACITY
section
{
rgba(255,
102,
0,
0.5);
}

section
{
hlsa(24,
100%,
100%,
0.5);
}


TEXT-OVERFLOW
select
{
text-‐overflow:
ellipsis;
}


TRANSFORMS


ROTATE
section
{
transform:
rotate(10deg);
}

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


ORIGIN
section
{
transform:
rotate(30deg);
transform-‐origin:
100%
0;
}

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


SCALE
section
{
transform:
scaleX(1.5);
transform:
scaleY(.4);
}

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

section
{

transform:
scale(.4);
}


SKEW
section
{
transform:
skewX(10deg);
transform:
skewY(30deg);
}

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


TRANSLATE
section
{
transform:
translateX(50px);
transform:
translateY(10%);
}

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


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


HOMEWORK
3D Transforms
matrix3d
perspective
perspective-‐origin
rotate3d
scale3d
translate3d


TRANSITIONS


TRANSITIONS
section
{
transition-‐property:
color;
transition-‐duration:
.25s;
transition-‐timing-‐function:
linear;
}

section
{
background-‐color;
.5s;
transition-‐delay:
.25s;
ease-‐in;
}


TRANSITIONS
section
{
color,
background-‐color;
.25s,
.5s;
transition-‐delay:
0,
.25s;
linear,
ease-‐in;
}

section
{
transition:

color
.25s
linear,
background-‐color
.5s
.25s
ease-‐in;
}


TRANSITIONS
section
{
transition:
all
.25s
linear;
}

Transitionable Properties
Backgrounds, Borders, Colors, Dimensions, Fonts,
Margins, Opacity, Padding, Position, Transforms


KEYFRAME
ANIMATIONS


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


KEYFRAMES
section
{
animation:
walking
5s
1
ease-‐in-‐out;
}


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


ANIMATIONS


MEDIA QUERIES


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

href="960.css">

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


ORIENTATION
@media
screen
and
(min-‐width:
960px)
and

(orientation:
portrait),
screen
and
(min-‐
width:
480px)
and
(orientation:
landscape)
{
...
}


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


QUESTIONS?
Thank you!


Quality Development with CSS3

More Related Content

What's hot

Viewers also liked

Similar to Quality Development with CSS3

Recently uploaded

Quality Development with CSS3