Css3 Cheatsheet Emezeta Eng [PDF]

Zitiervorschau

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