Quality CSS3 Development

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 CSS3 Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Quality CSS3 Development

Similar to Quality CSS3 Development (20)

Recently uploaded

Recently uploaded (20)

Quality CSS3 Development