Glossy Effect using only CSS (that means no images!)

programming web dev
1

we’ve all seen it - most of us have used it…

the glossy effect.

here’s an easy way to add a glossy effect to your page banner using only CSS. (if someone has already done this, mods, just delete this post)

say you have a CSS file, with a banner div called

div#banner

. within that div you can place your page banner information, i.e. “my bomb-***** site”. in your CSS file, add to it another div with the following information:

div#highlight {
background-color: white;
height: 40px;
width: 100%;
z-index: 100;
opacity: .3;
position: absolute;
color: white;
}

place this within your body or container div tag BEFORE your banner div. the height is an arbitrary value, depending on the size of your banner. the z-index will place the div ‘above’ the banner being displayed (it’s at 100 to make sure of it). of course, you may need to add “alpha” and “moz-opacity” values to your highlight div as well.

the color for the text is the same as the background so - in case certain browsers have issues - you can place a “.” within that

<div id=highlight">.</div>

section like so.

example code for you to use:


<body>
<div id="container">
  <div id="highlight">.</div>
  <div id="banner">
    <h2>Johnson & Peterson & Assoc.</h2>
    Serving you since 1977
  </div>
</div>
</body>

CSS:


div#container {
border: 1px solid navy;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}

div#banner {
color: black;
text-align: center;
border-bottom: 1px dotted navy;
background-color: #cfffc4;
}

you may need to tweak some - but the proof of concept is there. it worked for me. hopefully it will work for you as well as it is for me.