• Stars
    star
    149
  • Rank 248,619 (Top 5 %)
  • Language
    CSS
  • License
    Apache License 2.0
  • Created over 11 years ago
  • Updated over 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Demo of CSS Shapes using the Alice in Wonderland story.

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.

More Repositories

1

Snap.svg

The JavaScript library for modern SVG graphics.
JavaScript
13,954
star
2

dropcap.js

Beautiful CSS drop caps made easy
HTML
929
star
3

eve

Custom eventsโ€ฆ
JavaScript
316
star
4

css-shapes-polyfill

Polyfill for the CSS Shapes Specification
JavaScript
303
star
5

css-regions-polyfill

Experimental CSS Regions polyfill written in JavaScript
JavaScript
159
star
6

Demo-for-National-Geographic-Forest-Giant

A prototypical adaptation of the National Geographic article "Forest Giants" using Adobe's contributions to WebKit.
JavaScript
135
star
7

css-shapes-editor

Standalone in-browser editor for CSS Shapes.
JavaScript
120
star
8

dr.js

Tiny documentation builder
JavaScript
114
star
9

shaderdsl

A compiler from a subset of JavaScript to GLSL.
JavaScript
97
star
10

brackets-css-shapes-editor

CSS Shapes Editor extension for Brackets / Adobe Edge Code
JavaScript
94
star
11

custom-filters-demo-travel-app

An app that explores the use of custom filters to create UI enhancements
JavaScript
55
star
12

iframeflow.js

A Javascript helper for cross-browser CSS Regions support
JavaScript
41
star
13

coding-guidelines

JavaScript
28
star
14

Demo-for-PBS-Kids-Word-Girl

Digital comic book adaptation using Photoshop Generator
JavaScript
21
star
15

Demo-for-Food-Network-Cupcakes

Demo using Food Network content to showcase Web Engine features
JavaScript
21
star
16

Demo-for-National-Geographic-Orphan-Elephants

A prototypical adaptation of the National Geographic article "Orphan Elephants" showcasing Regions in use with Viewport Units.
JavaScript
15
star
17

html5devconf-2013

Slides from @adobe-webplatform team presented at HTML5 Dev Conf.
CSS
14
star
18

road-trip

โ€œRoad Tripโ€ CSS Regions Demo
JavaScript
7
star
19

exclusionsrecipe

Demo of exclusions for mobile.
CSS
7
star
20

regions-adaptive

Demo of an adaptive web app UI built with CSS Regions
6
star
21

transform-tests

2
star