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

Pseudo-éléments : Pseudos mais puissants !

Pseudo-éléments : Pseudos mais puissants !

(Présenté à BDX I/O le 21 octobre 2016)

Les pseudo-éléments, vous en avez sûrement au moins entendu parler, mais savez-vous réellement exploiter leurs potentiels servis sur un plateau ?
De la base avec des exemples simples à des cas concrets avancés, nous allons voir comment utiliser ces diableries en les combinant à d'autres techniques CSS, tout en gardant un code propre et optimisé.
L'objectif de cette présentation sera de vous montrer (de façon amusante) qu'il suffit bien souvent de faire preuve de créativité et d’imagination.
Attention : techniques velues probables !

Retrouvez les exemples sur http://codepen.io/collection/AkEdeb/.
Retrouvez la vidéo de la conférence sur https://youtu.be/7dVcF091v0I

Matthieu Bué

October 21, 2016
Tweet

More Decks by Matthieu Bué

Other Decks in Programming

Transcript

  1. PSEUDO-ÉLÉMENTS
    pseudos mais puissants

    View full-size slide

  2. D’abord, questions…

    View full-size slide

  3. YOU’RE
    AWESOME!

    View full-size slide

  4. Les pseudo-éléments

    View full-size slide

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

    View full-size slide

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

    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. Lorem ipsum dolor sit amet.

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

    View full-size slide

  10. 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 {
    display: table;
    clear: both;
    content: "";
    }

    View full-size slide

  18. github
    .fa {
    display: inline-block;
    font: normal normal normal 1em/1 FontAwesome;
    font-size: inherit;
    /* etc. */
    }
    .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.svg");
    }
    [href^="https"]::before {
    content: url("secure.svg");
    }
    [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 marqueur d’accordéon

    View full-size slide

  24. Démo info-bulle

    View full-size slide

  25. Démo overlay

    View full-size slide

  26. Démo lien de galerie

    View full-size slide

  27. Démo lien de galerie

    View full-size slide

  28. Démo UX sur focus

    View full-size slide

  29. Démo navigation effet 1

    View full-size slide

  30. Démo navigation effet 2

    View full-size slide

  31. Démo navigation effet 3D

    View full-size slide

  32. Démo bouton effet 3D

    View full-size slide

  33. Démo sommaire

    View full-size slide

  34. Démo quotes internationales

    View full-size slide

  35. Démo compteur CSS

    View full-size slide

  36. Démo checkbox et compteur

    View full-size slide

  37. Démo fil d’Ariane

    View full-size slide

  38. Démo aspect ratio

    View full-size slide

  39. Démo highlight de cellule de tableau

    View full-size slide

  40. Démo icône menu burger

    View full-size slide

  41. Démo nav et trigger fullpage

    View full-size slide

  42. …et beaucoup
    d’autres possibilités

    View full-size slide

  43. TANK YOU
    captures de Kung Fury ©Laser Unicorns

    View full-size slide

  44. MATTHIEU BUÉ
    @twikito twikito.com

    View full-size slide