Les effets graphiques (très) avancés

Vincent De Oliveira · Kiwiparty 2012

t.co/Vw9tDej

Vincent De Oliveira

• Formateur web ENSG
• @iamvdo
• Livre CSS3 Le design web moderne
• iamvdo.me
• css3create.com
• prefixmycss.com

Les effets (presque) courants

Quoi de plus? de mieux?

Trois fois rien...

Commençons par la poudre aux yeux!

Background and Borders

border-corner-shape: curve | bevel | scoop | notch

• Au sein de CSS4, pas de support actuellement

Background and Borders

border-clip: 10px 1fr 10px

• Au sein de CSS4, pas de support actuellement

Typographie

Quoi de neuf dans la gestion des textes?

font-variant · font-feature-settings

• Contrôle de l'affichage des glyphes
• Ligatures, crénage, fractions, variantes styllistiques, etc.

font-variant

• Propriété raccourcie
• Aucun support actuellement

font-feature-settings

• Code OpenType
• Firefox 4+, IE10

Fonctions d'images

cross-fade()

cross-fade( image1, image2, %)

• Fondu entre images
• Chrome uniquement (18+): -webkit-cross-fade()
• Transition CSS entre images possible
• Retirée de CSS3...

cross-fade()

Attention, fonctionne avec Chrome 18+ uniquement

element()

element( #identifiant )

• Image dynamique à partir d'un élément de la page
• Firefox uniquement (4+): -moz-element()
• Module CSS Image Values and Replaced Content Module Level 3
• Ah non, retirée de CSS3...(17 Avril 2012)

element()

Sur un élément classique d'une page

Attention, fonctionne avec Firefox 4+ uniquement

element()

Sur un élément canvas

• Noir
• Rouge
• Vert
• Bleu
• Rose

Attention, fonctionne avec Firefox 4+ uniquement

element()

Sur un élément video

Super
casque

99€

Attention, fonctionne avec Firefox 4+ uniquement

SVG et CSS

La mort de Flash?

Styler le SVG

• Styler du SVG inclus dans le HTML depuis CSS
• Transitions et Animations CSS sur propriétés SVG

rect{
   fill: red;     
}
rect:hover{
   fill: blue;
}

Spécifications communes

• Module CSS Transforms (2D + 3D + SVG) du 3 avril 2012

<svg width="400" height="300">
     <polygon points="200,50 300,250 100,250" />
</svg>

polygon{
   fill: red;
   transition: all 1s;
}
polygon:hover{
   transform-origin: 50% 50%;
   transform: rotate(45deg);
   fill: blue;
}

Attention, fonctionne avec Chrome Nightly uniquement

Filtres CSS

• Raccourcis
• Filtres SVG classiques
• Shaders

• Filter Effects 1.0 (décembre 2011)

Filtres raccourcis

filter: blur(5px)

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

• D'autres bientôt...
  • halftone, motion-blur, posterize, bump, affine-transform, bloom, gloom, mosaic, displace, edge-detect , pinch, twirl

Filtres raccourcis

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

Attention, fonctionne avec Chrome 19+ 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

Filtres SVG (classiques)

Filtre flou gaussien

<svg>
   <filter id="flou">
      <feGaussianBlur stdDeviation="5" />
   </filter>
</svg>

#elem{
   filter: url('#flou');
}

Filtres SVG (classiques)

Filtre complexe

<filter id="effetPhoto" x="0" y="0">
   <feFlood flood-color="#222b6d" result="teinte1" width="100%" height="100%" />
   <feFlood flood-color="#f7daae" result="teinte2" width="100%" height="100%" />
                    
   <feBlend in="SourceGraphic" in2="teinte1" mode="lighten" result="f1" />
   <feBlend in="f1" in2="teinte2" mode="multiply" result="f2" />
                    
   <feImage xlink:href="texture.png"  result="texture" height="100%" width="100%" preserveAspectRatio="none" />
   <feComposite in="f2" in2="texture" operator="in" />
</filter>

#elem{
   filter: url('#effetPhoto');
}

Filtres SVG (classiques)

• Filtre 0
• Filtre 1
• Filtre 2
• Filtre 3

Attention, fonctionne avec Firefox 3.5+ uniquement (l'image n'est pas en SVG)

Filtres SVG (classiques)

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

Masques CSS

Masques CSS

• Image composée de pixels et de transparence
• Même fonctionnement que background-image
  • Image classique, dégradés CSS
• Pas une spécification CSS
• Compatible dans Webkit (Chrome 4, Safari 4, iOS 3.2, Android 2.1): -webkit-mask

Masques SVG (sur éléments HTML)

• balise mask SVG
• Compatible dans Firefox 3.5

Masques CSS

img{
   -webkit-mask: linear-gradient(black,transparent);
   -webkit-mask: url(img/casque.png);
   -webkit-mask-size: 100% 100%;
}

Attention, fonctionne avec Webkit uniquement (Chrome 4, Safari 4, iOS 3.2, Android 2.1)

Masques SVG

<svg height="0">
<mask id="myMask">
   <rect width="100%" height="320" 
         fill="url(#myGradient)"/>
   <linearGradient x1="0" y1="0" 
                   x2="0" y2="1" 
                   id="myGradient">
      <stop offset="0" stop-color="white" />
      <stop offset="1" stop-color="black" />
   </linearGradient>
</mask>
</svg>

img{
   mask: url('#myMask');
}

Attention, fonctionne avec Firefox 3.5+ uniquement (l'image n'est pas en SVG)

Demo qui rock's!

Cliquez sur l'image pour faire apparaitre une popup

Attention, fonctionne avec Firefox 4+ uniquement

Aujourd'hui

Typographie avancée

• Firefox 4+, IE10 (Webkit en cours)

Fonctions d'images

• cross-fade(): Chrome 18, element(): Firefox 4

SVG

• Specs communes (transform): Chrome
• Filtres: raccourcis (Chrome), tous les éléments (Firefox 3.5), éléments SVG (IE10,Opéra,Chrome,Safari bientôt)
• Masques CSS (Webkit)
• Masques SVG sur tous les éléments (Firefox 3.5), sur éléments SVG (IE9,Opéra,Chrome)

Merci, questions?

Vincent De Oliveira · @iamvdo