Stephanie Rewis - css-startech

CSS3
The
web’s
Swiss
Army
Knife
updated
and
improved

Thursday, October 27, 2011

Stephanie (Sullivan) Rewis
Front-‐end
developer
Principal
w3conversions.com
Wrote
the
CSS
Layouts
in
Dreamweaver
WaSP
corporate
liaison
to
Adobe
Customized
corporate
training
&
mentoring
Author
&
Speaker
TwiFer
addict
(@stefsull)


If
we
use
these
techniques
right
[HTML
and
CSS3],

we
can
get
rid
of
half
of
the
images
on
the
web,

because
they're
used
for
styling.
—
Håkon
Wium
Lie


Benefits of CSS3
Reduced
development
and
maintenance
0me

Increased
usability
&
accessibility
Be8er
search
engine
placement
due
to
real
text
and

faster
pages
Op0mized
styles
based
on
device
capabili0es
Increased
page
performance
Reducing
the
number
of
HTTP
requests...is
the
most

important
guideline
for
improving
performance
for
ﬁrst

0me
visitors.
Yahoo! Excep,onal Performance Team,

h8p://developer.yahoo.com/performance/rules.html


CSS is Modular
It
will
never
be
done

Modules
are
in
varied

states
of
compleVon


CSS3 Prefixes
You
can
use
it
today—
but
know
your
preﬁxes

-‐moz-‐
Mozilla

(Gecko
browsers)
-‐webkit-‐
Safari

(plus
WebKit
browsers)
-‐o-‐
Opera
Soware
-‐ms-‐
Microso
-‐khtml-‐
Konqueror

browser
(plus
Safari
1)


When Can I Use...
CompaVbility
tables
for
features
in
HTML5,
CSS3,

SVG
and
other
upcoming
web
technologies


Modernizr — My Hero!
hFp://www.modernizr.com
Feature-‐detecVon
library
for
HTML5
and
CSS3
Modernizr
creates
the
HTML5
elements
in
the
DOM


Modernizr - Feature Detection
Link
to
the
script
&
add
<html
class=”no-‐js”>
Modernizr
changes
the
no-‐js
class
to
a
long
string

of
classes
that
you
can
use
to
serve
diﬀerent
CSS

or
JS
to
a
browser
depending
on
its
lack
of

capabiliVes.
ie:
<html
class=”
js
canvas
canvastext
geolocaVon

crosswindowmessaging
no-‐websqldatabase no-‐indexeddb

hashchange
no-‐historymanagement
draganddrop
no-‐websockets

rgba
hsla
mulVplebgs
backgroundsize
borderimage
borderradius

boxshadow
opacity
no-‐cssanimaVons
csscolumns
cssgradients
no-‐
cssreﬂec8ons
csstransforms
no-‐csstransforms3d no-‐csstransi8ons

video
audio
localstorage
sessionstorage
webworkers

applicaVoncache
svg
no-‐smilsvgclippaths
foniace”>


CSS based on abilities
Write
CSS
for
browsers
missing
support:
.no-‐cssgradients
.element
{

background-‐color:
#value;

/*or*/

background-‐image:
url(img/gradient.jpg);
}

Or
write
CSS
so
it’s
only
shown
to
capable

browsers:
.
cssgradients
.element
{

-‐webkit,
-‐moz,
-‐ms,
-‐o,
etc;
}


Backgrounds


Three Boxes (Box Model)

border


background-position (CSS3)
Four
values
are
now
possible:
boFom

10px

le

-‐15px
x-‐axis y-‐axis

boFom

10px

le

-‐15px


background-repeat (CSS3)
Double
values
can
now
be
used:
x-‐axis y-‐axis
background-‐repeat:
repeat
no-‐repeat;
Using
a
single
“repeat”
assumes
a
repeat
in
both

direcVons.
Two new values:
space
-‐
repeat
as
many
Vmes
as
will
ﬁt
with
equal

spacing
between
images
round
-‐
rescales
the
image
so
it

ﬁts
an
equal
number
of
Vmes


Flexible Control
New
levels
of
control
with
new
combinaVons

no-‐repeat
space;

space
round;


background-origin
Background-‐origin
speciﬁes
the
star-ng point
for
the
background

image
border-‐box
-‐
posiVons
the

background
image
relaVve

to
the
outer
edge
of
the
border
padding-‐box
(default)
-‐
posiVons

the
background
image
relaVve

to
the
outer
edge
of
the
padding

(inner
edge
of
the
border)
content-‐box
-‐
posiVons
the

background
image
relaVve
to

the
outer
edge
of
the
content

(inner
edge
of
the
padding)


background-clip
Background-‐clip
hides
a
porVon
of
your
background

border-‐box
(default)
-‐
clips

backgrounds
relaVve
to
the
outer

edge
of
the
border
padding-‐box
-‐
clips
backgrounds

relaVve
to
the
outer
edge
of
the

padding
(inner
edge
of
the
border)
content-‐box
-‐
clips
backgrounds

relaVve
to
the
outer
edge
of
the

content
(inner
edge
of
the

padding)


background-size
Background-‐size
lets
you
specify
the
size
of
a
background
image
—

either
as
a
fixed
value,
or
relaVve
to
the
background posi0oning
area
pixels
-‐
define
one
or
both
values
percents
-‐
define
one
or
both
values
cover
-‐
covers
the
enVre
space
using
the
lesser
width
or
height.

Warning:
Clipping
may
occur.
contain
-‐
shows
the
enVre
image
based
on
the
greater
height

or
width
of
the
image.
This
means
the
image
may
not

completely
fill
the
background
posiVoning
area.
When
using
cover/contain
on
the
body
element,
set
the
height

of
the
html
element
to
100%


.freshest { /* contains awning background */
! width: 33.375em;
! background-size: 100% auto; /* this allows the background image to
scale on the x-axis WITH larger text sizes */
! font-size: 1em;
}
.homeLogo { /* logo base of the vege stand */
! width: 33.75em; !
! height: 18.75em;
! font-size: 1em; /* this causes image in the page to scale up as well */
! -ms-interpolation-mode: bicubic; /* this helps IE to play nice when
scaling */
}
.navMain li { /* vege baskets */
! height: 11.25em;
! background-size: 100% 100%; /* this allows navigation images to scale
both directions WITH larger text */
}


More Images - More Better
Syntax
(comma
separated):
url(“image01.jpg”),
url(image02.jpg”);
Subsequent
background
properVes,
such
as

background-‐repeat
and
background-‐posiVon,
use

a
comma-‐delimited
list
of
values
which

correspond
to
the
individual
background
images

url(“image01.jpg”),
url(image02.jpg”);
background-‐posiVon:
le
top,

right
boFom;

repeat-‐x,

no-‐repeat;
background-‐size:

250px,

cover;


Shorthand Ain’t So Short
Background
shorthand
should be avoided
because
it

resets
everything!
transparent;
none;
background-‐posi0on:
0
0;
background-‐size:
auto;

repeat;
background-‐clip:
border-‐box;
background-‐origin:
padding-‐box;
background-‐a8achment:
scroll;


Alpha Gradients
Gradients
are
applied
to
an
element
as
a
background-‐image
Create
an
rgba
or
hsla
black
or
white
gradients
Vary
the
opacity
instead
of
the
color
for
a
more

so,
ﬂexible
eﬀect
that
can
be
applied
over
any

color
on
the
page


Combined Backgrounds


Background Combined
Background-‐image
Gradient
Background-‐color
Background-‐image

rgb(96,147,201);
url(../images/
santorini.jpg),
-‐webkit-‐linear-‐gradient(top,

rgba(255,255,255,.7)
0%,rgba
(255,255,255,0)
100%);
url(../images/
santorini.jpg),
-‐moz-‐linear-‐gradient(top,

rgba(255,255,255,.7)
0%,rgba
(255,255,255,0)
100%);
no-‐repeat,
repeat-‐x;
background-‐posiVon:
center
boFom,
le

top;
-‐webkit-‐background-‐size:
contain,
250px;

-‐moz-‐background-‐size:
contain,
250px;

background-‐size:
contain,
250px;


Pseudo-elements


Pseudo-element selectors
Also called generated content
place
content
into
your
CSS
and
have
it
appear
in
HTML

using
the
content
property
should
not
be
used
for
essenVal
content

specify
where
it
should
appear,
:before
or
:aer
the

content
of
the
element

8+

Pseudo-element selectors
generated content
.capVon:before
{

content:
“Figure: “;

font-‐weight:
bold;
}
<img
src=”img/baths.jpg>
<p
class="capVon">The
Baths
at
Virgin
Gorda</p>


We can create whole elements
div
{

width:
700px;

height:
400px;

posi8on: rela8ve;
}
div:before, div:aDer
{

/*
the
common
proper0es
for
both
selectors
*/

content:"";

posi8on: absolute;
}
div:before
{

top:
25px;

leU:
25px;

right:
25px;

bo8om:
25px;
}
div:aDer
{

top:
50px;

leU:
50px;

right:
50px;

bo8om:
50px;
}

Every element gets two!


Negative edge absolute positioning


Pseudo-elements with buttons
MulVple
layering
is
one
method
to
apply
mulVple
borders
on

buFons


Create multiple wrappers


Overlay gradients, borders & rgba


Add decorative images
.prof
.hd:before
{

content:
"";

posiVon:
absolute;

le:
-‐15px;

top:
11px;

width:
16px;

height:
24px;

background:
url(../img/point.png)
no-‐repeat
0
0;
}


Creating Shapes


Border Tip
Borders
meet
with
diagonal
intersecVons
height:
0;
width:
0;
border-‐width
determines

size
of
the
triangle
vary
border
widths
to
change

triangle
shape
use
transparency
on
3
sides


border-radius
Complete circle:
Width
and
height
are
equal
Radius
equals
half
of
width/height
plus
full
padding
Use
em
units
if
circle
contains
text
.reminder
{

height:
9em;

width:
9em;

padding:
2em;

-‐webkit-‐border-‐radius:
6.5em;

-‐moz-‐border-‐radius:
6.5em

border-‐radius:
6.5em;
}
Can
use
percentages
if
older
browser
support
is
not
required:

border-‐radius:
50%;


border-radius
Ellip-cal corners:
border-‐radius:
x-‐axis/y-‐axis;
First
value
extends
the
x-‐axis

Second
value
extends
the
y-‐axis

-‐webkit-‐border-‐radius:
100px/40px;

-‐moz-‐border-‐radius:
100px/40px;

border-‐radius:
100px/40px;

(Safari
3
&
4
used
non-‐standard:

border-‐radius:
25px
10px;)


transform
Skewed shapes:

-‐webkit-‐transform:
skew(-‐45deg);

-‐moz-‐transform:
skew(-‐45deg);

-‐ms-‐transform:
skew(-‐45deg);

-‐o-‐transform:
skew(-‐45deg);

transform:
skew(-‐45deg);


The lowly square
You
can
do
this,
right?
element
{

height:
150px;

width:
150px;
}


Shapes as
Pseudo-elements


Add triangles
div:before
{

content:
"";

posiVon:
absolute;

height:
0;

width:
0;

le:
-‐30px;

top:
30px;

border-‐right:
30px
solid
skyblue;

border-‐top:
15px
solid
transparent;

border-‐boFom:
15px
solid
transparent;;

}


Triangles for ribbons
Pseudo-‐element
triangles
added
as
the
top
and

boFom
of
a
ribbon


Speech bubbles
Round
pseudo-‐elements
Absolutely
posiVoned
below
their
parent
element.
Or
overlapped
so
that
the

top
pseudo-‐element
obscures
a
porVon
of
the
lower


Pulling the shapes together


Box-shadow


box-shadow as borders
Syntax:
values -‐ x oﬀset, y oﬀset, blur, spread, color

box-‐shadow:

0
0
0
5px
#6CC,

0
0
0
10px
#69C,

0
0
0
15px
#66C,

0
0
0
20px
#63C,

0
0
0
25px
#60C;

Tips:
Borders
are
placed
on
elements
from
the
inside
to
the
outside.


box-shadow on one side only
NegaVve
spread
value
can
be
used
to
make
the
box-‐shadow

show
on
only
one
side
of
the
element.


box-shadow on pseudo-elements
Place
box-‐shadows
on
pseudo-‐elements
to
create
a
variety
of
eﬀects.
.shadow:before
{

content:
“”;

posiVon:
absolute;

z-‐index:-‐1;

le:10px;

width:50%;

height:20%;

box-‐shadow:0
15px
10px
rgba(0,
0,
0,
0.7);

transform:rotate(-‐3deg);
}
(.shadow:aer
is
the
same,
but
reversed)


box-shadow on pseudo-elements
Nicolas
Gallagher’s

drop-‐shadows


CSS Regions
& Exclusions


CSS Regions
CSS
Regions
bring
new
properVes
to
CSS
that

provide:
text
containers
with
custom
shapes.
exclusion
shapes
which
text
will
wrap
around.
text
that
ﬂows
from
one
area
into
another.


Single Thread


Content Shape


Dynamic Exclusion


Variables


CSS Variables
“deﬁnes a new type of primi8ve value, the Variable,
which is accepted by all proper8es.”
@var $header-‐color
color
#000066;
@var $link-‐color
color
#0066CC;
@var $secondary-‐color
color
#CC0066;
a
{
color:
$link-‐color;
}
a:visited
{
color:
$secondary-‐color;
}
h1
{

color:
$header-‐color;


linear-‐gradient(leU,
$main-‐color,
transparent
25%);
}


Mixins (not accepted yet)
Mixins are blocks of rules that can be "mixed in" with normal
blocks of rules.
@mixin ‘alert’
{

background:
#FF0000;

color:
#FFFFF;

text-‐shadow:
0
0
3px
rgba(0,0,0,0.4);

anima0on:
‘a8en0ongrab’
300ms;
}
input:invalid:focus:aUer
{

content:
“INVALID”;

@mixin ‘alert’;
}
.alert
{

@mixin ‘alert’;

text-‐decora0on:
underline;
}


CSS Filters


CSS Filters
A
filter
effect
consists
of
a
series
of
graphics

operaVons
that
are
applied
to
a
given
source

graphic
(client-‐side)
to
produce
a
modified

graphical
result.

The
result
of
the
filter
effect
is
rendered
to
the

target
device
instead
of
the
original
source

graphic.
Based
on
SVG
filters.


Example filters
greyscale(amount)
sepia(amount)
saturate(amount)
hue-‐rotate(angle)
invert(amount)
opacity(amount)
gamma(amplitude
exponent
oﬀset)
blur(radiusX
radiusY)
sharpen(amount
radius
threshold)
drop-‐shadow(<shadow>)


Also being considered...
brightness,
contrast,
crop(x,
y,
w,
h)
exposure bloom(radius,
intensity)
halUone gloom(radius,
intensity)
mo0on-‐blur(radius,
angle) mosaic(w,h)
posterize(levels) displace(url,
intensity)
bump(x,
y,
radius,
intensity) edge-‐detect(intensity)
generators pinch(x,
y,
radius,
scale)
circle-‐crop(x,
y,
radius) twirl(x,
y,
radius,
angle)
aﬃne-‐transform(some

matrix)


Thank you!


Resources
w3conversions.com/resources.html
FleeVng
Epiphanies
-‐
My
blog
Box
shadow
on
one
side
blog
post
CSS
background-‐size
property
at
.netmagazine
Create
ﬂexible
imagery
for
the
web
-‐
Computer
Arts
Mastering
CSS
with
Dreamweaver
CS4

[New
Riders
Voices
that
MaFer]
Stephanie
Sullivan
&
Greg
Rewis
twiFer:
@stefsull
stef@w3conversions.com


Stephanie Rewis - css-startech

Recomendados

Recomendados

Más contenido relacionado

Similar a Stephanie Rewis - css-startech

Similar a Stephanie Rewis - css-startech (20)

Más de StarTech Conference

Más de StarTech Conference (19)

Último

Último (20)

Stephanie Rewis - css-startech