css3-cheatsheet-emezeta

CHEAT SHEET

DISEÑO WEB CSS3

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

SintaxiskCSS Colores withkalphakchannel

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

Coloreskykfondos transparent

backgroundDcolor0y[color]; color0y[color]; A A4ex normal Tablas
2ex 1ex
backgroundDimage0kurl6image0jpg9; none A borderDcollapse0 separate collapse
2em 1em 0.5em borderDspacing0ky[size];
backgroundDrepeat0k repeat repeat,x repeat,y no,repeat captionDside0ktop bottom
emptyDcells0 show hide
backgroundDattachment0kscroll fixed tableDlayout0k auto fixed

backgroundDposition0k[pos,x]y[pos,y];

background0k color image repeat attachment position

Fuentes FuentekEalineacioneskykespaciadoF FuenteskEvariacionesF

fontDfamily0y[fontS]5y[fontL]5y[font7]5y000y; letterDspacing0y[size]; normal fontDvariant0k normal small,caps
lineDheight0k[size];yynyyoyyrymyyyayylyyyyyy textDdecoration0 none underline overline
serif sans,serif cursive fantasy monospace textDindent0k[size];
wordDspacing0k[size]; normal line,through
fontDsize0k[size]yxyyxyy,yysymyyyayylylyyyxyy,small small medium whiteDspace0knormal no,wrap pre
textDtransform0k none capitalize
large x,large xx,large smaller larger pre,line pre,wrap
lowercase uppercase
fontDstyle0k normal italic oblique tabDsize0y[size];
fontDweight0k[SHH,/HH]ynormal bold lighter bolder textDalign0 left center right justify Perfiles
verticalDalign0k[size] baseline
font0k style variant weight size2height family outlineDcolor0y[color]; invert
sub super top middle bottom outlineDstyle0k[style];
Tiposkdekelementos text,top text,bottom outlineDwidth0k[size]; thin medium thick
outline0 color style width
display0k inline block inline,block none list,item Cursoreskdelkratón
Listas
table table,cell table,row cursor0yurl6image0png9
listDstyleDimage0kurl6image0png9;y none
visibility0k visible hidden collapse default crosshair help move listDstyleDposition0 inside outside
pointer progress text wait listDstyleDtype0kdisc circle square none
Desplazamiento zDindex0 none context,menu cell
]#k*#kk[]#k[*# decimal decimal,leading,zero
float0k none left right 15 5 -5 a#kb#kkkkkA#kB# lower,alpha upper,alpha
clear0 none left right both i#kii#kkkkkkkkI#kII# lower,roman upper,roman

Márgeneskykespaciados vertical,text alias copy listDstyle0k type position image

margin.padding0k top right bottom left (Dtop no,drop not,allowed all,scroll Posicionamiento
margin.padding0k top rightyleft bottom (Dleft n
margin.padding0k topybottom leftyright (Dright col,resize nw ne position0k static absolute relative fixed
margin.padding0k topyrightybottomyleft (Dbottom top.right.bottom.left0k[size]y auto
row,resize w e ,resize clipDpath0kurl6shape0svg9y shape auto
overflow0k visible hidden scroll auto
Estilos sw se
s Columnas

Bordes solid columnDwidth0y[size];
columnDcount0k[number]; auto
borderDcolor0y[color]; dotted columns0k width count

borderDwidth0k[size]; thin medium thick Separadorkdekcolumnas

borderDstyle0k[style];y borderDtopD( dashed columnDruleDwidth0k[size];
border0k width style color borderDrightD( columnDruleDstyle0k[style];
borderDbottomD( double columnDruleDcolor0k[color];y
Ubicaciones borderDleftD( groove columnDrule0k width style color

top ridge columnDgap0y[size]; normal
inset columnDspan0k[number]; all
columnDfill0kbalance auto
top-left top-right outset

left right 25.4mm 10mm 4.23mm 0.35mm

bottom-left bottom-right 1in 1cm 1pc 1mm 1pt

bottom padding Dimensiones

maxDwidth0y[size]; none

margin border minDwidth0k[size]; none

width0k[size] auto (Dheight

CHEAT SHEET

DISEÑO WEB CSS3

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

Gradientes DirecciónGenGgradienteGlineal 8webkit8
8moz8
background8imageMG toGtop 8ms8
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx; 8o8
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O toGtopGleft úB6deg toGtopGright
OOOOOOrepeating8linear8gradientkXXXx; Medios
OOOOOOrepeating8radial8gradientkXXXx; ú4*deg ú*deg

toGleft 4á6deg j6deg toGright

Sombras 45*deg 5x*deg EmediaGprintG{
OOOOpropiedadO:Ovalor;
text8shadowMG[pos8x]O[pos8y]O[blur]O[color]; none toGbottomGleft 5v6deg toGbottomGright }
box8shadowMO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset
toGbottom EmediaGscreenG{
FondosGoGsombrasGmúltiples OOOOpropiedadO:Ovalor;
OpcionesGdelGgradienteGradial }
background8imageMOurlkback1Xpngx4Ourlkback2Xpngx4OXXX;
background8repeatMGno8repeat4Orepeat8x4OXXX; shapeMG ellipse circle EmediaGscreenGand
sizeMG[size] farthest8corner closest8corner Cmax8widthMGBx6pxS
Fondos O fartheslti8nsei8dtehrcoluogshest8side {
posM center top left right bottom OOOOpropiedadO:Ovalor;
background8clipMG border8box padding8box content8box }
background8originMG padding8box border8box content8box topOleft topOright bottomOleft bottomOright
background8sizeMG[size8w]O[size8h]; cover contain auto
TipografíasGCSSú Paginación
backgroundMGcolor position size repeat origin clip att img
Efont8faceG{ EpageG{
BordesGredondeados GGGfont8familyMGbOpenOSansb; OOOOsize:O[width]O[height];
GGGfont8weightMO3__;O
border8radiusMG top right bottom left border8top8left83 GGGsrcMOlocalkbOpenOSansbx4 landscape portrait auto
border8radiusMG topObottom leftOright border8top8right83 GGGurlkfileXttfxOformatkbtruetypebx4
border8radiusMGGtopOrightObottomOleft border8bottom8left83 GGGurlkfileXwoffxOformatkbwoffbx;O} OOOOmargin:O[XXX]
border8bottom8right83 OOOOorphans:O[number];
OOOOwidows:O[number];O}

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 transformMGrotateYkdeg_yx;
border8image8sourceMGurlkimageXpngx normal semi8expanded expanded transformMGrotatekdegx;
border8image8widthMG[size] extra8expanded ultra8expanded
EscaladoG4D
border8imageMG source slice width outset repeat text8overflowMG[text]; clip ellipsis
text8justifyMG auto inter8word distribute none

Transiciones font8size8adjustMG[number] none transformMGscaleXkxx;
transformMGscaleYkyx;
transition8propertyMG[css8property]; none all TransformacionesGúD FiltrosGCSS
transition8durationMG[time]; transformMGscalekx4Oyx;
transformMGtranslate3dkx4Oy4Ozx; filterMG[filter]knx

transition8timing8functionMG[timing8function] transformMGtranslateZkzx; filter8func knx
transformMGscale3dkx4Oy4Ozx;
transition8delayMG[time]; transformMGscaleZkzx; grayscaleMG[_XXX1] TranslaciónG4D
transitionMG property duration t8function delay transformMGrotate3dkx4y4z4degx; blurMG[size]O
transformMGrotateZkdegx; sepiaMG[_XXX1] transformMGtranslateXkxx;
Transformaciones transformMGperspectiveknx; saturateMG[_XXX1] transformMGtranslateYkyx;
transform8originMG[pos8x]O[pos8y]O[pos8z]; transformMGmatrix3dkn4n4n4XXXx opacityMG[_XXX1] transformMGtranslatekx4Oyx;
brightnessMG[_XXX1]O
transform8styleMG flat preserve83d DeformaciónG4D
timing8function cubic8bezierkx 6 contrastMG[_XXX1] transformMGskewXkdeg_xx;
Animaciones 4á6 deg j6 hue8rotateMG[deg] transformMGskewYkdeg_yx;
ease k_X254O_X14O_X254O1x invertMG[_XXX1] transformMGskewkdeg4Odegx;
animation8nameMG[name]; none 5v6
animation8durationMG[time];O linear k_X__4O_X_4O1X__4O1x filterMGf5CnSGf4CnSG222 Y
animation8timing8functionM
ease8in k_X424O_X_4O1X__4O1x
ease8out k_X__4O_X_4O_X584O1x

animation8delayMG[time]; ease8in8out k_X424O_X_4O_X584O1x Fotogramas E8vendor8keyframes

animation8iteration8countMG[number]; infinite EkeyframesGnameanimationG{

animation8directionMGnormal reverse alternate alternate8reverse GGGG6pG{Gpropiedad:OvalorO}G

animation8fill8modeMGnone forwards backwards both GGGG222

animation8play8stateMG running paused GGGG566pG{Gpropiedad:OvalorO} X
animationMG name duration timing8func delay i8c dir f8m p8s
} 6pGAGfrom

566pGAGto Z