43 9 675KB
CHEAT SHEET
WEB DESIGN CSS3 Createdlbyl@Manzl(lhttp://twitter.com/Manzl)l
http://www.emezeta.com/ Colors
CSSBSyntax
KeywordsIyRoyalBlue; HexadecimalIyR%SC9ES;yyyyyR%CE; RGBBmodelIyRGB6C85SH85LL89; HSLBmodelIBHSL6LL853S#5//#9; transparent
selectorBBxidBB#classBBIpseudoclassBBIIpseudoelementBB[attr]BB{ propertyBBIBBvalueBB; } Backgrounds
colorIy[color]; backgroundDcolorIy[color]; backgroundDimageIBurl6image0jpg9; none backgroundDrepeatIB repeat repeat,x repeat,y no,repeat backgroundDattachmentIB scroll fixed backgroundDpositionIB[pos,x]y[pos,y];
Fonts
fontDfamilyIy[fontS]5y[fontL]5y[font7]5y000y; serif sans,serif cursive fantasy monospace
xx,small x,small small medium fontDsizeIB[size]yyyyyyyyyyyyyyyyyyy large x,large xx,large smaller larger fontDstyleIB normal italic oblique fontDweightIB[SHH,9HH]y normal bold lighter bolder
fontIB style variant weight size2height family ElementsB(types)
zDindexI
Displacement
floatIB none left right
15 5 -5
clearI none left right both MarginsBandBpaddings
margin.paddingIB top right bottom left margin.paddingIB top rightyleft bottom margin.paddingIB topybottom leftyright margin.paddingIB topyrightybottomyleft
zDtop zDleft zDright zDbottom
AA
letterDspacingIy[size]; normal normal lineDheightIB[size];yyyyyyyyyyyyyyyyyy textDindentIB[size]; wordDspacingIB[size]; normal whiteDspaceIB normal no,wrap pre
fontDvariantIB normal small,caps textDdecorationI none underline overline
tabDsizeIy[size]; textDalignI left center right justify verticalDalignIB[size] baseline sub super top middle bottom text,top text,bottom
listDstyleDimageIBurl6image0png9;y none listDstyleDpositionI inside outside listDstyleDtypeIBdisc 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
s
dashed double
Columns
groove
columnDwidthIy[size]; columnDcountIB[number]; auto columnsIB width count
inset outset
bottom margin
10mm 4.23mm
1in
padding border
listDstyleIB type position image
positionIB static absolute relative fixed top.right.bottom.leftIB[size]y auto clipDpathIBurl6shape0svg9y shape auto overflowIB visible hidden scroll auto
ridge
bottom-right
lower,alpha upper,alpha i#Bii#BBBBBBBBI#BII# lower,roman upper,roman a#Bb#BBBBBA#BB#
PositionBtypes
dotted
25.4mm
]#B*#BB[]#B[*# decimal decimal,leading,zero
se
solid
top-right
bottom-left
outlineDcolorIy[color]; invert outlineDstyleIB[style]; outlineDwidthIB[size]; thin medium thick outlineI color style width Lists
Styles
right
Outlines
MouseBcursors
top
left
lowercase uppercase
cursorIyurl6image0png9
borderDrightDz borderDbottomDz borderDleftDz
top-left
line,through
textDtransformIB none capitalize
pre,line pre,wrap
borderDcolorIy[color]; borderDwidthIB[size]; thin medium thick borderDstyleIB[style];y borderDtopDz
Locations
A
1em 0.5em
borderDcollapseI separate collapse borderDspacingIBy[size]; captionDsideIB top bottom emptyDcellsI show hide tableDlayoutIB auto fixed FontsB(variants)
Border
borderIB width style color
normal 2ex 1ex
FontB(aligmentsBandBspacing)
displayIB inline block inline,block none list,item table table,cell table,row visibilityIB visible hidden collapse
RGB6C85SH85LL85yH089; HSL6LL853S#5//#5yH089; currentColor
Tables
4ex
2em
backgroundIB color image repeat attachment position
withBalphaBchannel
0.35mm
1cm 1pc 1mm 1pt
Dimensions
maxDwidthIy[size]; none minDwidthIB[size]; none widthIB[size] auto zDheight
ColumnsBseparator
columnDruleDwidthIB[size]; columnDruleDstyleIB[style]; columnDruleDcolorIB[color];y columnDruleIB width style color columnDgapIy[size]; normal columnDspanIB[number]; all columnDfillIB balance auto
CHEAT SHEET
WEB DESIGN CSS3 Created by @Manz ( http://twitter.com/Manz )
http://www.emezeta.com/
Gradients
LinealGgradientGpDirectionT
3webkit3 3moz3 5B2deg toGtopGleft toGtopGright 3ms3 56xdeg 5xdeg 3o3 toGtop
background3imagejG OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx; OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O OOOOOOrepeating8linear8gradientkXXXx; OOOOOOrepeating8radial8gradientkXXXx;
toGleft
6*2deg
Shadows
v2deg
67xdeg
toGright
toGbottomGleft
ShadowsGorGbackgrounds
RadialGgradientGpOptionsT
background3imagejOurlkback1Xpngx4Ourlkback2Xpngx4OXXX; background3repeatjGno8repeat4Orepeat8x4OXXX;
shapejG ellipse circle sizejG[size] farthest8corner closest8corner farthest8side closest8side line8through O center top left right bottom posj
7F2deg
toGbottomGright
toGbottom
Backs
background3clipjG border8box padding8box content8box background3originjG padding8box border8box content8box background3sizejG[size8w]O[size8h]; cover contain auto
topOleft topOright bottomOleft bottomOright
backgroundjG color position size repeat origin clip att img RoundGbordersGCSS5
TypographGCSS5
Pagination
@font3faceG{ GGGfont3familyjGbOpenOSansb; GGGfont3weightjO3__;O GGGsrcjOlocalkbOpenOSansbx4 GGGurlkfileXttfxOformatkbtruetypebx4 GGGurlkfileXwoffxOformatkbwoffbx;O}
@pageG{ OOOOsize:O[width]O[height];
FontsGCSS5
border3image3outsetjG[size]O border3image3repeatjG stretch repeat round space border3image3slicejG top right bottom left border3image3sourcejGurlkimageXpngx border3image3widthjG[size]
font3stretchjG ultra8condensed G extra8condensed condensed semi8condensed
Transitions
normal semi8expanded expanded extra8expanded ultra8expanded
text3overflowjG[text]; clip ellipsis text3justifyjG auto inter8word distribute none font3size3adjustjG[number] none
CSSGFilters transition3propertyjG[css8property]; none all TransformationsG5D transformjGtranslate3dkx4Oy4Ozx; filterjG[filter]knx transition3durationjG[time]; knx filter8func transition3timing3functionjG[timing8function] transformjGtranslateZkzx; transformjGscale3dkx4Oy4Ozx; grayscalejG[_XXX1] transition3delayjG[time];
transitionjG property duration t8function delay Transformaciones
transform3originjG[pos8x]O[pos8y]O[pos8z]; transform3stylejG flat preserve83d
transformjGscaleZkzx; transformjGrotate3dkx4y4z4degx; transformjGrotateZkdegx; transformjGperspectiveknx; transformjGmatrix3dkn4n4n4XXXx
timing8function cubic8bezierkx
Animations
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
animation3namejG[name]; none animation3durationjG[time];O animation3timing3functionj animation3delayjG[time]; animation3iteration3countjG[number]; infinite animation3directionjG normal reverse alternate alternate8reverse animation3fill3modejG none forwards backwards both animation3play3statejG running paused animationjG 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
BordersGwithGimages
border3imagejG source slice width outset repeat
@mediaGprintG{ OOOOpropiedadO:Ovalor; } @mediaGscreenG{ OOOOpropiedadO:Ovalor; } @mediaGscreenGand pmax3widthjGB42pxT { OOOOpropiedadO:Ovalor; }
74xdeg
text3shadowjG[pos8x]O[pos8y]O[blur]O[color]; none box3shadowjO[pos8x]O[pos8y]O[blur]O[size]O[color];Onone inset
border3radiusjG top right bottom left border3top3left3h border3radiusjG topObottom leftOright border3top3right3h border3bottom3left3h border3radiusjGGtopOrightObottomOleft border3bottom3right3h
Media
2 6*2 deg v2
blurjG[size]O sepiajG[_XXX1] saturatejG[_XXX1] opacityjG[_XXX1] brightnessjG[_XXX1]O contrastjG[_XXX1] hue3rotatejG[deg] invertjG[_XXX1] filterjGf7pnTGf6pnTG999
RotationG6D
transformjGrotateXkdeg_xx; transformjGrotateYkdeg_yx; transformjGrotatekdegx; ScaleG6D
transformjGscaleXkxx; transformjGscaleYkyx; transformjGscalekx4Oyx; TranslationG6D
transformjGtranslateXkxx; transformjGtranslateYkyx; transformjGtranslatekx4Oyx; SkewG6D
transformjGskewXkdeg_xx; transformjGskewYkdeg_yx; transformjGskewkdeg4Odegx;
7F2
Keyframes
Y
@3vendor3keyframes
@keyframesGnameanimationG{ GGGG2)G{Gpropiedad:OvalorO}G GGGG999 GGGG722)G{Gpropiedad:OvalorO} 2)GPGfrom } 722)GPGto Z
X