The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to create a responsive postcard design background

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #270846

    Hi, I have seen this effect done here and would love to re-create it. I’m using WordPress and have the Enfold Theme installed but can call on an ID of a column which can be manipulated (I think) to be able to achieve this through CSS.

    My problem is… I don’t know where to start!!



    Are you asking about the fade-in-up effect? Or the actual postcard element?

    I couldn’t tell you the first thing about adding custom HTML or CSS into WordPress (most folks here would assume you know how to do that already, or hit up Google to find out), but tor the fade-in-up effect, look as the Animate.css library

    For the postcard, you can examine your linked example in the browser’s developer console – that’s F12 in most browsers – and extract the relevant HTML and CSS.

    If you need further help (e.g. with responsiveness) mock-up the postcard that you have in a CodePen and explain the problem you’re having. It’s best to provide a simplified demo rather than a whole codebase because lots of extra/unrelated code will put people off.


    Hi Beverley, thanks for your help. It’s for the actual look of the postcard so that it moves in response to the various screen sizes. I’ll have a play about on CodePen and see how I get on, thanks.


    I took a slightly different approach, but this could work for anything. The trick was the background image for the border. Set a parent element with the background, then a child element with a white background and it will look like a border.

    You can mess with the box-shadows to give more depth to the edges if you want — but this should get you started.

    Hope it helps.


    Wow… you nailed it Mike!

    Cheers mate

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.