CHEAT SHEET

WEB DESIGN CSS3

Createdlbyl@Manzl(lhttp://twitter.com/Manzl)l

http://www.emezeta.com/
Colors

CSSBSyntax

KeywordsIyRoyalBlue;
HexadecimalIyR%SC9ES;yyyyyR%CE;
RGBBmodelIyRGB6C85SH85LL89;
HSLBmodelIBHSL6LL853S#5//#9;
transparent

selectorBBxidBB#classBBIpseudoclassBBIIpseudoelementBB[attr]BB{
propertyBBIBBvalueBB;
}
Backgrounds

colorIy[color];
backgroundDcolorIy[color];
backgroundDimageIBurl6image0jpg9; none
backgroundDrepeatIB repeat repeat,x repeat,y no,repeat
backgroundDattachmentIB scroll fixed
backgroundDpositionIB[pos,x]y[pos,y];

Fonts

fontDfamilyIy[fontS]5y[fontL]5y[font7]5y000y;
serif sans,serif cursive fantasy monospace

xx,small x,small small medium

fontDsizeIB[size]yyyyyyyyyyyyyyyyyyy
large x,large xx,large smaller larger
fontDstyleIB normal italic oblique
fontDweightIB[SHH,9HH]y normal bold lighter bolder

fontIB style variant weight size2height family

ElementsB(types)

zDindexI

Displacement

floatIB none left right

15 5
-5

clearI none left right both

MarginsBandBpaddings

margin.paddingIB top right bottom left

margin.paddingIB top rightyleft bottom
margin.paddingIB topybottom leftyright
margin.paddingIB topyrightybottomyleft

zDtop
zDleft
zDright
zDbottom

AA

letterDspacingIy[size]; normal
normal
lineDheightIB[size];yyyyyyyyyyyyyyyyyy
textDindentIB[size];
wordDspacingIB[size]; normal
whiteDspaceIB normal no,wrap pre

fontDvariantIB normal small,caps

textDdecorationI none underline overline

tabDsizeIy[size];
textDalignI left center right justify
verticalDalignIB[size] baseline
sub super top middle bottom
text,top text,bottom

listDstyleDimageIBurl6image0png9;y none
listDstyleDpositionI inside outside
listDstyleDtypeIBdisc circle square none

default crosshair help move

pointer progress text wait
none context,menu cell
vertical,text alias copy
no,drop not,allowed all,scroll
n
nw
ne
col,resize
w
e ,resize
row,resize
sw

dashed
double

Columns

groove

columnDwidthIy[size];
columnDcountIB[number]; auto
columnsIB width count

inset
outset

bottom
margin

10mm 4.23mm

1in

padding
border

listDstyleIB type position image

positionIB static absolute relative fixed

top.right.bottom.leftIB[size]y auto
clipDpathIBurl6shape0svg9y shape auto
overflowIB visible hidden scroll auto

ridge

bottom-right

lower,alpha upper,alpha
i#Bii#BBBBBBBBI#BII# lower,roman upper,roman
a#Bb#BBBBBA#BB#

PositionBtypes

dotted

25.4mm

]#B*#BB[]#B[*# decimal decimal,leading,zero

se

solid

top-right

bottom-left

outlineDcolorIy[color]; invert
outlineDstyleIB[style];
outlineDwidthIB[size]; thin medium thick
outlineI color style width
Lists

Styles

right

Outlines

MouseBcursors

top

left

lowercase uppercase

cursorIyurl6image0png9

borderDrightDz
borderDbottomDz
borderDleftDz

top-left

line,through

textDtransformIB none capitalize

pre,line pre,wrap

borderDcolorIy[color];
borderDwidthIB[size]; thin medium thick
borderDstyleIB[style];y
borderDtopDz

Locations

1em 0.5em

borderDcollapseI separate collapse

borderDspacingIBy[size];
captionDsideIB top bottom
emptyDcellsI show hide
tableDlayoutIB auto fixed
FontsB(variants)

Border

borderIB width style color

normal
2ex
1ex

FontB(aligmentsBandBspacing)

displayIB inline block inline,block none list,item

table table,cell table,row
visibilityIB visible hidden collapse

RGB6C85SH85LL85yH089;
HSL6LL853S#5//#5yH089;
currentColor

Tables

4ex

2em

backgroundIB color image repeat attachment position

withBalphaBchannel

0.35mm

1cm 1pc 1mm 1pt

Dimensions

maxDwidthIy[size]; none
minDwidthIB[size]; none
widthIB[size] auto
zDheight

ColumnsBseparator

columnDruleDwidthIB[size];
columnDruleDstyleIB[style];
columnDruleDcolorIB[color];y
columnDruleIB width style color
columnDgapIy[size]; normal
columnDspanIB[number]; all
columnDfillIB balance auto

CHEAT SHEET

WEB DESIGN CSS3

Created by @Manz ( http://twitter.com/Manz )

http://www.emezeta.com/

Gradients

LinealGgradientGpDirectionT

3webkit3
3moz3
5B2deg
toGtopGleft
toGtopGright
3ms3
56xdeg
5xdeg
3o3
toGtop

background3imagejG
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx;
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O
OOOOOOrepeating8linear8gradientkXXXx;
OOOOOOrepeating8radial8gradientkXXXx;

toGleft

6*2deg

Shadows

v2deg

67xdeg

toGright

toGbottomGleft

ShadowsGorGbackgrounds

RadialGgradientGpOptionsT

background3imagejOurlkback1Xpngx4Ourlkback2Xpngx4OXXX;
background3repeatjGno8repeat4Orepeat8x4OXXX;

shapejG ellipse circle

sizejG[size] farthest8corner closest8corner
farthest8side
closest8side
line8through
O
center
top
left
right
bottom
posj

7F2deg

toGbottomGright

toGbottom

Backs

background3clipjG border8box padding8box content8box

background3originjG padding8box border8box content8box
background3sizejG[size8w]O[size8h]; cover contain auto

topOleft topOright bottomOleft bottomOright

backgroundjG color position size repeat origin clip att img

RoundGbordersGCSS5

TypographGCSS5

Pagination

@font3faceG{
GGGfont3familyjGbOpenOSansb;
GGGfont3weightjO3__;O
GGGsrcjOlocalkbOpenOSansbx4
GGGurlkfileXttfxOformatkbtruetypebx4
GGGurlkfileXwoffxOformatkbwoffbx;O}

@pageG{
OOOOsize:O[width]O[height];

FontsGCSS5

border3image3outsetjG[size]O
border3image3repeatjG stretch repeat round space
border3image3slicejG top right bottom left
border3image3sourcejGurlkimageXpngx
border3image3widthjG[size]

font3stretchjG ultra8condensed
G extra8condensed condensed semi8condensed

Transitions

normal semi8expanded expanded

extra8expanded ultra8expanded

text3overflowjG[text]; clip ellipsis

text3justifyjG auto inter8word distribute none
font3size3adjustjG[number] none

CSSGFilters
transition3propertyjG[css8property]; none all TransformationsG5D
transformjGtranslate3dkx4Oy4Ozx; filterjG[filter]knx
transition3durationjG[time];
knx
filter8func
transition3timing3functionjG[timing8function] transformjGtranslateZkzx;
transformjGscale3dkx4Oy4Ozx;
grayscalejG[_XXX1]
transition3delayjG[time];

transitionjG property duration t8function delay

Transformaciones

transform3originjG[pos8x]O[pos8y]O[pos8z];
transform3stylejG flat preserve83d

transformjGscaleZkzx;
transformjGrotate3dkx4y4z4degx;
transformjGrotateZkdegx;
transformjGperspectiveknx;
transformjGmatrix3dkn4n4n4XXXx

timing8function cubic8bezierkx

Animations

ease
linear
ease8in
ease8out
ease8in8out

k_X254O_X14O_X254O1x
k_X__4O_X_4O1X__4O1x
k_X424O_X_4O1X__4O1x
k_X__4O_X_4O_X584O1x
k_X424O_X_4O_X584O1x

animation3namejG[name]; none
animation3durationjG[time];O
animation3timing3functionj
animation3delayjG[time];
animation3iteration3countjG[number]; infinite
animation3directionjG normal reverse alternate alternate8reverse
animation3fill3modejG none forwards backwards both
animation3play3statejG running paused
animationjG name duration timing8func delay i8c dir f8m p8s

landscape portrait auto

OOOOmargin:O[XXX]
OOOOorphans:O[number];
OOOOwidows:O[number];O}

http://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400

BordersGwithGimages

border3imagejG source slice width outset repeat

@mediaGprintG{
OOOOpropiedadO:Ovalor;
}
@mediaGscreenG{
OOOOpropiedadO:Ovalor;
}
@mediaGscreenGand
pmax3widthjGB42pxT
{
OOOOpropiedadO:Ovalor;
}

74xdeg

text3shadowjG[pos8x]O[pos8y]O[blur]O[color]; none
box3shadowjO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset

border3radiusjG top right bottom left border3top3left3h

border3radiusjG topObottom leftOright border3top3right3h
border3bottom3left3h
border3radiusjGGtopOrightObottomOleft
border3bottom3right3h

Media

2
6*2 deg v2

blurjG[size]O
sepiajG[_XXX1]
saturatejG[_XXX1]
opacityjG[_XXX1]
brightnessjG[_XXX1]O
contrastjG[_XXX1]
hue3rotatejG[deg]
invertjG[_XXX1]
filterjGf7pnTGf6pnTG999

RotationG6D

transformjGrotateXkdeg_xx;
transformjGrotateYkdeg_yx;
transformjGrotatekdegx;
ScaleG6D

transformjGscaleXkxx;
transformjGscaleYkyx;
transformjGscalekx4Oyx;
TranslationG6D

transformjGtranslateXkxx;
transformjGtranslateYkyx;
transformjGtranslatekx4Oyx;
SkewG6D

transformjGskewXkdeg_xx;
transformjGskewYkdeg_yx;
transformjGskewkdeg4Odegx;

7F2

Keyframes

@3vendor3keyframes

@keyframesGnameanimationG{
GGGG2)G{Gpropiedad:OvalorO}G
GGGG999
GGGG722)G{Gpropiedad:OvalorO}
2)GPGfrom
}
722)GPGto Z