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

WordCamp London Slides

WordCamp London Slides

Slides from my lightening talk at WordCamp London 2018 demo-ing how to users can create print style hero images via the dashboard.

Using Advanced Custom Fields users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity to any element.

093b36f2dc8a122dae080cdb112f6f4b?s=128

Steve Honeyman

April 17, 2018
Tweet

Transcript

  1. None
  2. stevehoneyman.co.uk stevehoneyman.co.uk/blog/wordcamp : github.com/stevehoneyman stevehoneyman

  3. Using Advanced Custom Fields to create multi-layered print style graphics

    in the browser, adding a little responsive type into the mix.
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. header {background-image}

  14. header:after {backgound-image}

  15. header {background-color}

  16. img {}

  17. figure img {}

  18. figure {background-image}

  19. figure:before {background-image}

  20. figure:after {background-image}

  21. h1 {}

  22. • Image Field Type to control images • Radio Button

    Field Type to control blend-modes • Number Field Type to control opacity, rotate and letter-spacing if required. • Color Picker Field Type to control background and font colours.
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. Use viewport width and CSS locks to scale and control.

    Apply either by; • Resetting font-size on HTML root element • Using calc() on specific elements
  31. None
  32. None
  33. None
  34. stevehoneyman.co.uk/blog/wordcamp stevehoneyman.co.uk/blog/blue-notes