Web Development compare

Cutting edge web development with CSS Shapes and CSS Regions

An Alice in Wonderland demo site highlights a storytelling technique that uses the CSS Shapes and CSS Regions modules and was created using Adobe Edge Code CC. Look under the site's hood.

CSSShapesRegions_hero_112213.gif

I had the pleasure of participating in a one-on-one Adobe Connect webinar presentation given by Arno Gourdol, Sr. Director of Product Development at Adobe. Arno presented many tools from the Adobe Creative Cloud, and he followed up his presentation with several demonstrations representing progressive work within the web developer sphere, in particular HTML5 and CSS3 examples.

Note: This article is also available as the gallery Two CSS modules create an interesting storytelling technique.

Storytelling with CSS

Along with a Q&A session during the accompanying telephone conversation, Arno demoed several technologies that Adobe has been helping to spearhead in recent months. One example that struck me was the demonstrated use of modules for CSS Shapes (which defines and contains the features of CSS relating to wrapping content around and inside shapes) and CSS Regions (which allows content to flow across multiple areas called regions); both of these modules are W3C Editor's Drafts. (Read my related article: Experiment with CSS3 Exclusions and Shapes module.)

The demo highlights a storytelling technique that uses the CSS Shapes and CSS Regions modules and was created using Adobe Edge Code CC. Edge Code CC, also known as a "Design in the browser" tool, allows you to code HTML, CSS, and JavaScript faster with live development and offers quick editing code intelligence and integrated visual design tools. Another Adobe tool was used in the process of creating the demo website, but I have been told to hold off mentioning it until the beta release has been fully tested.

The website of the CSS storytelling technique is entitled Demo for Alice in Wonderland by Lewis Carroll Using CSS Shapes to enhance visual storytelling, and requires Chrome Canary to be installed along with several experimental features -- Shapes, Regions, and Blend Modes -- to be viewed correctly. To enable the three features, paste this text string into the address bar in Chrome Canary and press Enter:

chrome://flags/#enable-experimental-web-platform-features

Now 'Enable' the link within that section, and then click Relaunch at the bottom of Chrome Canary. The Enable Experimental Web Platform Features is shown in Figure A.

Figure A

CSSShapesRegions_FigC_112213.gif

Figure B displays a screen capture of the top of the demo page, as seen in Canary with the experimental features enabled.

Figure B

CSSShapesRegions_FigA_112213.gif

If you view the demo webpage without using Chrome Canary and enabling the experimental features, you'll see the warning message that's in Figure C.

Figure C

CSSShapesRegions_FigB_112213.gif

The links from the warning message are copied here for your reference: Adobe Web Platform Team, CSS Regions and CSS Shapes, Google Chrome Canary, CSS Regions Support Matrix, and the CSS Shapes Support Matrix.

Under the hood

When you explore under the hood of the demo website using the web developer tools in Chrome Canary, the Inspect Element console Resources panel shows the HTML5 doctype, the use of an overlay, keyframes, alternate navigation for input devices, and the introduction slide and feature detection message. The top level view of the web page resource is displayed in Figure D.

Figure D

CSSShapesRegions_FigD_112213.gif

In the Elements tab of the developer tool, we see the first content div, which is contained within another div with an id equals "scene1", with the CSS shape style applied to the following HTML code snippet:

<div class="content">
   <h1>
     <span>Alice in Wonderland</span>
   </h1>
<p style="margin-top: 32px;">Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'
<br><br>So she was considering in her own mind whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
<br><br>In another moment down went Alice after it, never once considering how in the world she was to get out again.
      </p>
</div>

And the CSS code snippet including the polygon shape style:

.content {
position: relative;
width: 33em;
height: 75em;
box-sizing: border-box;
margin-left: 37.5em;
padding-top: 9em;
-webkit-shape-inside: polygon(0em 0em, 33em -0.06em, 33.13em 23.75em, 30em 23.88em, 28em 25.88em, 28em 28.75em, 32.88em 33em, 31.38em 37.5em, 27.75em 37.88em, 23.31em 42.56em, 22.56em 45.88em, 24.5em 46.81em, 21.19em 49.56em, 24em 53.13em, 27em 53.13em, 28.81em 61.13em, 26.31em 74.88em, 0em 75em, 0em 65.94em, 2em 58em, 11.94em 53.5em, 11.25em 49.69em, 8.75em 47.25em, 9.44em 44.94em, 1.81em 43.75em, 0em 40em, 6.38em 40em, 12.44em 38.5em, 15.75em 35.25em, 9.88em 35.25em, 8.69em 33.5em, 5.63em 31.75em, 10.75em 30.19em, 5.44em 28.75em, 3.44em 25.19em, 7.25em 23.75em, 4em 23.44em, 1em 20.63em, 2.88em 18.5em, 1.25em 15.63em, 5.63em 11.69em, 6.13em 6.94em, 3.25em 2.44em);
}
A screen capture of the Elements pane view is displayed in Figure E.

Figure E

CSSShapesRegions_FigE_112213.gif

The script list

The demo uses jQuery and JavaScript resources to assist with the scrolling and animation effects, which also help to provide a sense of parallax scrolling throughout the storytelling sequences. Script resources include the following:

The part of the storytelling seen in Figure F takes you down the rabbit hole with Alice and into the Caterpillar's mushroom lair; this is where the demo starts scrolling from left to right as the story and document progresses. The Caterpillar's story line continue to scroll up and into the shapes of wafting smoke clouds that eventually accumulate above their heads during their conversation. 

Figure F

CSSShapesRegions_FigF_112213.gif

As you continue to scroll into the next scene, we see the Cheshire Cat falling down the rabbit hole (Figure G).

Figure G

CSSShapesRegions_FigG_112213.gif

Check out the site to see the final scenes of the storytelling demonstrations.

Summary

Chrome Canary is helping web developers in the sandbox and giving them an opportunity to experiment with cutting edge HTML5, CSS3, and scripting technologies that support the effort to break barriers that other modern browsers cannot touch. Along with the endeavors like the Alice demo from the Adobe Product Development Team, there's a growing trend toward exciting web development technologies, tools, and coding languages that redefine the web and online experiences.

Disclaimer: I have not tried any of the Adobe Creative Cloud products mentioned in this article; I hope to review several of them using the free 30-day trial periods for testing and reviewing purposes. Also, I have not been compensated for or offered any payments in kind or otherwise for the reviews or statements I make in reference to Adobe products.

 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
webdesignlondon
webdesignlondon

Hello Ryan, thank you so much for sharing this interesting post. This guide with the illustrations is very helpful.

techguy14
techguy14

I think there was some problem with your code snippet for enabling canary's experimental features, the first part with the "codesnippeteditdeletechrome".


Otherwise very interesting. 
MaryWeilage
MaryWeilage moderator

@techguy14 Good catch! The code snippet has been fixed. Thanks very much.