How to create interesting headers using custom styles

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

In this article, let’s take a look at how you can get started with making interesting headers using the HTML Widget in your digital signage Presentation.

Create a new Presentation at https://apps.risevision.com/editor. I've decided to add a light grey background (rgba(173,173,173,1)) as this makes the colors stand out for these examples.



Create a new Placeholder and add the HTML Widget.


Below is the code to put into the HTML Widget to achieve the above header.

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
h1.first span{
position: relative;
font-weight: 400;
}

h1.first span:before {
content: '';
display: block;
position: absolute;
top: calc(50% + 2px); left: -10px;
width: calc(100% + 20px);
height: 25%;
transform: translateY(-50%);

z-index: -1;
background-color: lightblue;
}

</style>
</head>
<body>
<h1 class="first"><span>Header with a thick light blue strikethrough</span></h1>
</body>
</html>



Below is the code to put into the HTML Widget to achieve the above header.

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
h1.second {
font-weight: 200;
}

h1.second span {
position: relative;
display: inline-block;
padding: 5px 10px ;
border-radius: 10px;
border-bottom: 4px solid gold;
}

h1.second span:after {
content: '';
position: absolute;
bottom: calc(-100% - 1px);
margin-left: -10px;
display: block;
width: 100%; height: 100%;
border-radius: 10px;
border-top: 3px solid lightcoral;
}

</style>
</head>
<body>
<h1 class="second"><span>Header with a light coral<br>and gold underline</span></h1>
</body>
</html>



Below is the code to put into the HTML Widget to achieve the above header.

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
h1.third span {
display: inline;
background-image:
linear-gradient(to right, orchid, salmon, mistyrose);
background-size: 100% 15%;
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<h1 class="third"><span>Header with an underline gradient from<br>orchid to rose</span></h1>
</body>
</html>



Below is the code to put into the HTML Widget to achieve the above header.


<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
h1.five span {
display: inline;
background-image:
linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-size: 100% 15%;
background-repeat: no-repeat;
background-position: center bottom;
}

</style>
</head>
<body>
<h1 class="five"><span>Header with a rainbow<br>gradient underline</span></h1>
</body>
</html>



Below is the code to put into the HTML Widget to achieve the above header.

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title></title>
<style>
h1.fifth {
font-weight: 400;
text-shadow:
3px 4px 0
darkorange;
transition: all 0.2s ease;
}

</style>
</head>
<body>
<h1 class="fifth">Header with a<br>dark orange shadow</h1>
</body>
</html>



Below is the code to put into the HTML Widget to achieve the above header.
If you want to add interesting external fonts to these examples, you can add the following in the <style></style> tags above the header styles like below:

@import url(https://fonts.googleapis.com/css?family=Chewy:400,700,900,300);
body {
color: black;
font-size: 16px;
font-family: 'Chewy';
}


To select a font, go to Google Fonts and select the font name and replace with your font choice. In this example, I am using the font called Chewy and combined the new font with the an aquamarine shadow using a similar code to the dark orange shadow example before this.

That's all folks!
If you have further ideas for custom headers using code, feel free to share here!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
  • Amused

Posted 3 years ago

  • 1

There are no replies.