Glossy Heading Text

2 minutes to read

This article shows a simple CSS technique to create glossy, web 2.0 style header text. The advantage of using this technique over pure images is that the header is actually dynamic text and can be combined with Caspio parameters to provide an experience that is both polished and personalized.

Note: This technique will only work on white backgrounds.

Steps to creating glossy headers:

Navigate to the DataPages listing, select an existing DataPage you wish to add the text header, and click Edit.
Proceed to the Configure Fields screen.
Using the Insert button at the lower right of the DataPage elements panel, insert Header & Footer sections. Disable the HTML editor in the Advanced tab and then paste the following CSS style in the Source of the Header.

Create a header and include an empty div tag

Next, create a header and include an empty div tag. The CSS code above will add a semi-transparent glossy image whenever it finds an empty div tag in an H1 element. For example:

Test Heading

Your title will then appear as follows:

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

code1

<style>

h1 {
font-size:200%;
color:#00659e;
position:relative;
}

h1 div{
position:absolute;
display:block;
top:0;

left:0;

height:55%;
width:100%;
padding-right:10px;
background:url("https://www.caspio.com/images/techtip/gradient_1.png") repeat-x;
}

* html h1 div{
background-color:transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.caspio.com/images/techtip/gradient_1.png", sizingMethod="scale");
</style >

code2

<h1>Test Heading<div></div></h1>