Demo of CSS Shapes using the Alice in Wonderland story

  • By Adobe Web Platform
  • Last update: Jul 28, 2022
  • Comments: 6

Demo for Alice's Adventures in Wonderland, by Lewis Carroll

Using CSS Shapes to enhance visual storytelling.

UPDATE August 2014:

The full demo is obsolete because the shape-inside property was removed from browser implementations of CSS Shapes. What remains here is only a redux of the original demo. It demonstrates just one use-case with the shape-outside property.

The original source still exists in the archive tag. Use an old Chromium build and enable experimental Web Platform features in chrome://flags to run the demo.

There is a video recording of the original demo.

See "Using CSS Shapes to Enhance Visual Storytelling" to learn more about the project.

Demo

Requirements:

  • Use Google Chrome.
  • If you're using Chrome version 36 or below (see chrome://version), enable the flags to support CSS Shapes. Learn how.

Contributing

You'll need:

Clone repo and change to directory:

git clone https://github.com/adobe-webplatform/alice.git

Install dependencies defined in package.json:

npm install

Watch for changes:

grunt watch

CSS files are overwritten by SASS with source from .scss files. Do not edit .css files directly.

License

All code is offered under the Apache License Version 2.0. For licenses on third-party libraries used see NOTICE file.

All assets are offered under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.

Github

https://github.com/adobe-webplatform/Demo-for-Alice-s-Adventures-in-Wonderland

Comments(6)

  • 1

    Redesign instructions

    I think the instructions should be slightly more subtle. Please ask Yohei to suggest a design that is both more subtle, and that blends a little better with the site. (For instance, the green animation doesn't fit in with the site's design.)

  • 2

    Change instructions title

    High priority.

    Please make the following changes to the instructions:

    1. The title should be "Demo for Alice in Wonderland, by Lewis Carroll"
    2. Change the description to: "Using CSS Shapes to enhance visual storytelling."
    3. Link "CSS Shapes" to http://html.adobe.com/webplatform/layout/shapes/ (with target="_blank").
    4. Remove the Ultranoir logo. They were a contractor, not a partner.
  • 3

    Scene Menu

    I found myself wanting to jump between scenes. Maybe a scene menu that expands from the lower right? (Yohei could probably design something in the same aesthetic.)

  • 4

    Underwater effect

    Big time enhancement request (and very low priority), but it would be visually interesting of the shafts of light -- especially in the opening scene -- transitioned, moved, danced, etc. creating an otherworldly, underwater kind of effect. (If this isn't clear, ping me and I'll explain.)

  • 5

    Opening text should scroll rather than "drain"

    When scrolling the opening scene, the screen dims, then at some threshold, the text seems to "drain" down the rabbit hole. I think it would be more effective if the text scrolled down (and up). The dimming of the scene should be correlated to the position of the text: as the last of the text goes down the hole, the scene should fully fade to black.

    (I think this is my highest priority enhancement request.)

  • 6

    layout wrong with big default font size

    I use Chrome (39) on Mac 15" Retina with 18px default font size and the layout in the demo is wrong - the text doesn't properly avoid the image countours. The problem seems to be in using em for the size of the scene--alice div, and px for the shape sizes.

    The demo works perfectly if I set my default font size to 16px, and with the size of 18px when I scaled the scene--alice div's height and width to 16/18ths of the original values, it works again. Alternatively, adding "font-size=16px" to body style also fixes everything.

Popular Tag

Related