CODEWITHSUNDEEP
css
Mark
Mark

Reputation: 5078

creating a border with box-shadow

I'm trying to use box shadow to create a border around 2 html elements. I cannot user box-shadow on the button element as the performance in Android is very poor, it needs to be on each inner element. I also cannot user border proterty as again the performance is poor on some android devices. As you can see on the jsfiddle, the left and right "borders" are thicker than the top and bottom.

The solution below uses box shadow on the top, left and bottom of the em element and on the top, right and bottom of span element.

How do I make the "border" look even?

<button class="button">
    <em></em>
   <span class="hidden" style="display: inline;">698</span>
</button>


.button {
    background: #00bdf2;
    border-color: white;
    border-width: 0.1rem;
    border-style: solid;
    float: right;
    height: 3rem;
    margin-right: 2.4rem;
    margin-top: 0.9rem;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 101;
    border: 0;
    }

    input, button {
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    }


    .button em {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    display: inline-block;
    float: left;
    height: 100%;
    padding: 0 1rem;
    width: 1.5rem;
    -webkit-box-shadow: inset .1rem 0 0 .1rem #000;
    -moz-box-shadow: inset 0 0 .2rem #000;
    box-shadow: inset .1rem 0 0 .1rem #000;
    }

    .button > span {
    background: #ffcd00;
    color: #444444;
    float: right;
    height: 100%;
    font-family: Arial;
    font-size: 1.4rem;
    line-height: 3rem;
    padding: 0 1rem;
    text-align: center;
    -webkit-box-shadow: inset .1rem 0 0 .1rem #000;
    -moz-box-shadow: inset 0 0 .2rem #000;
    box-shadow: inset -.1rem 0 0 .1rem #000;
    }

Upvotes: 1

Views: 2050

Answers (1)

sdmix
sdmix

Reputation: 11

By moving the h-shadow to .1rem and -.1rem you are pushing the shadow left (or right) by that value, so by design, this will reveal more of the shadow on that sides.

Removing the value and having it as 0 will fix this, but will also show the shadow of the side you are trying to hide it from so this will not create the effect you are after.

Upvotes: 1

Related Questions