About this presentation

This presentation was given at the Adobe Camp Brazil 2012 meet-up held in MaceiĆ³, Alagoas, Brazil on Saturday April 28th. 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 28th 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

too hot to be true?too hot to be true?

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?

graphical graphical rendering rendering

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

inset

works on svg text now

curved shadows

no extra markup or :before!!! oh yeah!

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>?

blend modes for <canvas>?

the art of rendering text

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

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

attributions 2/3

attributions 3/3

html.adobe.com

twitteremailblog