Glossy Heading Text

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 Bridge parameters to provide an experience that is both polished and personalized.

Note: This technique will only work on white backgrounds.

glossy-heading-text

Steps to creating glossy headers:

  1. Navigate to the DataPages listing, select an existing DataPage you wish to add the text header, and click Edit.
  2. Proceed to the Configure Fields screen.
  3. Using the Insert button at the lower right of the DataPage elements panel, insert Header & Footer sections. Paste the following CSS style into the Header block.
<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("http://www.caspio.com/images/techtip/gradient_1.png") repeat-x;
}

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

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:

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

Your title will then appear as follows:
glossy-test-heading

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's 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.