First up in his demo: CSS Regions

Something a lot of us know and love from working in InDesign and print: connecting content regions.

It means flowing content from one container into another. CSS regions not only give you more control over your layout in your browser, they also let you separate your semantic markup from your layout. You no longer need to mess with the order of your content to position it correctly on your page, simply push it into the desired visual container.

You can implement regions with a few lines of CSS, first defining your content source and then the element to receive the content:

.content {flow-from: my-flow;}
.visual-container {flow-into: my-flow;}

Regions are currently supported by Webkit Browsers and Internet Explorer 10+. Learn more here.

Second bleeding-edge feature: CSS Blending

Finally a feature every designer must have desired now and then: mixing color and transparency values of two elements.

Simply implemented with the property “blend-mode”, you can apply all the blend modes you know and love from Photoshop, like multiply, overlay, darken, lighten or color-dodge.

CSS example:

img {mix-blend-mode: multiply;}

Find more on usage and support here.

Andre Jay Meissner

Jay is a Metalhead working on Adobe XD. Prior to joining Adobe, he designed and developed complex web apps and human friendly enterprise workflows with his own software company. In his spare time Jay is building his own furniture. He runs IxDA Berlin and Open Device Lab, a nonprofit that help to establish and promote Open Device Labs to ultimately help the web and user experience forward.

Speaker page

Last but not least: CSS Shapes

Shapes let you wrap text around and inside any shape, be it a classic rectangle, a circle or even any image.

You no longer need to fake shapes by manipulating rectangles beyond recognition.

Apply the outside content wrap by using “shape-outside”. Or even wrap content inside any shape using the “shape-inside” property.

Play around with the newest CSS functionalities by enabling the “New Web Features” palette in Adobe Edge Tools & Services.

Be aware that these features might no yet be available in currently released browser versions, but that shouldn’t stop you from experimenting and pushing them. And never forget testing on as many real devices as you can get your hands on, e.g. in an open device lab. Find the one closest to you here and donate your old devices here.

Text: Marlene Schufferth