About this presentation

This presentation was given at the Adobe Camp Brazil 2012 meet-up held in Maceió, Alagoas, Brazil on Saturday April 28^th. The slides are supporting the presentation, and do not have enough textual information to be understood by themselves.

The presentation is written in HTML5 and uses some features that are only supported by the most recent browsers. It was developed with the latest Chrome nightly browser (requires filter shorthands support). The presentation can be read with Firefox 11 or Chrome 18 but with some limitation because of the lack of filter shorthands support.

You can navigate with the left and right arrow keys and with the up/down keys to drill into sections.

html5 graphics?really?

vhardy@adobe.com
April 28^th 2012

Created with CSS 3D Slideshow - by Hakim El Hattab

a bit of [my] history

graphic novels and animations
drawing
computer
computer graphics (2D)
computer animation
web
web graphics, yeah!!

had we found the creativity treasure?

but for a long time...

sorry, you cannot use your web graphics on the web!

what?

a few years of drought for web graphics

but no more!

all browsers support <canvas> and SVG
CSS has matured and stabilized
a lot of activity on enhancements, support and tools

now @adobe

Adobe's web standards and innovation team
working in W3C on SVG and CSS specifications
for example: CSS regions, exclusions, shaders, SVG
focus on contributing to the graphical web

a candy store for the graphical web

the journey of graphics

graphics models

declarative graphics

graphical objects
layout and transforms
the art of rendering
filtering
compositing

graphical objects

shapes
[scripted] images and video
text

the web of boxes

boxes (yeah!!)
rounded corners (yooohooo!)
we can even do circles!

creative boxes?

Why do seagulls live by the sea?

beyond boxes

rocket icon by John O'Shea, from The Noun Project

go shapes!

<rect ... > <!-- another box!!!! -->
<circle cx="10" cy="20" r="50" />
<ellipse ... />
<polygon ... />
<line ... />
<polyline ... />
<path .../>

in-line svg shapes

Icon by Adrijan Karavdic, from The Noun Project

the code...

<!doctype html>
<html><body>
<style>
#elephant {
    fill: #888;
    stroke: white;
    stroke-width: 2px;
    transition: fill 1s linear, stroke 1s linear;
}

#elephant:hover {
    fill: #c00;
    stroke: gold;
}

</style>
<svg ... >
    <circle cx="10" cy="20" r="50" />
    <g id="elephant" ... />
        <path .../>
    </g>
</svg>
</body></html>

[scripted] images and video

<img>
<video>
<canvas>

provide many opportunities for creativity such as video capture, image processing , bridge between declarative and imperative programming.

web fonts

we have gone a long way
web fonts are widely available
no excuses (not to use)

the code...

/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Vollkorn);

<!-- Typekit -->
<script type="text/javascript" src="http://use.typekit.com/[your-typekit-id-here].js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

beware of browser behaviors such as faux bold

web fonts & shapes

pepper icon from The Noun Project

the code...

<path id="slide" d="M-276-270c39 ..." />
<text font-size="55"
      font-family="caflish-script-pro">
    <textPath xlink:href="#slide"
              start-offset="10%">
    too hot to be true?
    </textPath>
</text>

the art of rendering geometry

filling
stroking - borders
graphical effects
compositing

filling

#my-box {
    background: <background-style>;
}

#my-css-text {
    color: <color-value>;
}

#my-shape, #my-svg-text {
    fill: <paint-server>
    fill-opacity: <opacity-value>
}

stroking

#my-box {
    border: <border-style>;
}

#my-css-text {
    /* only in -webkit-stroke-color and -webkit-stroke-width */
}

#my-shape, #my-svg-text {
    stroke: <paint-server>
    stroke-opacity: <opacity-value>
}

need for more consistency?

generic notion of paint server / image
general use of paint servers for both fill and stroke
applicability of fill and stroke to both text and shapes
some work happening in SVG 2.0, and specifications like CSS image values and CSS3 backgrounds and borders

future of text?

emulated with svg

graphical effects

preset filters

#my-box {
    box-shadow: <shadow-definition>
}

#my-css-text {
    text-shadow: <text-shadow-definition>
}

See the text-shadow and box-shadow specifications and the box shadow and the text shadow generators

filter shorthands

<div id="my-element">...</div>

<style>
#my-element {
    filter: grayscale(1);
}
</style>

See the Filter Effects 1.0 shorthands draft

let's try it out

original

grayscale(1)

sepia(0.8)

saturate(0.2)

hue-rotate(90deg)

opacity(0.2)

invert(0.5)

brightness(0.25)

contrast(0.5)

blur(6px)

drop-shadow(...)

picture from iStockPhoto

filter graph

<filter id="inset-shadow" x="-10%" y="-10%"
    width="150%" height="150%">
    <feFlood flood-color="rg(62,24,22)" />
    <feComposite in2="SourceAlpha" operator="out" />
    <feGaussianBlur stdDeviation="3"/>
    <feOffset dx="2" dy="4"/>
    <feComposite in2="SourceAlpha" operator="in" />
    <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode/>
    </feMerge>
</filter>

inset shadow on text

works on svg text now

curved shadows

works on svg content now

css shaders

<style>
#myElement {
    filter: custom(url(flag.vs) url(scale.fs),
                            20 20,
                            txf rotateX(30deg),
                            amount 0.5);
}
</style>

<div id="myElement">..</div>

See the web visual effects presentation

css shader studio

blend modes

#my-element {
    blend-mode: <blend-value>;
}

normal
plus
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

See the CSS Compositing and Blending 1.0 draft

blend modes examples

objects

multiply

overlay

plus

hue

Glass and bottle icons from The Noun Project

blend modes for `<canvas>`?

current CSS Compositing and Blending 1.0 draft is for CSS elements
would be easily applicable to <canvas> as well
see Rik Cabanier's proposal
investigating blending in <canvas> with proof of concept done in Firefox and WebKit

blend modes for `<canvas>`?

the art of rendering text

Currently fairly limited font and text properties
A lot more coming:

layout and transforms

life after floats & tables

css regions

<style>
#regionA, #regionB, #regionC {
    flow-from: article;
}

#article-content {
    flow-into: article;
}
</style>

<div id="grid">
    <div id="regionA"></div>
    <div id="regionB"></div>
    <div id="regionC"></div>
</div>

<div id="article-content">...</div>

css exclusions & shapes

<style>
#floatA {
    float: left;
    shape-outside: circle(50%, 50%, 50%);
}

#exclusionB {
    wrap-flow: both;
    shape-outside: polygon(10px 10px, ...);
    grid-cell: a;
}
</style>

<div id="grid">
    ...
    <div id="floatA">...</div>
    <div id="exclusionB">..;</div>
</div>

css regions & exclusions demo

transforms

new merged css transform specification
2D and 3D
makes the SVG transform a CSS property

transforms

<style>
#red-rocket {
    transform-origin: 50% 50%;
    transform: rotateY(0deg) rotateX(0deg);
    transition: transform 1s linear;
}

#red-rocket.txf {
    transform: rotateY(30deg) rotateX(20deg);
}
</style>

<g id="red-rocket"
    <path d=".." />
</g>

red-rocket

emulated example: transform on <img> with SVG src instead of transform on SVG <path> or <g> element directly.

see the CSS transform draft

parting thoughts

the graphical web is maturing
we can use a lot of features today
there are some quirks
a lot more to talk about: animation, imperative APIs

leading the web to its full
graphical
potential

tutorials and demo sites

attributions 1/3

Slide tool Reveal.js by Hakim El Hatab
Icons from the Noun project
- rocketJohn O'Shea, from The Noun Project
- rocketAntonis Makriyannis, from The Noun Project
- emailRon Hogue, from The Noun Project
- blogThe Noun Project
- elephantAdrijan Karavdic, from The Noun Project
- pepperThe Noun Project
- wineThe Noun Project
- wineThe Noun Project