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.

Steve Honeyman

April 17, 2018
Tweet

More Decks by Steve Honeyman

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Using Advanced Custom Fields to create
    multi-layered print style graphics in the
    browser, adding a little responsive type into
    the mix.

    View full-size slide

  3. header {background-image}

    View full-size slide

  4. header:after {backgound-image}

    View full-size slide

  5. header {background-color}

    View full-size slide

  6. figure img {}

    View full-size slide

  7. figure {background-image}

    View full-size slide

  8. figure:before {background-image}

    View full-size slide

  9. figure:after {background-image}

    View full-size slide

  10. • 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.

    View full-size slide

  11. 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

    View full-size slide

  12. stevehoneyman.co.uk/blog/wordcamp
    stevehoneyman.co.uk/blog/blue-notes

    View full-size slide