How to create a responsive postcard design background

[alexthejohnojohnson]

Hi, I have seen this effect done here http://www.letstravelsomewhere.com/contact/ 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!!

TIA

[Beverleyh]

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 https://daneden.github.io/animate.css/

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.

[alexthejohnojohnson]

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.

[mikecr8n]

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.

https://codepen.io/mikecr8n/pen/JvpVrJ

Hope it helps.

[alexthejohnojohnson]

Wow… you nailed it Mike!

Cheers mate

[Author]

Posts