Beyond Rectangles in Web Design – CSS Shapes & CSS Masking
Beyond Rectangles in Web Design – CSS Shapes & CSS Masking
1 2
fowd-nyc-2014
Slides for my talk at Future of Web Design in New York, 2014 about CSS Shapes and CSS Masking.On Github oslego / fowd-nyc-2014
Beyond Rectangles in Web Design
CSS Shapes & CSS Masking
Hi, I'm Razvan.
- Free-range developer, Adobe
- CSS Shapes
- CSS Masking
- CSS Regions
@RazvanCaliman
A web developer and a graphic designer walk into a studio.
Conversation with a friend who works in a web design studio. A print designer decided to switch to web design. - /me "Great! A print designer, an unchained creative coming to the web!" My friend was tasked with helping her out, teaching, supervising. I expected to learn how he'd teach responsive web design, animations, perfromance - /me How's it going?Quiz!
A pop-quiz is a terrible way to get attention. But our school teachers used it with great results. Let's give it a try.- Ancient text
- Next Big Thing™
- Ancient text
- Next Big Thing™
▶︎▶︎ 4,300 years
Shapes in CSS
CSS Shapes
Espresso is coffee brewed by forcing a small amount of nearly boiling water under pressure through finely ground coffee beans. Espresso is generally thicker than coffee brewed by other methods, has a higher concentration of suspended and dissolved solids, and has crema on top (a foam with a creamy consistency).
Tamping down the coffee promotes the water's even penetration of the grounds. This process produces an almost syrupy beverage by extracting both solid and dissolved components. The "crema" is produced by emulsifying the oils in the ground coffee into a colloid, which does not occur in other brewing methods.
.element {
float: left;
shape-outside: url(image.png);
shape-image-threshold: 0.5;
}
Naive, using img with transparent bg, expecting text to fill the gaps.
Disappointed to get square shape around img.
Shape functions
circle() ellipse() polygon() inset()circle()
It's time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles. It's about time for CSS Shapes. You can use them to create complex layout which goes much beyond simple rectangles.
.element{
shape-outside: circle(150px at 50% 50%)
}
ellipse()
Fingerprint login on phones? I don't know about you, but that freaks me out. I don't want a thief running off with my phone and a finger. Phones are relatively easy to come by; replacement body parts, not so much.
Plus, I like all of my fingers. I've had them for a long time and I got used to them being there. I don't have a favorite one, they're all useful.
Can you imagine the trouble of tacking on a different finger? I mean, where do you even go to get replacement fingers?
.element{
shape-outside: ellipse(150px 300px at 50% 50%)
}
polygon()
The octopus is a very intelliget sea creature. Most of its neurons are not loctated in its head, like with other animals, but in its arms. You could say that each of its eight arms has a mind of its own. In fact, when threatened, some ocotopi ("octopuses" sounds nicer), can break off one of their arms, which will squiggle around and confuse the predator. That would confuse the hell out of me. The octopus does not have a skeleton. Its body is mostly water and soft cartilage. The only solid part is its bird beek-like mouth. This means that the octopus can squeeze through anything large enough to fit its mouth.
.element{
shape-outside: polygon(111px 239px, 23px 222px, 4px 175px ...)
}
shape-insideworkaround
<div class="left">
<div class="right">
Alice was beginning to get very tired ...
.left{
float: left;
shape-outside: polygon(0 0, ...);
}
.right{
float: right;
shape-outside: polygon(50% 0, ...);
}
Tooling
Browser Support
CSS Masking
- hide parts of the content - fundamental concept in design surfaces - missing from the web.element{
-webkit-clip-path: circle(200px at 50% 50%)
}
.element{
-webkit-clip-path: ellipse(150px 250px at 50% 50%);
}
.element{
-webkit-clip-path: polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px);
}
SVG
- Scalable
- Scriptable
- Small footprint
- Decent support
<clipPath>
clipping HTML with SVG
<style>
.element{
-webkit-clip-path: url(#shape);
}
</style>
<svg>
<defs>
<clipPath id="shape">
...
</clipPath>
</defs>
</svg>
<clipPath id="shape"> <circle r="100" cx="400" cy="200" /> <path d="M24.527,11.121c-0.227-0.226 ..." /> </clipPath>
New York
<clipPath id="shape"> <text>New York</text> </clipPath>
xx
<textPath xlink:href="#circle"> New York, Los Angeles... </textPath> <path id="circle" d="M230,250a250,250 ..." />
Browser Support for clip-path
.element{
-webkit-mask: url(mask.jpg);
}
- Textures
- for
- Everything!
<mask>
<mask id="shape"> <circle cx="0" cy="0" r="70" fill="#fff" /> </mask>
Browser Support for mask
Recap
- CSS Shapes
- CSS Masking (clip-path)
- CSS Masking (mask-image)
webplatform.adobe.com
End.
@RazvanCaliman
bitly.com/fowd2014-shapes
Credits
- Slides framework: Reveal.JS by Hakim El Hattab
- Shattered Island pattern by Julien Renvoye
- Science pattern by Fabricio Marques
- House by Michael Rowe from The Noun Project
- Traffic Cone by jon trillana from The Noun Project
- Clock by Desbenoit from The Noun Project
- Deer in the Headlights by Luis Prado from The Noun Project
- Fingerprint by Yaroslav Samoilov from The Noun Project
- Glasses by Okan Benn from The Noun Project
- Octopus by Christy Presler from The Noun Project
- Scissors by Edward Boatman from the Noun Project
- Scarf by Maurizio Fusillo from The Noun Project
- Boots picture by Amanda Sandlin
- Browser logos on GitHub
- Screenshots of Alice in Wonderland demo from Adobe
- Screenshot of Moto360 from Motorola
- Fonts: Open Sans, Open Sans Condensed, Source Code Pro, Montserrat, Fredericka the Great, Luckiest Guy
- D-Day Photos: National Archives of Canada, 1944/Chris Helgren, 2013/Reuters. Source: The Atlantic