gif + big text

[millennialfalcon]

open post

voice ✦ video ✦ text ✦ action

CODE

---

how's my driving?

IP off ✦ anon on ✦ comments screened

CODE

---

navigation

app ✦ inbox ✦ hmd ✦ permissions

CODE

---

JUST TEXT:

<raw-code><center><div style="max-width:100%;width: 500px; height: 350px; background: url(IMGURL) center bottom; background-size: cover;display:flex;justify-content:center;align-items:center;"> <span style="color: #fff; text-transform: lowercase; font-size:60pt; font-weight:bold; text-shadow: 1px 1px 20px #ACCENTCOLOR;font-family:'FONT'">BIG TEXT</span> </div> <div style="letter-spacing:4px;font-family:'FONT';font-size:12pt;">THING 1 <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> THING 2 <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> THING 3 <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> THING 4</div><br/> <div style="max-width:100%;width: 500px; text-align: right;"><a href="http://chriscodes.dreamwidth.org/" style="font-size:8px;letter-spacing:4px;text-decoration:none;color:#bbb;">CODE</a></div></center></raw-code>

WITH LINKS:

<raw-code><center><div style="max-width:100%;width: 500px; height: 350px; background: url(IMGURL) center bottom; background-size: cover;display:flex;justify-content:center;align-items:center;"> <span style="color: #fff; text-transform: lowercase; font-size:60pt; font-weight:bold; text-shadow: 1px 1px 20px #ACCENTCOLOR;font-family:'FONT'">BIG TEXT</span> </div> <div style="letter-spacing:4px;font-family:'FONT';font-size:12pt;"><a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 1</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 2</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 3</a> <span style="color:#ACCENTCOLOR;font-weight:bold;">✦</span> <a href="LINKURL" style="text-decoration: none; color:#LINKCOLOR;">THING 4</a></div><br/> <div style="max-width:100%;width:500px; text-align: right;"><a href="http://chriscodes.dreamwidth.org/" style="font-size:8px;letter-spacing:4px;text-decoration:none;color:#bbb;">CODE</a></div></center></raw-code>

THINGS TO REPLACE:

• IMGURL = your gif
  
• FONT = your font
  
• ACCENTCOLOR = the hex code of the color for the big text shadow and accent color between each item of text at the bottom
  
• BIG TEXT = the big text over the gif
  
• THING 1, 2, 3, 4 = the bits at the bottom, customize as necessary
  
• LINKURL = URL for your links
  
• LINKCOLOR = the hex code of the color for your links
  
  
• text-transform: lowercase; = (optional) remove if you want to be able to capitalize the big text

Comments

[honore]

Thank you for creating and sharing this code! It was super easy to customize and it's really cute, I adore it. Thank you again for sharing!

[queenofbooks]

hey Chris!

Could you tell me what I messed up here. I want to change the fonts.

Thanks!

[millennialfalcon]

Hi!

It looks like the font you're trying to use isn't one of the usually accepted web safe fonts, so the page is defaulting to serif. If you want Pacifico Regular to show up in your layout, then you need to make sure it's added in the style sheet somewhere.

[seaurchin]

appears months later

thanks for this easy code, chris

[draconisrose]

thanks for the code! It's super easy to figure out and it looks great! I've used it a few times now.

[nestingdevil]

This is an awesome code! Thanks for sharing this. Definitely going to be using this jam!