CHEAT SHEET

WEB DESIGN CSS3

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

CSSBSyntax Colors

selectorBBxidBB#classBBIpseudoclassBBIIpseudoelementBB[attr]BB{ KeywordsIyRoyalBlue;
HexadecimalIyR%SC9ES;yyyyyR%CE; withBalphaBchannel
propertyBBIBBvalueBB; RGBBmodelIyRGB6C85SH85LL89; RGB6C85SH85LL85yH089;
} HSLBmodelIBHSL6LL853S#5//#9; HSL6LL853S#5//#5yH089;
Backgrounds transparent currentColor

backgroundDcolorIy[color]; colorIy[color]; Tables

4ex
backgroundDimageIBurl6image0jpg9; none normal borderDcollapseI separate collapse
backgroundDrepeatIB repeat repeat,x repeat,y no,repeat
backgroundDattachmentIB scroll fixed
backgroundDpositionIB[pos,x]y[pos,y];
backgroundIB color image repeat attachment position
AA
2em
2ex 1ex

1em 0.5em
A
borderDspacingIBy[size];
captionDsideIB top bottom
emptyDcellsI show hide
tableDlayoutIB auto fixed

Fonts FontB(aligmentsBandBspacing) FontsB(variants)

fontDfamilyIy[fontS]5y[fontL]5y[font7]5y000y; letterDspacingIy[size]; normal fontDvariantIB normal small,caps
serif sans,serif cursive fantasy monospace lineDheightIB[size];yyyyyyyyyyyyyyyyyy
normal textDdecorationI none underline overline
fontDsizeIB[size]yyyyyyyyyyyyyyyyyyy
xx,small x,small small medium textDindentIB[size]; line,through
large x,large xx,large smaller larger wordDspacingIB[size]; normal textDtransformIB none capitalize
fontDstyleIB normal italic oblique whiteDspaceIB normal no,wrap pre lowercase uppercase
fontDweightIB[SHH,9HH]y normal bold lighter bolder pre,line pre,wrap
tabDsizeIy[size]; Outlines
fontIB style variant weight size2height family
textDalignI left center right justify outlineDcolorIy[color]; invert
ElementsB(types) verticalDalignIB[size] baseline outlineDstyleIB[style];
displayIB inline block inline,block none list,item sub super top middle bottom outlineDwidthIB[size]; thin medium thick
table table,cell table,row text,top text,bottom outlineI color style width
visibilityIB visible hidden collapse
MouseBcursors Lists
Displacement zDindexI cursorIyurl6image0png9 listDstyleDimageIBurl6image0png9;y none
floatIB none left right default crosshair help move listDstyleDpositionI inside outside
clearI none left right both 15 5 pointer progress text wait listDstyleDtypeIBdisc circle square none
-5 none context,menu cell ]#B*#BB[]#B[*# decimal decimal,leading,zero
MarginsBandBpaddings vertical,text alias copy a#Bb#BBBBBA#BB# lower,alpha upper,alpha
no,drop not,allowed all,scroll i#Bii#BBBBBBBBI#BII# lower,roman upper,roman
margin.paddingIB top right bottom left zDtop n
margin.paddingIB top rightyleft bottom col,resize nw ne
zDleft listDstyleIB type position image
margin.paddingIB topybottom leftyright zDright row,resize w e ,resize

margin.paddingIB topyrightybottomyleft zDbottom sw se

s
Styles PositionBtypes
Border positionIB static absolute relative fixed
solid
borderDcolorIy[color]; top.right.bottom.leftIB[size]y auto
borderDwidthIB[size]; thin medium thick dotted
clipDpathIBurl6shape0svg9y shape auto
borderDstyleIB[style];y borderDtopDz dashed overflowIB visible hidden scroll auto
borderIB width style color borderDrightDz
borderDbottomDz double Columns
borderDleftDz
Locations groove columnDwidthIy[size];
columnDcountIB[number]; auto
top ridge
columnsIB width count
inset
top-left top-right ColumnsBseparator
outset
columnDruleDwidthIB[size];
left right 25.4mm 10mm 4.23mm 0.35mm columnDruleDstyleIB[style];
columnDruleDcolorIB[color];y
bottom-left bottom-right 1in 1cm 1pc 1mm 1pt
columnDruleIB width style color
Dimensions
bottom padding
maxDwidthIy[size]; none columnDgapIy[size]; normal
border minDwidthIB[size]; none columnDspanIB[number]; all
margin widthIB[size] auto columnDfillIB balance auto
zDheight
 CHEAT SHEET

WEB DESIGN CSS3

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

Gradients LinealGgradientGpDirectionT
background3imagejG toGtop 3webkit3
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx; toGtopGleft 5B2deg 3moz3
toGtopGright
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O 56xdeg 5xdeg 3ms3
OOOOOOrepeating8linear8gradientkXXXx; 3o3
OOOOOOrepeating8radial8gradientkXXXx; toGleft 6*2deg v2deg toGright Media
Shadows 67xdeg 74xdeg @mediaGprintG{
text3shadowjG[pos8x]O[pos8y]O[blur]O[color]; none OOOOpropiedadO:Ovalor;
toGbottomGleft 7F2deg toGbottomGright
}
box3shadowjO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset toGbottom @mediaGscreenG{
ShadowsGorGbackgrounds RadialGgradientGpOptionsT OOOOpropiedadO:Ovalor;
}
background3imagejOurlkback1Xpngx4Ourlkback2Xpngx4OXXX; shapejG ellipse circle
@mediaGscreenGand
background3repeatjGno8repeat4Orepeat8x4OXXX; sizejG[size] farthest8corner closest8corner pmax3widthjGB42pxT
O farthest8side closest8side
line8through {
Backs center top left right bottom
posj OOOOpropiedadO:Ovalor;
background3clipjG border8box padding8box content8box topOleft topOright bottomOleft bottomOright }
background3originjG padding8box border8box content8box
TypographGCSS5 Pagination
background3sizejG[size8w]O[size8h]; cover contain auto
@font3faceG{ @pageG{
backgroundjG color position size repeat origin clip att img OOOOsize:O[width]O[height];
GGGfont3familyjGbOpenOSansb;
RoundGbordersGCSS5 GGGfont3weightjO3__;O landscape portrait auto
border3radiusjG top right bottom left border3top3left3h GGGsrcjOlocalkbOpenOSansbx4 OOOOmargin:O[XXX]
border3radiusjG topObottom leftOright border3top3right3h GGGurlkfileXttfxOformatkbtruetypebx4 OOOOorphans:O[number];
border3radiusjGGtopOrightObottomOleft border3bottom3left3h GGGurlkfileXwoffxOformatkbwoffbx;O} OOOOwidows:O[number];O}
border3bottom3right3h http://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400
BordersGwithGimages FontsGCSS5
border3image3outsetjG[size]O font3stretchjG ultra8condensed RotationG6D
border3image3repeatjG stretch repeat round space G extra8condensed condensed semi8condensed transformjGrotateXkdeg_xx;
border3image3slicejG top right bottom left normal semi8expanded expanded transformjGrotateYkdeg_yx;
border3image3sourcejGurlkimageXpngx extra8expanded ultra8expanded transformjGrotatekdegx;
border3image3widthjG[size]
text3overflowjG[text]; clip ellipsis
border3imagejG source slice width outset repeat text3justifyjG auto inter8word distribute none ScaleG6D
font3size3adjustjG[number] none transformjGscaleXkxx;
Transitions
transformjGscaleYkyx;
transition3propertyjG[css8property]; none all TransformationsG5D CSSGFilters
transformjGscalekx4Oyx;
transition3durationjG[time]; transformjGtranslate3dkx4Oy4Ozx; filterjG[filter]knx
transition3timing3functionjG[timing8function] transformjGtranslateZkzx; filter8func knx
transformjGscale3dkx4Oy4Ozx; grayscalejG[_XXX1] TranslationG6D
transition3delayjG[time];
transformjGscaleZkzx; blurjG[size]O transformjGtranslateXkxx;
transitionjG property duration t8function delay transformjGrotate3dkx4y4z4degx; sepiajG[_XXX1] transformjGtranslateYkyx;
transformjGrotateZkdegx; saturatejG[_XXX1]
Transformaciones transformjGtranslatekx4Oyx;
transformjGperspectiveknx;
opacityjG[_XXX1]
transform3originjG[pos8x]O[pos8y]O[pos8z]; transformjGmatrix3dkn4n4n4XXXx
brightnessjG[_XXX1]O
transform3stylejG flat preserve83d contrastjG[_XXX1] SkewG6D
timing8function cubic8bezierkx 2
hue3rotatejG[deg] transformjGskewXkdeg_xx;
Animations ease k_X254O_X14O_X254O1x transformjGskewYkdeg_yx;
6*2 deg v2 invertjG[_XXX1]
animation3namejG[name]; none linear k_X__4O_X_4O1X__4O1x
filterjGf7pnTGf6pnTG999 transformjGskewkdeg4Odegx;
ease8in k_X424O_X_4O1X__4O1x 7F2
animation3durationjG[time];O Y
ease8out k_X__4O_X_4O_X584O1x
animation3timing3functionj
ease8in8out k_X424O_X_4O_X584O1x Keyframes @3vendor3keyframes
animation3delayjG[time];
animation3iteration3countjG[number]; infinite @keyframesGnameanimationG{
animation3directionjG normal reverse alternate alternate8reverse GGGG2)G{Gpropiedad:OvalorO}G
animation3fill3modejG none forwards backwards both GGGG999
animation3play3statejG running paused GGGG722)G{Gpropiedad:OvalorO}
2)GPGfrom
X
animationjG name duration timing8func delay i8c dir f8m p8s } 722)GPGto Z