Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Sliding door technique with semi transparent backgrounds?

Sliding door technique with semi transparent backgrounds?

Problem

I'm working on a button with a glossy appearance. The button can have various colors and sizes. This is what i have done so far:

.btn-zen-inverse, .btn-zen-inverse:hover{
    color: white;
    background: 
    url("../img/btn_right.png") no-repeat right 0,
    url("../img/btn_left.png") no-repeat  left 0,
    url("../img/btn_center.png") repeat-x 42px 0;
  background-color: #273032;
  background-size: contain; 
  line-height: 50px;
  margin: 12px 18px 3px 0;
  padding: 0;
  border: 2px solid white !important;
}

The images referenced are alpha transparent. The idea is to set the color based on the Background-color attribute. The image has a few other properties aswell, but those are merely estetic.

This ofcorse renders an image that looks like this! I would like the center-image to be visible only in the central part of the image. As you can see from my css. This only has to work perectly in the latest version of the big 4 browsers.

This is what I would like it to look like:

One suggesion is to do this with background-gradients. If that is possible, I need to define the background position similairly to the way padding/margin works. Is that possible?

The design contains: 2 borders: one white one gradiented, A background gradient. and a 1px thick vertical gradient at the very top.

Problem courtesy of: Himmators

Solution

This is as closer as i can get with CSS only.

Note that multiple backgrounds are not supported by IE8. Neither is the following code, but at least you don't need images.

Live demo

HTML:

Prova Zenconomy Gratis

CSS:

.button {
    display:inline-block;
    border:2px solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    line-height:40px;
    text-decoration:none;
    font-family:Helvetica,Arial,sans-serif;
    -webkit-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
    -moz-box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
    box-shadow: 0 0 4px 1px rgba(204, 204, 204, 0.7);
}
.button > span {
    padding:0 40px;
    display:block;
    border:3px solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.button.dark {
    border-color:#FFF;
    color:#FFF;
    background:#030303;
}
.button.dark > span {
    border-color:#000;
    -webkit-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    box-shadow: inset 0 3px 5px -1px rgba(255,255,255,0.3);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
}

There are 2 classes (.button for the layout and .dark for colors and gradient) so that you can have different types of buttons in your page.

Solution courtesy of: Giona

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Sliding door technique with semi transparent backgrounds?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×