Skip to content

TechRepublic

  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Cloud
  • 5G
  • Big Data
  • TechRepublic Premium
  • Top Products Lists
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Cloud
  • 5G
  • Big Data
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Join / Sign In
Developer

Two CSS modules create an interesting storytelling technique

By Ryan Boudreaux140 October 9, 2013, 9:51 AM PDT

Image
1
of 8

CSSShapesRegions_hero_112213.gif
CSSShapesRegions_hero_112213.gif
Two CSS modules create an interesting storytelling technique

Storytelling with CSS

Storytelling with CSS

This gallery is also available as an article: Cutting edge web development with CSS Shapes and CSS Regions.

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.

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.

CSSShapesRegions_FigA_112213.gif
CSSShapesRegions_FigA_112213.gif
Two CSS modules create an interesting storytelling technique

Alice in Wonderland demo

Alice in Wonderland demo

This is a screen capture of the top of the demo page, as seen in Canary with the experimental features enabled.

CSSShapesRegions_FigB_112213.gif
CSSShapesRegions_FigB_112213.gif
Two CSS modules create an interesting storytelling technique

Warning message

Warning message

If you view the demo webpage without using Chrome Canary and enabling the experimental features, you’ll see the warning message that’s in this shot.

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.
CSSShapesRegions_FigC_112213.gif
CSSShapesRegions_FigC_112213.gif
Two CSS modules create an interesting storytelling technique

Enable Chrome Canary and experimental web platform features

Enable Chrome Canary and experimental web platform features

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 this figure.

CSSShapesRegions_FigD_112213.gif
CSSShapesRegions_FigD_112213.gif
Two CSS modules create an interesting storytelling technique

Under the hood

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 this screen.

CSSShapesRegions_FigE_112213.gif
CSSShapesRegions_FigE_112213.gif
Two CSS modules create an interesting storytelling technique

Elements pane view

Elements pane view

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:

rn

rn Alice in Wonderlandrn

rn

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?'rn 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.rn In another moment down went Alice after it, never once considering how in the world she was to get out again.rn

rn

And the CSS code snippet including the polygon shape style:

.content {rnposition: relative;rnwidth: 33em;rnheight: 75em;rnbox-sizing: border-box;rnmargin-left: 37.5em;rnpadding-top: 9em;rn-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);rn}
CSSShapesRegions_FigF_112213.gif
CSSShapesRegions_FigF_112213.gif
Two CSS modules create an interesting storytelling technique

Alice in the Caterpillar's mushroom lair

Alice in the Caterpillar's mushroom lair

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:

  • jQuery (jquery-2.0.3.min.js)
  • Superscrollorama jQuery plugin (jquery.superscrollorama.js) by John Polacek for doing scroll animations.
  • scroll-driver.js, which is licensed by Adobe and is used to position a fixed element to the viewport using @param {String} position with optional edge of the element to pin settings.
  • ScrollToPlugin.min.js by @author: Jack Doyle.
  • TweenMax.min.js plugin by GreenSock, which includes: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin.

The part of the storytelling seen in this screen shot 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. 

CSSShapesRegions_FigG_112213.gif
CSSShapesRegions_FigG_112213.gif
Two CSS modules create an interesting storytelling technique

Cheshire Cat

Cheshire Cat

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

Check out the site to see the final scenes of the demonstration.
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.

  • Developer
  • Account Information

    Share with Your Friends

    Two CSS modules create an interesting storytelling technique

    Your email has been sent

Share: Two CSS modules create an interesting storytelling technique
Image of Ryan Boudreaux140
By Ryan Boudreaux140
Thirteen years of web and graphic developer experience.
  • Account Information

    Contact Ryan Boudreaux140

    Your message has been sent

  • |
  • See all of Ryan's content

TechRepublic Premium

  • TechRepublic Premium

    Office relocation checklist

    PURPOSE New office launches and site relocations run the range from straightforward to overly complex. For intricate, sophisticated new office deployments and larger site moves, TechRepublic Premium’s Office relocation checklist can help plan, monitor and execute such projects. From the checklist: LIST REQUIRED OF EQUIPMENT AND SERVICES Begin by creating a simple list of required ...

    Downloads
    Published:  May 25, 2023, 4:00 PM EDT Modified:  May 26, 2023, 11:17 AM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Onboarding and offboarding IT staff checklist

    PURPOSE Onboarding and offboarding employees requires careful attention. Otherwise, team members may receive insufficient permissions to perform their jobs or continue to have access long after their employment’s termination. Given the stakes, the problem is even worse when managing IT staff permissions, so it’s imperative that your company adopts a system to ensure consistency. Employees, ...

    Downloads
    Published:  May 24, 2023, 4:00 PM EDT Modified:  May 25, 2023, 9:19 AM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    10 must-know Firefox tips

    PURPOSE TechRepublic Premium presents 10 tips for the Firefox open-source browser. Even if you only follow some of these, you’ll find your browser experience to be much improved. From the article: 1. USE CAUTION WITH ADD-ONS AND THEMES This is one of the first tips I always offer. I’ve seen web browsers with so many ...

    Downloads
    Published:  May 23, 2023, 4:00 PM EDT Modified:  May 24, 2023, 6:46 PM EDT Read More See more TechRepublic Premium
  • TechRepublic Premium

    Bring your own device policy

    PURPOSE The purpose of this Bring your own device policy from TechRepublic Premium is to provide requirements for BYOD usage and establish the steps that both users and the IT department should follow to initialize, support and remove devices from company access. These requirements must be followed as documented in order to protect company systems ...

    Downloads
    Published:  May 22, 2023, 4:00 PM EDT Modified:  May 23, 2023, 7:26 PM EDT Read More See more TechRepublic Premium

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice