CHEAT SHEET
DISEÑO WEB CSS3
Creadospors@Manzs(shttp://twitter.com/Manzs)s
http://www.emezeta.com/
Colores
SintaxiskCSS
Keywords0yRoyalBlue;
Hexadecimal0yR%SC/ES;yyyyyR%CE;
RGBkmodel0yRGB6C85SH85LL89;
HSLkmodel0kHSL6LL85AS#533#9;
transparent
selectorkkHidkk#classkk0pseudoclasskk00pseudoelementkk[attr]kk{
propertykk0kkvaluekkA
}
Coloreskykfondos
color0y[color];
backgroundDcolor0y[color];
backgroundDimage0kurl6image0jpg9; none
backgroundDrepeat0k repeat repeat,x repeat,y no,repeat
backgroundDattachment0k scroll fixed
backgroundDposition0k[pos,x]y[pos,y];
RGBA6C85SH85LL85yH089;
HSLA6LL85AS#533#5yH089;
currentColor
Tablas
4ex
normal
2ex
1ex
AA
2em
background0k color image repeat attachment position
withkalphakchannel
A
1em 0.5em
borderDcollapse0 separate collapse
borderDspacing0ky[size];
captionDside0k top bottom
emptyDcells0 show hide
tableDlayout0k auto fixed
Fuentes
FuentekEalineacioneskykespaciadoF
FuenteskEvariacionesF
fontDfamily0y[fontS]5y[fontL]5y[font7]5y000y;
letterDspacing0y[size]; normal
normal
lineDheight0k[size];yyyyyyyyyyyyyyyyyy
textDindent0k[size];
wordDspacing0k[size]; normal
whiteDspace0k normal no,wrap pre
fontDvariant0k normal small,caps
textDdecoration0 none underline overline
serif sans,serif cursive fantasy monospace
xx,small x,small small medium
fontDsize0k[size]yyyyyyyyyyyyyyyyyyy
large x,large xx,large smaller larger
fontDstyle0k normal italic oblique
fontDweight0k[SHH,/HH]y normal bold lighter bolder
font0k style variant weight size2height family
Tiposkdekelementos
zDindex0
Desplazamiento
float0k none left right
15 5
-5
clear0 none left right both
Márgeneskykespaciados
margin.padding0k top right bottom left
margin.padding0k top rightyleft bottom
margin.padding0k topybottom leftyright
margin.padding0k topyrightybottomyleft
(Dtop
(Dleft
(Dright
(Dbottom
tabDsize0y[size];
textDalign0 left center right justify
verticalDalign0k[size] baseline
sub super top middle bottom
text,top text,bottom
Listas
listDstyleDimage0kurl6image0png9;y none
listDstyleDposition0 inside outside
listDstyleDtype0kdisc 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
Estilos
s
dashed
double
Columnas
groove
columnDwidth0y[size];
columnDcount0k[number]; auto
columns0k width count
inset
left
outset
right
bottom-left
bottom-right
bottom
margin
25.4mm
10mm 4.23mm
1in
padding
border
listDstyle0k type position image
position0k static absolute relative fixed
top.right.bottom.left0k[size]y auto
clipDpath0kurl6shape0svg9y shape auto
overflow0k visible hidden scroll auto
ridge
top-right
lower,alpha upper,alpha
i#kii#kkkkkkkkI#kII# lower,roman upper,roman
a#kb#kkkkkA#kB#
Posicionamiento
dotted
top
]#k*#kk[]#k[*# decimal decimal,leading,zero
se
solid
borderDrightD(
borderDbottomD(
borderDleftD(
top-left
outlineDcolor0y[color]; invert
outlineDstyle0k[style];
outlineDwidth0k[size]; thin medium thick
outline0 color style width
Cursoreskdelkratón
borderDcolor0y[color];
borderDwidth0k[size]; thin medium thick
borderDstyle0k[style];y
borderDtopD(
Ubicaciones
Perfiles
cursor0yurl6image0png9
Bordes
border0k width style color
lowercase uppercase
pre,line pre,wrap
display0k inline block inline,block none list,item
table table,cell table,row
visibility0k visible hidden collapse
line,through
textDtransform0k none capitalize
0.35mm
1cm 1pc 1mm 1pt
Dimensiones
maxDwidth0y[size]; none
minDwidth0k[size]; none
width0k[size] auto
(Dheight
Separadorkdekcolumnas
columnDruleDwidth0k[size];
columnDruleDstyle0k[style];
columnDruleDcolor0k[color];y
columnDrule0k width style color
columnDgap0y[size]; normal
columnDspan0k[number]; all
columnDfill0k balance auto
CHEAT SHEET
DISEÑO WEB CSS3
Creado por @Manz ( http://twitter.com/Manz )
http://www.emezeta.com/
Gradientes
DirecciónGenGgradienteGlineal
8webkit8
8moz8
úB6deg
toGtopGleft
toGtopGright
8ms8
ú4*deg
ú*deg
8o8
toGtop
background8imageMG
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx;
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O
OOOOOOrepeating8linear8gradientkXXXx;
OOOOOOrepeating8radial8gradientkXXXx;
toGleft
4á6deg
Sombras
j6deg
45*deg
toGright
toGbottomGleft
FondosGoGsombrasGmúltiples
OpcionesGdelGgradienteGradial
background8imageMOurlkback1Xpngx4Ourlkback2Xpngx4OXXX;
background8repeatMGno8repeat4Orepeat8x4OXXX;
shapeMG ellipse circle
sizeMG[size] farthest8corner closest8corner
farthest8side
closest8side
line8through
O
center
top
left
right
bottom
posM
5v6deg
toGbottomGright
toGbottom
Fondos
background8clipMG border8box padding8box content8box
background8originMG padding8box border8box content8box
background8sizeMG[size8w]O[size8h]; cover contain auto
topOleft topOright bottomOleft bottomOright
backgroundMG color position size repeat origin clip att img
BordesGredondeados
TipografíasGCSSú
Paginación
Efont8faceG{
GGGfont8familyMGbOpenOSansb;
GGGfont8weightMO3__;O
GGGsrcMOlocalkbOpenOSansbx4
GGGurlkfileXttfxOformatkbtruetypebx4
GGGurlkfileXwoffxOformatkbwoffbx;O}
EpageG{
OOOOsize:O[width]O[height];
FuentesGCSSú
border8image8outsetMG[size]O
border8image8repeatMG stretch repeat round space
border8image8sliceMG top right bottom left
border8image8sourceMGurlkimageXpngx
border8image8widthMG[size]
font8stretchMG ultra8condensed
G extra8condensed condensed semi8condensed
Transiciones
normal semi8expanded expanded
extra8expanded ultra8expanded
text8overflowMG[text]; clip ellipsis
text8justifyMG auto inter8word distribute none
font8size8adjustMG[number] none
FiltrosGCSS
transition8propertyMG[css8property]; none all TransformacionesGúD
transformMGtranslate3dkx4Oy4Ozx; filterMG[filter]knx
transition8durationMG[time];
knx
filter8func
transition8timing8functionMG[timing8function] transformMGtranslateZkzx;
transformMGscale3dkx4Oy4Ozx;
grayscaleMG[_XXX1]
transition8delayMG[time];
transitionMG property duration t8function delay
Transformaciones
transform8originMG[pos8x]O[pos8y]O[pos8z];
transform8styleMG flat preserve83d
transformMGscaleZkzx;
transformMGrotate3dkx4y4z4degx;
transformMGrotateZkdegx;
transformMGperspectiveknx;
transformMGmatrix3dkn4n4n4XXXx
timing8function cubic8bezierkx
Animaciones
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
animation8nameMG[name]; none
animation8durationMG[time];O
animation8timing8functionM
animation8delayMG[time];
animation8iteration8countMG[number]; infinite
animation8directionMG normal reverse alternate alternate8reverse
animation8fill8modeMG none forwards backwards both
animation8play8stateMG running paused
animationMG 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
BordesGconGimágenes
border8imageMG source slice width outset repeat
EmediaGprintG{
OOOOpropiedadO:Ovalor;
}
EmediaGscreenG{
OOOOpropiedadO:Ovalor;
}
EmediaGscreenGand
Cmax8widthMGBx6pxS
{
OOOOpropiedadO:Ovalor;
}
5x*deg
text8shadowMG[pos8x]O[pos8y]O[blur]O[color]; none
box8shadowMO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset
border8radiusMG top right bottom left border8top8left83
border8radiusMG topObottom leftOright border8top8right83
border8bottom8left83
border8radiusMGGtopOrightObottomOleft
border8bottom8right83
Medios
6
4á6 deg j6
blurMG[size]O
sepiaMG[_XXX1]
saturateMG[_XXX1]
opacityMG[_XXX1]
brightnessMG[_XXX1]O
contrastMG[_XXX1]
hue8rotateMG[deg]
invertMG[_XXX1]
filterMGf5CnSGf4CnSG222
RotaciónG4D
transformMGrotateXkdeg_xx;
transformMGrotateYkdeg_yx;
transformMGrotatekdegx;
EscaladoG4D
transformMGscaleXkxx;
transformMGscaleYkyx;
transformMGscalekx4Oyx;
TranslaciónG4D
transformMGtranslateXkxx;
transformMGtranslateYkyx;
transformMGtranslatekx4Oyx;
DeformaciónG4D
transformMGskewXkdeg_xx;
transformMGskewYkdeg_yx;
transformMGskewkdeg4Odegx;
5v6
Fotogramas
Y
E8vendor8keyframes
EkeyframesGnameanimationG{
GGGG6pG{Gpropiedad:OvalorO}G
GGGG222
GGGG566pG{Gpropiedad:OvalorO}
6pGAGfrom
}
566pGAGto Z
X