$30 off During Our Annual Pro Sale. View Details »

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

  2. D’abord, questions…

  3. YOU’RE AWESOME!

  4. None
  5. Les pseudo-éléments

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

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

    4 WD) ::placeholder (lvl 4 WD) ::backdrop
  8. ::before et ::after Du contenu généré par CSS

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

  10. <div> Lorem ipsum dolor sit amet. </div> div::before { content:

    "before"; color: red; } div::after { content: "after"; color: blue; }
  11. beforeLorem ipsum dolor sit amet.after <div> ::before Lorem ipsum dolor

    sit amet. ::after </div>
  12. La propriété content

  13. content: none; content: normal;

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

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

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

  17. None
  18. Exemples connus

  19. .clearfix::after { display: table; clear: both; content: ""; }

  20. <span class="fa fa-github"></span> github .fa { display: inline-block; font: normal

    normal normal 1em/1 FontAwesome; font-size: inherit; /* etc. */ } .fa-github::before { content: "\f09b"; }
  21. Cas simples

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

  23. [target="_blank"]::after { content: url("external.svg"); } [href^="https"]::before { content: url("secure.svg"); }

    [href^="#"]:hover::before, [href^="#"]:focus::before { content: "#"; }
  24. @media print { [href]::after { content: " (" attr(href) ")";

    } }
  25. Démo flèche de bulle

  26. Démo marqueur d’accordéon

  27. Démo info-bulle

  28. Démo overlay

  29. None
  30. Démo ombre

  31. Démo lien de galerie

  32. Démo lien de galerie

  33. Démo UX sur focus

  34. Démo navigation effet 1

  35. Démo navigation effet 2

  36. Démo navigation effet 3D

  37. Démo bouton effet 3D

  38. Démo sommaire

  39. Démo quotes internationales

  40. Démo compteur CSS

  41. Démo checkbox et compteur

  42. Démo fil d’Ariane

  43. Démo aspect ratio

  44. Démo highlight de cellule de tableau

  45. Démo icône menu burger

  46. Démo nav et trigger fullpage

  47. …et beaucoup d’autres possibilités

  48. None
  49. None
  50. TANK YOU captures de Kung Fury ©Laser Unicorns

  51. MATTHIEU BUÉ @twikito twikito.com