Creating 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.
Steps to creating glossy headers:
1. Paste the following CSS style into your DataPage header
Using the Insert button at the lower right of the DataPage elements panel, insert Header and 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 >
2. 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:
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.
