SintaxiskCSS DISEÑO WEB RGBkmodel0 CSS3 CHEAT SHEET ADISEÑO WEB CHEAT SHEET CSS3...

ColumnascolumnDwidth0y[size];columnDcount0k[number];columns0k width count

auto

Posicionamientoabsoluteposition0k

top.right.bottom.left0k[size]yclipDpath0kurl6shape0svg9yoverflow0k

autoauto

fixedrelativestatic

visible hidden scroll auto

TablasborderDcollapse0borderDspacing0ky[size];captionDside0kemptyDcells0tableDlayout0k

separate collapse

top bottomshow hideauto fixed

1mm1in 1cm 1pc 1pt

25.4mm 10mm 4.23mm 0.35mm

Márgeneskykespaciados

margin.padding0kmargin.padding0kmargin.padding0kmargin.padding0k

top right bottom lefttop rightyleft bottomtopybottom leftyrighttopyrightybottomyleft

Listas

listDstyleDimage0kurl6image0png9;ylistDstyleDposition0listDstyleDtype0kdisc circle

noneinside outside

square nonedecimal decimal,leading,zerolower,alpha upper,alphalower,roman upper,roman

listDstyle0k type position image

backgroundDcolor0y[color];backgroundDimage0kurl6image0jpg9;backgroundDrepeat0kbackgroundDattachment0kbackgroundDposition0k[pos,x]y[pos,y];

background0k

repeatnone

repeat,x repeat,y no,repeatscroll fixed

color image repeat attachment position

color0y[color];Coloreskykfondos

BordesborderDcolor0y[color];borderDwidth0k[size];borderDstyle0k[style];y

thin medium thick

border0k width style color

ColoresKeywords0yRoyalBlue;Hexadecimal0yR%SC/ES;yyyyyR%CE;RGBkmodel0yRGB6C85SH85LL89;HSLkmodel0kHSL6LL85AS#533#9;

currentColortransparent

withkalphakchannelRGBA6C85SH85LL85yH089;HSLA6LL85AS#533#5yH089;

solid

dotted

dashed

doublegroove

ridgeinset

outset

Estilos

FuenteskEvariacionesF

fontDvariant0ktextDdecoration0

textDtransform0k

normalnone

none

small,capsunderline overline

line,throughcapitalize

uppercaselowercase

Fuentes

fontDfamily0y[fontS]5y[fontL]5y[font7]5y000y;

fontDsize0k[size]yyyyyyyyyyyyyyyyyyy

fontDstyle0kfontDweight0k[SHH,/HH]y

serif sans,serif cursive fantasy monospacexx,small x,small small medium

large x,large xx,large smaller largernormal italic oblique

normal bold lighter bolder

font0k style variant weight size2height familyPerfiles

outlineDcolor0y[color];outlineDstyle0k[style];outlineDwidth0k[size];outline0

thin medium thickwidthstylecolor

invert

Tiposkdekelementos

display0k list,itemtable table,cell table,rowinline block inline,block none

visibility0kvisible hidden collapse

FuentekEalineacioneskykespaciadoF

Desplazamiento

float0kclear0

leftnone rightleftnone right both 15 5 -5

zDindex0

SintaxiskCSS

selectorkkHidkk#classkk0pseudoclasskk00pseudoelementkk[attr]kk

letterDspacing0y[size];lineDheight0k[size];yyyyyyyyyyyyyyyyyytextDindent0k[size];wordDspacing0k[size];whiteDspace0k

tabDsize0y[size];textDalign0verticalDalign0k[size]

normalnormal

normalnormal no,wrap prepre,line pre,wrap

left center right justifybaseline

sub super top middle bottomtext,top text,bottom

borderDtopD(borderDrightD(borderDbottomD(borderDleftD(

Separadorkdekcolumnas

columnDruleDwidth0k[size];columnDruleDstyle0k[style];columnDruleDcolor0k[color];ycolumnDrule0kwidth style color

columnDgap0y[size];columnDspan0k[number];columnDfill0kbalance auto

normalall

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

DISEÑO WEB CSS3CHEAT SHEET

propertykk0kkvaluekkA}

{

(Dtop(Dleft(Dright(Dbottom

AA A2em

normal

1em 0.5em

1ex2ex

4ex

Cursoreskdelkratón

none

cursor0yurl6image0png9default crosshair help movepointer progress text wait

context,menu cellvertical,text alias copyno,drop not,allowed all,scrollcol,resizerow,resize ,resize

ssesw

n

w e

nenw

border

padding

margin

top-left top-right

bottom-rightbottom-left

top

bottom

left right

Ubicaciones

DimensionesmaxDwidth0y[size];minDwidth0k[size];width0k[size] auto

nonenone

(Dheight

]#k*#kk[]#k[*#a#kb#kkkkkA#kB#i#kii#kkkkkkkkI#kII#

shape

Fotogramas

EkeyframesGnameanimationG{GGGG6pG{Gpropiedad:OvalorO}GGGGG222GGGG566pG{Gpropiedad:OvalorO}} 6pGAGfrom

566pGAGto

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

DISEÑO WEB CSS3CHEAT SHEET

8webkit88moz8

8ms88o8

background8imageMGOOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx;OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;OOOOOOOrepeating8linear8gradientkXXXx;OOOOOOrepeating8radial8gradientkXXXx;

Gradientes DirecciónGenGgradienteGlineal

line8through

OpcionesGdelGgradienteGradial

TipografíasGCSSú

Efont8faceG{GGGfont8familyMGbOpenOSansb;GGGfont8weightMO3__;OGGGsrcMOlocalkbOpenOSansbx4GGGurlkfileXttfxOformatkbtruetypebx4GGGurlkfileXwoffxOformatkbwoffbx;O}

j6deg

5v6deg

4á6deg

úB6deg

ú*deg

5x*deg45*deg

ú4*deg

toGtop

toGtopGright

toGright

toGbottomGright

toGbottom

toGtopGleft

toGleft

toGbottomGleft

ellipse circleshapeMGsizeMG[size]OposM

farthest8corner closest8cornerfarthest8side closest8side

center top left right bottomtopOleft topOright bottomOleft bottomOright

FondosGoGsombrasGmúltiples

background8imageMOurlkback1Xpngx4Ourlkback2Xpngx4OXXX;background8repeatMGno8repeat4Orepeat8x4OXXX;

Sombras

text8shadowMG[pos8x]O[pos8y]O[blur]O[color];box8shadowMO[pos8x]O[pos8y]O[blur]O[size]O[color];O

nonenone inset

Fondos

backgroundMGcolor position size

background8clipMGbackground8originMGbackground8sizeMG[size8w]O[size8h];

border8box padding8box content8boxpadding8box content8boxborder8box

cover contain auto

repeat origin clip att img

border8top8left83border8top8right83border8bottom8left83border8bottom8right83

border8radiusMGborder8radiusMGborder8radiusMGG

top right bottom lefttopObottom leftOrighttopOrightObottomOleft

BordesGredondeados

border8image8outsetMG[size]Oborder8image8repeatMGborder8image8sliceMGborder8image8sourceMGurlkimageXpngxborder8image8widthMG[size]

BordesGconGimágenes

border8imageMG source slice width outset repeat

stretch repeat round spacetop right bottom left

http://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400

FuentesGCSSú

font8stretchMGG

text8overflowMG[text];text8justifyMGfont8size8adjustMG[number]

ultra8condensed

clip ellipsis

normalextra8condensed condensed semi8condensed

semi8expanded expandedextra8expanded ultra8expanded

auto inter8word distribute nonenone

Medios

EmediaGprintG{OOOOpropiedadO:Ovalor;}EmediaGscreenG{OOOOpropiedadO:Ovalor;}EmediaGscreenGandCmax8widthMGBx6pxS{OOOOpropiedadO:Ovalor;}

ZX

Y

TransformacionesGúD

transformMGtranslate3dkx4Oy4Ozx;transformMGtranslateZkzx;transformMGscale3dkx4Oy4Ozx;transformMGscaleZkzx;transformMGrotate3dkx4y4z4degx;transformMGrotateZkdegx;transformMGperspectiveknx;transformMGmatrix3dkn4n4n4XXXxtransform8originMG[pos8x]O[pos8y]O[pos8z];

transform8styleMG

Transformaciones

flat preserve83d

Animaciones

animationMG name duration timing8func

animation8nameMG[name];animation8durationMG[time];Oanimation8timing8functionManimation8delayMG[time];animation8iteration8countMG[number];animation8directionMGanimation8fill8modeMGanimation8play8stateMG

none

infinitenormal reverse alternate alternate8reversenone forwards backwards both

running paused

delay i8c dir f8m p8s

FiltrosGCSS

filterMG[filter]knx

Transiciones

transitionMG property duration

transition8propertyMG[css8property];transition8durationMG[time];transition8timing8functionMG[timing8function]transition8delayMG[time];

none all

t8function delay

easelinearease8inease8outease8in8out

cubic8bezierkxk_X254O_X14O_X254O1xk_X__4O_X_4O1X__4O1xk_X424O_X_4O1X__4O1xk_X__4O_X_4O_X584O1xk_X424O_X_4O_X584O1x

timing8function

EpageG{OOOOsize:O[width]O[height];

OOOOmargin:O[XXX]OOOOorphans:O[number];OOOOwidows:O[number];O}

autolandscape portrait

Paginación

transformMGscalekx4Oyx;

transformMGskewkdeg4Odegx;

transformMGrotatekdegx;

transformMGtranslateXkxx;transformMGtranslateYkyx;

TranslaciónG4D

transformMGrotateXkdeg_xx;transformMGrotateYkdeg_yx;

RotaciónG4D

transformMGscaleXkxx;transformMGscaleYkyx;

EscaladoG4D

transformMGskewXkdeg_xx;transformMGskewYkdeg_yx;

DeformaciónG4D

transformMGtranslatekx4Oyx;

E8vendor8keyframes

6

5v6

j64á6 deg

grayscaleMG[_XXX1]blurMG[size]OsepiaMG[_XXX1]saturateMG[_XXX1]opacityMG[_XXX1]brightnessMG[_XXX1]OcontrastMG[_XXX1]hue8rotateMG[deg]invertMG[_XXX1]

knxfilter8func

filterMGf5CnSGf4CnSG222