Le futur des effets graphiques en CSS

Vincent De Oliveira · Blend Conférence · octobre 2013

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

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

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, Safari 7, iOS7

Démo: clip-path()

img{
	/* Chrome */
	-webkit-clip-path: polygon(50% 0%, 100% 38%, 100% 38%, 80% 100%, 80% 100%, 19% 100%, 19% 100%, 0 38%, 0% 38%, 50% 0);
	/* Firefox */
	clip-path: url('#clip1');
}
img:hover{
	/* Chrome */
	-webkit-clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 61%, 80% 100%, 50% 77%, 19% 100%, 30% 61%, 0% 38%, 37% 38%);
}

<!-- Firefox only -->
<svg>
<defs>
<clipPath id="clip1">
	<polygon points="150,0 186,121 300,121 209,198 242,320 150,247 57,320 90,198 0,121 113,121" />
</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

• CSS Exclusions = modules exclusions et formes
• Exclusions: similaire à float, mais plus étendu
• Formes: zone interne ou externe à une exclusion
• Compatible en partie 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.)
• Anciennement float: positioned
• Compatible IE10

Démo: wrap-flow

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

Fast Food: Bière & Pizzas

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

On vends quoi?

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

Attention, fonctionne avec IE10 uniquement

shape-outside | inside

• Définit la forme de l'exclusion
• Le flux suit cette forme
• Les formes: rect(), circle(), ellipse() ou polygon()
• Permet d'extraire une forme basée sur la couche alpha d'une image (définition du seuil avec shape-image-threshold)
• Compatible Chrome 28+ (flag)

Démo: shape-outside

.exclusion--left{
	float: left;
	shape-outside: polygon(0 0, 100% 0, 110% 15%, 110% 30%, 95% 50%, 90% 70%, 90% 75%, 100% 90%, 110% 110%, 0 110%);
	/*shape-outside: url(vdo/imgs/biere.png);*/
}
.exclusion--right{
	float: right;
	shape-outside: circle(45%, 50%, 50%);
}

Fast Food: Bière & Pizzas

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

On vends quoi?

On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas. On vends des bières et des pizzas.

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

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

La fonction filter()

• Permet d'appliquer un filtre sur une image
• Très récent (septembre 2013), WebKit nightlies

Démo: filter()

div{
background-image: 

	-webkit-filter(
		url('vdo/imgs/nature1_300x320.jpg'),
		opacity(.5)
	),
	
	-webkit-filter(
		url('vdo/imgs/nature2_300x320.jpg'),
		opacity(1)
	);

background-size: 100% 100%;
}
div:hover{
background-image: 

	-webkit-filter(
		url('vdo/imgs/nature1_300x320.jpg'),
		opacity(.5) invert(1)
	),
	
	-webkit-filter(
		url('vdo/imgs/nature2_300x320.jpg'),
		opacity(1)
	);
}

Attention, fonctionne avec WebKit nightly uniquement

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

Démo: element() + filtres

Arrière-plan floutté style iOS7

Attention, fonctionne avec Firefox uniquement

Démo: filtres + masques

Flou progressif (linéaire et radial)

Attention, fonctionne avec Chrome, Safari et Firefox uniquement

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

• CSS Masking on HTML5Rocks
• Les exclusions CSS dans IE10
• Plus loin avec shape-outside
• Introduction to Custom Filters (aka CSS Shaders)
• Adobe CSS FilterLab
• Polyfill pour les filtres CSS