CODEWITHSUNDEEP
htmlcss
Ben Carey
Ben Carey

Reputation: 16968

Box with Fading Out Edge/Border

I am trying to create a box that has a 'highlight' down the sides of it, and at the top.

The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...

I have tried a lot of things, not sure if they will help but here is my most recent:

/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}

Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!

Here is the current HTML (probably needs to be restructured):

<div id="dd_foo" class="dd">
    <nav>
        <a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
    </nav>
</div>

Here is a possible restructure (something like):

<div id="dd_foo" class="dd">
    <div class="handle"><!-- Dropdown Handle --></div>
    <nav>
        <a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
    </nav>
</div>

This is what I need the box to look like (notice the faint white border at the top and half way down the sides):

I have also included the box split into its separate elements (handle and background)

Dropdown box

I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?

Upvotes: 3

Views: 1016

Answers (1)

hitautodestruct
hitautodestruct

Reputation: 20830

Simplest approach

You can try achieving this using a simple box shadow:

.plaque {
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);

    /*...*/
}

An Example

Here's an example using 1 class and a div on jsbin.

Copy paste code

This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.

.plaque:after {
  top: -9px;
  content: " ";
  height: 11px;
  width: 30px;
  position: absolute;
  pointer-events: none;
  left: 50%;
  margin-left: -15px;
  display: block;
  background-repeat: no-repeat;
}


.plaque {
  width: 250px;
  height: 100px;
  display: block;
  border: 0;
  outline: 0;
  padding: 12px 16px;
  line-height: 1.4;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: sans-serif;
  color: white;
  font-size: 1.2em;
  text-overflow: ellipsis;
  position: relative;
  top: 6px;
}

/* Use whatever background you want */
.plaque { background-color: green; }

.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }

Upvotes: 2

Related Questions