Chen Hui JingChen Hui Jing
Transcript of Chen Hui JingChen Hui Jing
-
WHYYOUSHOULD
BEEXCITEDABOUT
CSSSHAPESBy /ChenHuiJing @hj_chen
http://www.chenhuijing.com/http://twitter.com/hj_chen
-
LONGAGO,THEWEBLOOKEDLIKE
THIS:
-
THEN,CAMEFLOATS.ANDNOW
MOSTOFOURSITESLOOKLIKETHIS:
-
LOTSOFVARIATIONSOFSTACKED
RECTANGLES...
-
LET'SLOOKATSOMEMAGAZINE
LAYOUTS...
-
BUTONTHEWEB,WEWERESTUCK
WITHTHIS:
Beyoncéisreadytoreceiveyounow.Fromthechairwhereshe’s
sitting,intheconferenceroomofhersleekofficesuitein
midtownManhattan,ataroundtableelegantlyladenwithfine
china,crispclothnapkins,andtake-outsushifromNobu,she
couldtosssomeedamameoverhershoulderandhithersixteen
Grammys,eachwall-mountedinitsownPlexiglasbox.
Sheisluminous,withthatperfectsmileandsmoothcoffeeskin
thatshinesunderablondishtopknotandbangs.Todayshe’s
showingnoneofthebodaciouslythick,hush-your-mouthbody
that’sondisplayonstage,inhervideos,andonthesepages.
ThisisBusinessBeyoncé,hypercomposedBeyoncé—fashionable,
elegant,incharge.She’swearingthehandiworkofnofewerthan
sevendesigners,amongthemGivenchy(thegoldenpinather
neck),DayBirgeretMikkelsen(herdaintygray-pinkpetal-collar
blouse),ChristianLouboutin(herpinkfive-inchstuddedheels),
andIsabelMarant(herfloralpants).
-
CSSSHAPES(LEVEL1)
shape-outsideCSSproperty
Definesthefloatareaforinlinecontenttowrap
aroundtheshapeinsteadofthefloat'sbounding
box.
-
LET'STALKABOUTTHEBOX
MODEL
Margin
Border
Padding
Content
-
ONBOXMODELSANDFLOATS
Shapeisclippedtomargin-box
Canonlyeverreducethefloatarea
Wrappingonlyoccursononeside(fornow)
-
4BASICSHAPEFUNCTIONS
Thecircle()function
Theellipse()function
Theinset()function
Thepolygon()function
-
THECIRCLE()FUNCTION
.circle { /* general styles for the div*/ width: 200px; height: 200px; background-color: #A4F4B0; border-radius: 50%;
/* make it a shape!*/ shape-outside: circle(); float: left;}
-
BASICSYNTAX
shape-radiustakesanyCSSlength.
positionreferstothex,ycoordinates,whichdefault
tothecentreoftheelement,(0,0).
shape-outside: circle( []? [at ]? )
-
THEELLIPSE()FUNCTION
.ellipse { width: 100px; height: 200px; background-color: #A4F4B0; border-radius: 50%; shape-outside: ellipse(); float: left;}
-
BASICSYNTAX
shape-radiustakesin2variables,lengthofradius
alongthex-axisandalongthey-axis.
positionreferstothex,ycoordinates,whichdefault
tothecentreoftheelement,(0,0).
shape-outside: ellipse( [{2}]? [at ]? )
-
THEINSET()FUNCTION
.inset { width: 200px; height: 160px; background-color: #A4F4B0; border-radius: 50px; shape-outside: inset(0px round 50px); float: left;}
-
BASICSYNTAX
shape-argsyntaxissimilartomarginorpadding:top,
right,bottom,left.
Insetisappliedfromtheedgeoftheelementinwards
towardthecentre.
border-radiusisoptional.
shape-outside: inset( {1,4} [round ]? )
-
THEPOLYGON()FUNCTION
.polygon { width: 200px; height: 200px; clip-path: polygon(0 0, 0 200px, 200px 100px); background-color: #A4F4B0; shape-outside: polygon(0 0, 0 200px, 200px 100px); float:left;}
-
BASICSYNTAX
fill-ruleisoptional,defaultvalueisnonzero.
Createyourpolygonusingclip-path.
Forcomplexshapes,tryusingthe
extension.
shape-outside: polygon( [,]? [ ]# )
CSSShapesEditor
forChrome
http://razvancaliman.com/writing/css-shapes-editor-chrome/
-
USEANIMAGEWITHALPHA
PROPERTIES.shape { shape-outside: url("path/to/nicely-cropped-image.png"); shape-image-threshold: 0.5; shape-margin: 10px; float: left; }
-
shape-image-thresholddefinesthefloatarea,and
rangesfrom0.0(transparent)to1.0(opaque).
-
CANIUSE...CSSSHAPES?
-
POLYFILL
Thego-topolyfillforCSSShapesisthe
by .
CSSShapes
Polyfill theAdobeWebPlatformteam
http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/https://twitter.com/adobeweb
-
TOFINDOUTMORE...
and
by
and by
CSSShapesModuleLevel1
UnderstandingReferenceBoxesforCSSShapes
GettingStartedwithCSSShapes RazvanCaliman
CreatingNon-RectangularLayoutsWithCSSShapes
CSSShapes101 SaraSoueidan
http://www.w3.org/TR/css-shapes-1/http://razvancaliman.com/writing/css-shapes-reference-boxes/http://www.html5rocks.com/en/tutorials/shapes/getting-started/https://twitter.com/razvancalimanhttp://sarasoueidan.com/blog/css-shapes/http://alistapart.com/article/css-shapes-101/https://twitter.com/SaraSoueidan
-
MOREGOODSTUFFONTHE
WAY...
Theshape-insidepropertylet'susputcontentinside
adefinedshape
Definesarbitraryareasaroundwhichinlinecontent
canflow
CSSShapesModuleLevel2
CSSExclusionsModuleLevel1
-
THEENDhttp://www.chenhuijing.com
@hj_chen
@hj_chen
@huijing