Home/ Questions/Q 3357168
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T02:36:04+00:00

I’d like to create a simple visual effect for display of rows of data

  • 0

I’d like to create a simple visual effect for display of rows of data on iPhone/Android/etc, as seen in this example.

The effect is very simple; it’s two rectangles on top of each other, the top one lighter than the bottom one and with a lighter-yet border-top. This does it:

<style>
.rowtop { background-color: #333; border-top: 1px solid #ccc; height: 25px; }
.rowbottom { background-color: #000; height: 25px; }
</style>

<div class="row">
 <div class="rowtop">&nbsp;</div>
 <div class="rowbottom">&nbsp;</div>
</div>

Now I’d like to be able to place text and labels on top of this, again as seen in the example. That’s where I need help.

I’d like to place the text relative to “row”, but row is actually made up of two divs, so it’s complicated. The text has to live on top of the “rowtop” and “rowbottom” divs.

I tried messing around with a third div for the labels and setting its z-index but couldn’t get it to do what I wanted.

I think I can use a background image instead of rowtop and rowbottom and make it easy on myself, but I was wondering if anyone has a clever non-image based solution.

[Update] Based on edeverett’s answer I tried css gradients and they worked great:

background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0)));
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are just targeting mobile browsers you should be able to get that effect using CSS gradients instead of a background image.

    As a side note, I think you shouldn’t be making this effect by adding extra divs. You should try to keep content and presentation separate in case you (or your users) decide to present it differently in the future. So if CSS gradients don’t work for you I’d recommend the background image approach (look at using data-URIs if you want to do something ‘fun’ and to reduce HTTP requests).

    • 0