✨Adding Interesting Backgrounds In Your Text Using CSS✨

  • 1
  • Article
  • Updated 3 years ago
  • (Edited)



As a follow up to one of our articles on making interesting headers with code, here is another way to create interesting headers. Using the HTML Widget, you can add and tweak the following code to look similar to the images above.

To start, create a new Presentation at https://apps.risevision.com/editor. I've decided to use 1920x1080 as my resolution.

Once you have created your Presentation, add a new Placeholder:


And add the HTML Widget from the Add Content menu:



In the HTML Widget, delete all of the code. This should leave you with a blank document:



Copy and paste all of the code below into the HTML Widget:


<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lobster:400);

.clip-text {
font-size: 29em;
font-weight: bold;
font-family: Lobster;
position: relative;
display: inline-block;
margin: .05em;
padding: .01em .02em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* This is where you change the backgrounds */

.clip-text_bga {
background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Tiles/small_steps.png);
}

.clip-text_bgb {
background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Tiles/skulls.png);
}

.clip-text_bgc {
background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Own%20Designs/hannahsuarezart6.jpg);
}

.clip-text_bgd {
background-image: url(https://storage.googleapis.com/risemedialibrary-960b72df-9af7-476b-8a47-b67ded4c779d/Own%20Designs/hannahsuarezart2.jpg);
}

</style>
</head>
<body>
<div class="wrapper">
<p class="clip-text clip-text_bga">A</p>
<p class="clip-text clip-text_bgb">B</p>
<p class="clip-text clip-text_bgc">C</p>
<p class="clip-text clip-text_bgd">D</p>
</div>
</body>
</html>


Make sure to also resize the Placeholder so that it fills up the whole screen. You can do this in the Properties tab where I have changed the width to 1024px and the height to 1080px.

The example code from above produces the screenshot below:



To change the image links go to the section under /* This is where you change the backgrounds */ and add in your own image background links.

Remember that in the <style></style> tags, .clip-text_bga, .clip-text_bgb, .clip-text_bgc, .clip-text_bgd corresponds to the <p class="clip-text clip-text_bga">, <p class="clip-text clip-text_bgb">, <p class="clip-text clip-text_bgc">, <p class="clip-text clip-text_bgd">.

You can also do further tweaks to the <style></style> tags such as changinig the font-size, alignment and other font properties. To change the font family, replace @import url(https://fonts.googleapis.com/css?family=Lobster:400);
with another font name of your choosing. In this case, I used a font called Lobster. To use your own, replace it with another font from the Google Fonts database. Make sure to also replace the font-family name in .clip-text so that the text itself also changes to the correct font.

Have fun! If you have any further ideas or suggestions on making interesting headers with code feel free to reply below.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I was playing with maps and CSS yesterday: http://preview.risevision.com/?type=presentation&id=1e786c76-8a82-4ba2-99d2-4acb804662ac

have a couple of ideas for this concept :)
(Edited)
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
That is very cool!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Should have explained that too. Very easy. Make a full screen placeholder. Switch to HTML view > assign class to it for example 'box' (class="box") > add style:
<style type="text/css">
.box {
transform: perspective(1000px) rotateX(60deg);
}
 </style>

And that is it! Now anything in that placeholder (map for example) will have this pseudo-perspective effect applied to it.

You can also experiment with the depth and angle, but those posted above worked for me the best. Depends on a layout, but you might want to make the placeholder wider than the screen. In my case I think I used 3000X1080 and offset it by -540px from the left side.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks for adding!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
This is great Darius! Now I have to make sure I don't waste my morning looking around the world :)