Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Les pseudo-éléments, c'est bon !

Les pseudo-éléments, c'est bon !

(Présenté à la Kiwiparty le 19 juin 2015)

Les pseudo-éléments, ça n'a l'air de pas grand chose, mais ces petits trucs de CSS ont un potentiel incroyable.

L'idée ici sera de faire une piqûre de rappel, et de montrer à quel point, combinés à d'autres techniques CSS, les pseudo-éléments peuvent-être une réelle opportunité à la créativité et à l'optimisation du code.

Retrouvez les exemples sur http://codepen.io/collection/AkEdeb/.
Retrouvez l'audio de la conférence sur http://2015.kiwiparty.fr/.

Matthieu Bué

June 19, 2015
Tweet

More Decks by Matthieu Bué

Other Decks in Programming

Transcript

  1. C’EST BON !
    LES PSEUDO-ÉLÉMENTS
    C’EST BON !
    C’EST BON !

    View full-size slide

  2. D’abord, questions…

    View full-size slide

  3. YOU’RE
    AWESOME!
    YOU’RE
    AWESOME!
    YOU’RE
    AWESOME!

    View full-size slide

  4. Les pseudo-éléments

    View full-size slide

  5. ::first-line
    ::first-letter
    ::before
    ::after
    ::selection

    View full-size slide

  6. ::spelling-error (lvl 4 WD)
    ::grammar-error (lvl 4 WD)
    ::marker (lvl 4 WD)
    ::placeholder (lvl 4 WD)

    View full-size slide

  7. ::before et ::after
    Du contenu généré par CSS

    View full-size slide

  8. Toujours spécifier la propriété
    content.

    View full-size slide

  9. démo

    Lorem ipsum dolor sit amet.

    div::before {
    content: "before"; color: red;
    }
    div::after {
    content: "after"; color: blue;
    }

    View full-size slide

  10. résultat
    beforeLorem ipsum dolor sit amet.after

    ::before
    Lorem ipsum dolor sit amet.
    ::after

    View full-size slide

  11. La propriété content

    View full-size slide

  12. content: none;
    content: normal;

    View full-size slide

  13. content: “hello”;
    content: url(‘nyan-cat.svg’);

    View full-size slide

  14. content: open-quote;
    content: close-quote;
    content: no-open-quote;
    content: no-close-quote;

    View full-size slide

  15. content: counter(var);
    content: attr(class);

    View full-size slide

  16. Exemples connus

    View full-size slide

  17. .clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }
    La classe .clearfix

    View full-size slide

  18. github
    Les polices d’icônes
    .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    }
    .fa-github::before {
    content: "\f09b";
    }

    View full-size slide

  19. [href$=".pdf"]::after { content: "(pdf)"; }
    [href$=".zip"]::after { content: "(zip)"; }

    View full-size slide

  20. [target="_blank"]::after { content: url("external.png"); }
    [href^="https"]::before { content: url("secure.png"); }
    [href^="#"]:hover::before,
    [href^="#"]:focus::before { content: "#"; }

    View full-size slide

  21. @media print {
    [href]::after {
    content: " (" attr(href) ")";
    }
    }

    View full-size slide

  22. Démo flèche de bulle

    View full-size slide

  23. Démo puce et rotation

    View full-size slide

  24. Démo info-bulle

    View full-size slide

  25. Ok.
    Creative time!

    View full-size slide

  26. Démo ombres sous vignettes

    View full-size slide

  27. Démo lien de galerie

    View full-size slide

  28. Démo champs de saisie et focus

    View full-size slide

  29. Démo champ de saisie UX sur focus

    View full-size slide

  30. Démo survol de liens boutons

    View full-size slide

  31. Démo survol de bouton et 3D

    View full-size slide

  32. Démo survol de lien boutons et 3D

    View full-size slide

  33. Démo compteur CSS

    View full-size slide

  34. Démo checkbox et labels + compteur

    View full-size slide

  35. Démo fil d’Ariane avec flèche et compteur

    View full-size slide

  36. Démo bouton menu “burger” et active

    View full-size slide

  37. Démo nav et fullpage trigger

    View full-size slide

  38. …et bien d’autres
    exemples

    View full-size slide

  39. MERCI !
    MERCI !
    MERCI !
    Matthieu Bué
    @twikito
    twikito.com

    View full-size slide