Adobe & the Web

Sydney → Moscow

HTML, CSS & JavaScript

Demo

tinyurl.com/forestgiant

CSS Regions

#source {flow-into: main-thread;

}

.region {flow-from: main-thread;background: #C5DFF0;

}

CSS Shapes

#logo {float: left;shape-outside: url("logo.png");shape-image-threshold: 0.1;shape-margin: 35px;

}#float-left {

shape-outside: polygon(0 0, 100% 100%, 0 100%);float: left;width: 40%;height: 12ex;

}

CSS Blend Modes

.container {background-color: green;

}.element {

width: 200px;height: 200px;background-size: 200px 200px;background-repeat: no-repeat;background-image: linear-gradient(...), url(ducky.png);background-blend-mode: difference, normal;

}

normalscreenoverlaydarkenlighten

color-dodgecolor-burnhard-lightso!-lightdi"erenceexclusionhue

saturationcolor

luminosity

Support

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

Demo

PhoneGap

PhoneGap Build

Apache Cordova™cordova.apache.org

Topcoat

topcoat.io

Brackets

brackets.io

Web Platform

webplatform.org

Test the Web Forward

testthewebforward.org

Sneak Peek

Demo

html.adobe.comtopcoat.iobrackets.io

webplatform.orgtestthewebforward.org

@adobeweb

Thank You

baranovs@adobe.com@dmitrybaranovsk