Фон кнопки не совпадает с тенью в вертикальном меню - PullRequest
Новая
       24

Фон кнопки не совпадает с тенью в вертикальном меню

0 голосов
/ 17 марта 2019

Я делаю проект, чтобы увидеть, насколько хорошо старейшины справляются с плоским скевоморфным дизайном.Для этого я хочу сделать меню 3D и реалистичным.Я нашел готовую кнопку, которая соответствует моей цели, но когда я пытаюсь сделать ее вертикальной, тень заполняет весь родительский элемент, а фон - нет .. Это код, который я использую для горизонтальной кнопки: http://jsfiddle.net/ahu8n91o/

HTML: 

<a class="button">
    <span>TEXT FOR BUTTON</span>
</a>
<a class="button">
    <span>BUTTON 2</span>
</a>
<a class="button">
    <span>ANOTHER BUTTON</span>
</a>
<a class="button">
    <span>LAST BUTTON</span>
</a>

CSS: 

.button {
    display: inline-block;
    margin: 5px;

    width: auto;

    -webkit-border-radius: 10px;

    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;

    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),

        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),

        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0)));        

        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 4px 4px;

    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;

    display: inline-block;
    padding: 10px 20px;

    color: #3A474D;
    font-weight: 700;
    font-size: 1.2em;

    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
    color: #AEBF3B;
    text-shadow: 0px -1px #97A63A;
    cursor: pointer;
}
.button:hover span{
    -webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
    -webkit-transform: translate(0, 5px); /* depth of button press */
}

Но когда я пытаюсь сделать его вертикальным, он запутывается так: http://jsfiddle.net/ahu8n91o/1/

HTML: 

<link  href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >

<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >

<div class="container">

    <a class="button">
        <span>TEXT FOR BUTTON</span>
    </a>
    <a class="button">
        <span>BUTTON 2</span>
    </a>
    <a class="button">
        <span>ANOTHER BUTTON</span>
    </a>
    <a class="button">
        <span>LAST BUTTON</span>
    </a>

</div>

CSS: 

.container {
    float: left;
    height: 100%;
    margin-right: 30px;
}
.button {
    display: block;
    margin: 5px;

    width: auto;

    -webkit-border-radius: 10px;

    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;

    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),

        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),

        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0)));        

        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */

    -webkit-background-size: 100%, 100%, 100%, 4px 4px;

    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;

    display: inline-block;
    padding: 10px 20px;

    color: #3A474D;
    font-weight: 700;
    font-size: 1.2em;

    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}

.button span:hover {
    color: #AEBF3B;
    text-shadow: 0px -1px #97A63A;
    cursor: pointer;
}
.button:hover span{
    -webkit-transform: translate(0, 1px); /* depth of button press */
}
.button:active {
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1),
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span{
    -webkit-transform: translate(0, 5px); /* depth of button press */
}

Я не вижу, в чем проблема и почему элементы to не действуют одинаково .. Может быть, яЯ просто устал видеть очевидное, но я был бы очень признателен за помощь!

1 Ответ

0 голосов
/ 17 марта 2019

Вы можете изменить диапазон кнопок со встроенного блока на: button span {display: block}. Тогда он заполнит поверхность, но все кнопки будут одинаковой ширины. Если вам нужна переменная ширина, измените кнопку на button {display: inline-block} и добавьте вместо нее div для каждой кнопки.

Возможно, вам также понадобится еще немного отступа для полей.

PS: этот код немного сложный и не семантический. У вас не было бы этой проблемы, если бы стиль был применен к одному <button></button>.

...