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