Le futur des effets graphiques sur le web

Vincent De Oliveira · 9^ème Meetup HTML5 · avril 2013

Vous aurez besoin de Chrome Canary (flags actifs: «Fonctionnalités expérimentales WebKit», «Shaders»), Firefox Nightly, IE10. :)

Les effets (presque) courants

Quoi de plus? de mieux?

• Les fonctions d'images
• Les masques CSS et SVG
• Les exclusions et formes
• Les filtres (avancés)

Les fonctions d'images

cross-fade()

• Fondu entre images
• Dans le module Image & Replaced Content Level 4
• Chrome, Safari uniquement: -webkit-cross-fade()
• Transition CSS entre images possible (Chrome)

Démo: cross-fade()

Attention, fonctionne avec Chrome et Safari uniquement

element()

background: element( #id )

• Image dynamique à partir d'un élément de la page
• Dans le module Image & Replaced Content Level 4
• Firefox uniquement: -moz-element()

Démo: element()

Sur un élément classique d'une page

Attention, fonctionne avec Firefox uniquement

Démo: element()

Sur un élément canvas

• Noir
• Rouge
• Vert
• Bleu
• Rose

Attention, fonctionne avec Firefox uniquement

Les masques

Les masques

• Module CSS Masking Level 1
• Standardise une syntaxe WebKit (2008)
• Reprends certaines des propriétés SVG

clip()

• Rogne un élément
• Seulement des rectangles
• Seulement sur des éléments en position: absolute
• Propriété CSS, supportée partout!

clip-path()

• Rogne un élément, basé sur une forme:
  • un élément SVG <clipPath>
  • une fonction rect(), circle(), ellipse() ou polygon()
• Compatible Firefox, Chrome sur tous les éléments (HTML+SVG)

Démo: clip-path()

img{
	/* Chrome */
	-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
	/* Firefox */
	clip-path: url('#clip1');
}

<!-- Firefox only -->
<svg>
<defs>
<clipPath id="clip1" clipPathUnits="objectBoundingBox">
	<polygon points="0,0 100,100 0,100" />
</clipPath>
</defs>
</svg>

Attention, fonctionne avec Firefox et Chrome uniquement

mask

• Propriété raccourcie, 2 possibilités:
• Permet de référencer un <mask> SVG
  • luminance mask: niveau de gris
  • alpha mask: transparence
  • Compatible dans Firefox sur HTML: mask
  • Compatible ailleurs sur SVG
• Même utilisation que background-image
  • alpha mask: Image PNG/GIF, dégradés CSS
  • déclinaisons: mask-position, mask-repeat, mask-size, etc.
  • Compatible dans WebKit (Chrome 4, Safari 4, iOS 3.2, Android 2.1): -webkit-mask-*

Démo: Masques CSS

img{
	/* WebKit */
	-webkit-mask: linear-gradient(black, transparent 75%);
	-webkit-mask-size: 100% 100%;
	/* Firefox */
	mask: url('#mask1');
}

<!-- Firefox only -->
<svg>
<mask id="mask1" maskUnits="userSpaceOnUse">
	<rect width="308" height="328" fill="url(#gr)"/>
	<linearGradient x1="0" y1="0" x2="0" y2="1" id="gr">
		<stop offset="0%" stop-color="white" />
		<stop offset="75%" stop-color="black" />
	</linearGradient>
</mask>
</svg>

Attention, fonctionne avec Firefox et Webkit uniquement

Démo: Surbrillance

Tutoriel en ligne sur CSS3Create

Les exclusions & formes

Exclusions CSS

• Module CSS Exclusions and Shapes Level 3
• Deux notions:
  • Exclusions: similaire à float, mais plus étendu
  • Formes: zone interne ou externe à une exclusion
• Compatible Chrome (flag), IE10

wrap-flow

• Définit une exclusion (le flux de la page la contourne)
• Peu importe sa position dans la page, et son mode de positionnement (Absolute, Flexbox, Grid, etc.)
• Compatible IE10

Démo: wrap-flow

.exclusion--center{
	wrap-flow: both;
	wrap-margin: 15px;
}

Meetup Bière & Pizzas HTML5

Le 9ème Meetup html5 aura lieu le mardi 23 avril à partir de 19 heures. Au programme, du hack, du CSS, de la font,... et de la pizza

L'ART DE BRICOLER, LA SUITE - Sylvain Weber, Jean-Marie Clery

Lors d'un précédent Meetup, Sylvain nous avait présenté comment créer une expérimentation Gamepad API originale autour d'une interface de contrôle inattendue : le tapis de danse (voir la vidéo). En réponse à son hack, Jean-Marie Clery viendra présenter un jeu en utilisant... la manette Guitar hero !

LE FUTUR DES EFFETS GRAPHIQUES SUR LE WEB - Vincent De Oliveira

Les effets graphiques de CSS3 ont révolutionné le design web. La conférence va tenter de présenter les possibilités graphiques de CSS auxquelles on peut s'attendre dans les prochains mois, voire années. Nous parlerons filtres, masques, fonctions d'images, typo, SVG, etc...

CSS3 : L'ÈRE DES "ICON FONTS" - Martin Charpentier, Thibaut Baillet

À travers leur retour d'expérience, nous verrons comment concevoir une font icône et comment les utiliser avec CSS3.

Attention, fonctionne avec IE10 uniquement

shape-outside

• Définit la forme de l'exclusion
• Le flux suit cette forme
• Les formes: rect(), circle(), ellipse() ou polygon()
• Existe aussi shape-inside
• Compatible Chrome 28+ (flag)

Démo: shape-outside

.exclusion--left{
	float: left;
	shape-outside: polygon(0 0, 100% 0, 107% 14%, 107% 27%, 95% 48%, 91% 71%, 112% 100%, 0 100%);
}
.exclusion--right{
	float: right;
	shape-outside: circle(45%, 50%, 50%);
}

Meetup Bière & Pizzas HTML5

Le 9ème Meetup html5 aura lieu le mardi 23 avril à partir de 19 heures. Au programme, du hack, du CSS, de la font,... et de la pizza

L'ART DE BRICOLER, LA SUITE - Sylvain Weber, Jean-Marie Clery

Lors d'un précédent Meetup, Sylvain nous avait présenté comment créer une expérimentation Gamepad API originale autour d'une interface de contrôle inattendue : le tapis de danse (voir la vidéo). En réponse à son hack, Jean-Marie Clery viendra présenter un jeu en utilisant... la manette Guitar hero !

LE FUTUR DES EFFETS GRAPHIQUES SUR LE WEB - Vincent De Oliveira

Les effets graphiques de CSS3 ont révolutionné le design web. La conférence va tenter de présenter les possibilités graphiques de CSS auxquelles on peut s'attendre dans les prochains mois, voire années. Nous parlerons filtres, masques, fonctions d'images, typo, SVG, etc...

CSS3 : L'ÈRE DES "ICON FONTS" - Martin Charpentier, Thibaut Baillet

À travers leur retour d'expérience, nous verrons comment concevoir une font icône et comment les utiliser avec CSS3.

Attention, fonctionne avec Chrome 28+ uniquement (flag)

Les filtres

Filtres CSS

• Filtres raccourcis
• Filtres SVG classiques
• Filtres customs: Shaders

• Module Filter Effects 1.0 (décembre 2011)

Filtres raccourcis

• 10 fonctions
  • grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow
• Compatible dans Chrome 19+, Safari 6, iOS : -webkit-filter

Filtres SVG (classiques)

filter: url(fichier.svg#id)

• Primitive de filtre
  • feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence

• Compatible Firefox 3.5 sur tous les éléments: filter
• Compatible IE 10, Chrome 8, Safari 5.2, Opera 9 sur les éléments SVG: filter

Démo: Filtres

ul:hover li:not(:hover) img{
	-webkit-filter: grayscale(1) blur(5px);
	filter: url('#filtre1');
}

<!-- Firefox only -->
<svg>
<defs>
<filter id="filtre1">
	<feGaussianBlur stdDeviation="5" />
	<feColorMatrix type="matrix"
		values="0 0.7152 0.0722 0 0
				0 0.7152 0.0722 0 0
				0 0.7152 0.0722 0 0
				0 0 0 1 0" />
	</filter>
</defs>
</svg>

Attention, fonctionne avec Chrome, Safari, Firefox uniquement

Démo: Filtres SVG

p{
	font: 3.4em sans-serif;
	padding: .5em 0;
	color: deeppink;
	filter: url('#ombre-interne');
}

<!-- Firefox only -->
<svg>
<defs>
<filter id="ombre-interne">
	<feFlood flood-color="rgba(0,0,0,.9)" />
	<feComposite in2="SourceAlpha" operator="out" />
	<feGaussianBlur stdDeviation="3"/>
	<feOffset dx="4" dy="4"/>
	<feComposite in2="SourceAlpha" operator="in" />
	<feMerge>
		<feMergeNode in="SourceGraphic"/>
		<feMergeNode/>
	</feMerge>
	</filter>
</defs>
</svg>

Attention, fonctionne avec Firefox uniquement (le texte n'est pas en SVG)

Filtres avancés (shaders)

filter: custom(url(vertex.vert) mix(url(fragment.frag) normal source-atop), 40 40, var 1)

• Manipulation du contenu DOM
• Similaire aux shaders WebGL (GLSL):
  • Vertex shader: modifie le maillage
  • Fragment vertex: modifie les couleurs
• Maillage défini en CSS
• Variables passées en CSS vers les shaders
• Animations possibles
• Compatible Chrome (flag)

Démo: Filtres avancés

Attention, fonctionne avec Chrome uniquement (flags activés)

Démo: Filtres avancés

share

cloud

attach

Attention, fonctionne avec Chrome uniquement (flags activés)

Ressources

• Conférence similaire: «Les effets graphiques (très) avancés»
• CSS Masking on HTML5Rocks
• Les exclusions CSS dans IE10
• Plus loin avec shape-outside
• Introduction to Custom Filters (aka CSS Shaders)
• Adobe CSS FilterLab