CHEAT SHEET

DISEÑO WEB CSS3

Creadospors@Manzs(shttp://twitter.com/Manzs)s http://www.emezeta.com/

SintaxiskCSS Colores

selectorkkHidkk#classkk0pseudoclasskk00pseudoelementkk[attr]kk{ Keywords0yRoyalBlue;
Hexadecimal0yR%SC/ES;yyyyyR%CE; withkalphakchannel
propertykk0kkvaluekkA RGBkmodel0yRGB6C85SH85LL89; RGBA6C85SH85LL85yH089;
} HSLkmodel0kHSL6LL85AS#533#9; HSLA6LL85AS#533#5yH089;
Coloreskykfondos transparent currentColor

backgroundDcolor0y[color]; color0y[color]; Tablas

4ex
backgroundDimage0kurl6image0jpg9; none normal borderDcollapse0 separate collapse
backgroundDrepeat0k repeat repeat,x repeat,y no,repeat
backgroundDattachment0k scroll fixed
backgroundDposition0k[pos,x]y[pos,y];
background0k color image repeat attachment position
AA
2em
2ex 1ex

1em 0.5em
A
borderDspacing0ky[size];
captionDside0k top bottom
emptyDcells0 show hide
tableDlayout0k auto fixed

Fuentes FuentekEalineacioneskykespaciadoF FuenteskEvariacionesF

fontDfamily0y[fontS]5y[fontL]5y[font7]5y000y; letterDspacing0y[size]; normal fontDvariant0k normal small,caps
serif sans,serif cursive fantasy monospace lineDheight0k[size];yyyyyyyyyyyyyyyyyy
normal textDdecoration0 none underline overline
fontDsize0k[size]yyyyyyyyyyyyyyyyyyy
xx,small x,small small medium textDindent0k[size]; line,through
large x,large xx,large smaller larger wordDspacing0k[size]; normal textDtransform0k none capitalize
fontDstyle0k normal italic oblique whiteDspace0k normal no,wrap pre lowercase uppercase
fontDweight0k[SHH,/HH]y normal bold lighter bolder pre,line pre,wrap
tabDsize0y[size]; Perfiles
font0k style variant weight size2height family
textDalign0 left center right justify outlineDcolor0y[color]; invert
Tiposkdekelementos verticalDalign0k[size] baseline outlineDstyle0k[style];
display0k inline block inline,block none list,item sub super top middle bottom outlineDwidth0k[size]; thin medium thick
table table,cell table,row text,top text,bottom outline0 color style width
visibility0k visible hidden collapse
Cursoreskdelkratón Listas
Desplazamiento zDindex0 cursor0yurl6image0png9 listDstyleDimage0kurl6image0png9;y none
float0k none left right default crosshair help move listDstyleDposition0 inside outside
clear0 none left right both 15 5 pointer progress text wait listDstyleDtype0kdisc circle square none
-5 none context,menu cell ]#k*#kk[]#k[*# decimal decimal,leading,zero
Márgeneskykespaciados vertical,text alias copy a#kb#kkkkkA#kB# lower,alpha upper,alpha
no,drop not,allowed all,scroll i#kii#kkkkkkkkI#kII# lower,roman upper,roman
margin.padding0k top right bottom left (Dtop n
margin.padding0k top rightyleft bottom col,resize nw ne
(Dleft listDstyle0k type position image
margin.padding0k topybottom leftyright (Dright row,resize w e ,resize

margin.padding0k topyrightybottomyleft (Dbottom sw se

s
Estilos Posicionamiento
Bordes position0k static absolute relative fixed
solid
borderDcolor0y[color]; top.right.bottom.left0k[size]y auto
borderDwidth0k[size]; thin medium thick dotted
clipDpath0kurl6shape0svg9y shape auto
borderDstyle0k[style];y borderDtopD( dashed overflow0k visible hidden scroll auto
border0k width style color borderDrightD(
borderDbottomD( double Columnas
borderDleftD(
Ubicaciones groove columnDwidth0y[size];
columnDcount0k[number]; auto
top ridge
columns0k width count
inset
top-left top-right Separadorkdekcolumnas
outset
columnDruleDwidth0k[size];
left right 25.4mm 10mm 4.23mm 0.35mm columnDruleDstyle0k[style];
columnDruleDcolor0k[color];y
bottom-left bottom-right 1in 1cm 1pc 1mm 1pt
columnDrule0k width style color
Dimensiones
bottom padding
maxDwidth0y[size]; none columnDgap0y[size]; normal
border minDwidth0k[size]; none columnDspan0k[number]; all
margin width0k[size] auto columnDfill0k balance auto
(Dheight
 CHEAT SHEET

DISEÑO WEB CSS3

Creado por @Manz ( http://twitter.com/Manz ) http://www.emezeta.com/

Gradientes DirecciónGenGgradienteGlineal
background8imageMG toGtop 8webkit8
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx; toGtopGleft úB6deg 8moz8
toGtopGright
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O ú4*deg ú*deg 8ms8
OOOOOOrepeating8linear8gradientkXXXx; 8o8
OOOOOOrepeating8radial8gradientkXXXx; toGleft 4á6deg j6deg toGright Medios
Sombras 45*deg 5x*deg EmediaGprintG{
text8shadowMG[pos8x]O[pos8y]O[blur]O[color]; none OOOOpropiedadO:Ovalor;
toGbottomGleft 5v6deg toGbottomGright
}
box8shadowMO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset toGbottom EmediaGscreenG{
FondosGoGsombrasGmúltiples OpcionesGdelGgradienteGradial OOOOpropiedadO:Ovalor;
}
background8imageMOurlkback1Xpngx4Ourlkback2Xpngx4OXXX; shapeMG ellipse circle
EmediaGscreenGand
background8repeatMGno8repeat4Orepeat8x4OXXX; sizeMG[size] farthest8corner closest8corner Cmax8widthMGBx6pxS
O farthest8side closest8side
line8through {
Fondos center top left right bottom
posM OOOOpropiedadO:Ovalor;
background8clipMG border8box padding8box content8box topOleft topOright bottomOleft bottomOright }
background8originMG padding8box border8box content8box
TipografíasGCSSú Paginación
background8sizeMG[size8w]O[size8h]; cover contain auto
Efont8faceG{ EpageG{
backgroundMG color position size repeat origin clip att img OOOOsize:O[width]O[height];
GGGfont8familyMGbOpenOSansb;
BordesGredondeados GGGfont8weightMO3__;O landscape portrait auto
border8radiusMG top right bottom left border8top8left83 GGGsrcMOlocalkbOpenOSansbx4 OOOOmargin:O[XXX]
border8radiusMG topObottom leftOright border8top8right83 GGGurlkfileXttfxOformatkbtruetypebx4 OOOOorphans:O[number];
border8radiusMGGtopOrightObottomOleft border8bottom8left83 GGGurlkfileXwoffxOformatkbwoffbx;O} OOOOwidows:O[number];O}
border8bottom8right83 http://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400
BordesGconGimágenes FuentesGCSSú
border8image8outsetMG[size]O font8stretchMG ultra8condensed RotaciónG4D
border8image8repeatMG stretch repeat round space G extra8condensed condensed semi8condensed transformMGrotateXkdeg_xx;
border8image8sliceMG top right bottom left normal semi8expanded expanded transformMGrotateYkdeg_yx;
border8image8sourceMGurlkimageXpngx extra8expanded ultra8expanded transformMGrotatekdegx;
border8image8widthMG[size]
text8overflowMG[text]; clip ellipsis
border8imageMG source slice width outset repeat text8justifyMG auto inter8word distribute none EscaladoG4D
font8size8adjustMG[number] none transformMGscaleXkxx;
Transiciones
transformMGscaleYkyx;
transition8propertyMG[css8property]; none all TransformacionesGúD FiltrosGCSS
transformMGscalekx4Oyx;
transition8durationMG[time]; transformMGtranslate3dkx4Oy4Ozx; filterMG[filter]knx
transition8timing8functionMG[timing8function] transformMGtranslateZkzx; filter8func knx
transformMGscale3dkx4Oy4Ozx; grayscaleMG[_XXX1] TranslaciónG4D
transition8delayMG[time];
transformMGscaleZkzx; blurMG[size]O transformMGtranslateXkxx;
transitionMG property duration t8function delay transformMGrotate3dkx4y4z4degx; sepiaMG[_XXX1] transformMGtranslateYkyx;
transformMGrotateZkdegx; saturateMG[_XXX1]
Transformaciones transformMGtranslatekx4Oyx;
transformMGperspectiveknx;
opacityMG[_XXX1]
transform8originMG[pos8x]O[pos8y]O[pos8z]; transformMGmatrix3dkn4n4n4XXXx
brightnessMG[_XXX1]O
transform8styleMG flat preserve83d contrastMG[_XXX1] DeformaciónG4D
timing8function cubic8bezierkx 6
hue8rotateMG[deg] transformMGskewXkdeg_xx;
Animaciones ease k_X254O_X14O_X254O1x transformMGskewYkdeg_yx;
4á6 deg j6 invertMG[_XXX1]
animation8nameMG[name]; none linear k_X__4O_X_4O1X__4O1x
filterMGf5CnSGf4CnSG222 transformMGskewkdeg4Odegx;
ease8in k_X424O_X_4O1X__4O1x 5v6
animation8durationMG[time];O Y
ease8out k_X__4O_X_4O_X584O1x
animation8timing8functionM
ease8in8out k_X424O_X_4O_X584O1x Fotogramas E8vendor8keyframes
animation8delayMG[time];
animation8iteration8countMG[number]; infinite EkeyframesGnameanimationG{
animation8directionMG normal reverse alternate alternate8reverse GGGG6pG{Gpropiedad:OvalorO}G
animation8fill8modeMG none forwards backwards both GGGG222
animation8play8stateMG running paused GGGG566pG{Gpropiedad:OvalorO}
6pGAGfrom
X
animationMG name duration timing8func delay i8c dir f8m p8s } 566pGAGto Z