CHEAT SHEET

DISEO WEB CSS3

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

http://www.emezeta.com/
Colores

SintaxiskCSS

Keywords0yRoyalBlue;
Hexadecimal0yR%SC9ES;yyyyyR%CE;
RGBkmodel0yRGB6C85SH85LL89;
HSLkmodel0kHSL6LL853S#5//#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];

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

Tablas

4ex

normal
2ex
1ex

AA
2em

background0k color image repeat attachment position

withkalphakchannel

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,9HH]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

Mrgeneskykespaciados

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

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

Cursoreskdelkratn

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

DISEO WEB CSS3

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

http://www.emezeta.com/

Gradientes

DireccinGenGgradienteGlineal

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

46deg

Sombras

j6deg

45*deg

toGright

toGbottomGleft

FondosGoGsombrasGmltiples

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

TipografasGCSS

Paginacin

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 TransformacionesGD
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

BordesGconGimgenes

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
46 deg j6

blurMG[size]O
sepiaMG[_XXX1]
saturateMG[_XXX1]
opacityMG[_XXX1]
brightnessMG[_XXX1]O
contrastMG[_XXX1]
hue8rotateMG[deg]
invertMG[_XXX1]
filterMGf5CnSGf4CnSG222

RotacinG4D

transformMGrotateXkdeg_xx;
transformMGrotateYkdeg_yx;
transformMGrotatekdegx;
EscaladoG4D

transformMGscaleXkxx;
transformMGscaleYkyx;
transformMGscalekx4Oyx;
TranslacinG4D

transformMGtranslateXkxx;
transformMGtranslateYkyx;
transformMGtranslatekx4Oyx;
DeformacinG4D

transformMGskewXkdeg_xx;
transformMGskewYkdeg_yx;
transformMGskewkdeg4Odegx;

5v6

Fotogramas

E8vendor8keyframes

EkeyframesGnameanimationG{
GGGG6pG{Gpropiedad:OvalorO}G
GGGG222
GGGG566pG{Gpropiedad:OvalorO}
6pGAGfrom
}
566pGAGto Z