Les effets graphiques (très) avancés

Vincent De Oliveira · Kiwiparty 2012

t.co/Vw9tDej

Vincent De Oliveira

Les effets (presque) courants

  • text-shadow
  • box-shadow
  • border-image
  • border-radius
  • arrière-plans multiples
  • background-*
  • dégradés
  • transitions
  • animations
  • transformations 2D/3D
  • @font-face

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

Rendu visuel de border-corner-shape

  • Au sein de CSS4, pas de support actuellement

Background and Borders

border-clip: 10px 1fr 10px

Rendu visuel de border-clip

  • 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

font-feature-settings

  • Ligatures standards: efficaceefficace
  • Ligatures optionnelles: AbbayeAbbaye
  • Chiffres elzéviriens: 482482
  • Fractions: 1/3 1/41/3 1/4
  • Ordinaux: 13th13th

Attention, fonctionne avec Firefox 4+, IE10 · Police Contenu Book Display Regular

font-feature-settings

  • Variantes styllistiques: ArbreArbre
  • Variantes contextuelles: ArbreArbre
  • Crénage: WAVEWAVE
  • Petites capitales: CapitalesCapitales
  • Ornements: abcabc

Attention, fonctionne avec Firefox 4+, IE10 · Contenu Book Display Regular disponible sur myFonts

font-feature-settings

Les codes OpenType: liga, dlig, onum, frac , ordn, swsh, cswh, kern, smcp/c2sc , ornm

p{
   -moz-font-feature-settings: "liga" 1,"dlig" 1,"swsh" 1,"frac" 1;
   -ms-font-feature-settings: "liga" 1,"dlig" 1,"swsh" 1,"frac" 1;
   font-feature-settings: "liga" 1,"dlig" 1,"swsh" 1,"frac" 1;
}

st ct fj gg tt ry Wh
1/4 de sucre, 3/4 de sel

Attention, fonctionne avec Firefox 4+, IE10 · Police Contenu Book Display Regular · Annuaire des codes OpenType

font-feature-settings

Alice & Watts

Small cakes with good taste

Alice & Watts

Small cakes with good taste

Attention, fonctionne avec Firefox 4+, IE10 · Police Melany Lane disponible sur myFonts

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

Avec -webkit-cross-fade
Animation/Transition CSS sur images

Attention, fonctionne avec Chrome 18+ uniquement

element()

element( #identifiant )

element()

Sur un élément classique d'une page

Lorem ipsum dolor sit amet.Consectetuer Vestibulum interdum id Suspendisse lacus dapibus adipiscing Phasellus sed vestibulum. Natoque cursus rutrum convallis et. Vestibulum libero semper convallis Donec sollicitudin risus.

Arbres en automne

Attention, fonctionne avec Firefox 4+ uniquement

element()

Sur un élément canvas

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;
}
rect

Spécifications communes

<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

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)

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

Filtres SVG (classiques)

Ombre interne

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

La mer, les palmiers...

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

Voir la vidéo de la présentation · Suivez-moi sur twitter: @iamvdo