3d кнопки в IE8 - PullRequest
Новая
       25

3d кнопки в IE8

0 голосов
/ 12 октября 2011

Я использую css3pie, чтобы IE8 и IE7 распознавали больше объявлений css.Это позволяет мне легче использовать фоновые градиенты и тому подобное на моем сайте.Однако я обнаружил, что css3pie не поддерживает стиль box-shadow для врезных теней.Это проблема, поскольку я использую тени блока, чтобы кнопки и элементы интерфейса на моем сайте выглядели трехмерными, например: 

a {
    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     

}
a:hover {
        box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
        -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);     
}

Вот jsfiddle строки поиска изсайт в действии.Я не включил все CSS, но важная вещь в фоновом режиме + граница панели поиска и фон + границы + эффекты наведения на кнопку поиска.

Вот HTML + CSS: 

<div class="searchbar">
    <span class="searchFor" id="searchFor">search for</span>
    <input id="txtSearch" type="text"/>
    <span class="btn">
        <a href="javascript:void(0)" id="lnkSearch" onclick="javascript:searchClick()">search</a>
    </span>
</div>

.searchbar {
    padding:.75em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;    

    background-color: #ffd07d; /* fallback color if gradients are not supported */
    background-image: -webkit-gradient(linear, left top, left bottom, #ffd07d, to(#ffa300));
    background-image: -webkit-linear-gradient(top, #ffd07d, #ffa300);
    background-image:    -moz-linear-gradient(top, #ffd07d, #ffa300);
    background-image:     -ms-linear-gradient(top, #ffd07d, #ffa300);
    background-image:      -o-linear-gradient(top, #ffd07d, #ffa300);
    -pie-background: linear-gradient(#ffd07d, #ffa300);
    background-image:         linear-gradient(top, #ffd07d, #ffa300);

    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
    border: {
        style:solid;
        width:1px;
        color: rgba(255,165,6,0.63);
    }

    behavior: url(PIE.htc); // ie hack: see http://css3pie.com
}

.btn {
    margin-left:1em;
    display:inline-block;
    vertical-align:middle;
    font-size:130%;
    margin-right:0.5em;     
}
.btn a {
    padding: 0.2em 0.8em 0.2em 0.8em;    
    color: #ffffff;

    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    background-color: #969696;
    background-image: -webkit-gradient(linear, left top, left bottom, #969696, to(#080808));
    background-image: -webkit-linear-gradient(top, #969696, #080808);
    background-image: -moz-linear-gradient(top, #969696, #080808);
    background-image: -ms-linear-gradient(top, #969696, #080808);
    background-image: -o-linear-gradient(top, #969696, #080808);
    -pie-background: linear-gradient(#969696, #080808);
    background-image: linear-gradient(top, #969696, #080808);
    behavior: url(PIE.htc);

    box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

.btn a:hover {
     box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
    -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);    
}

Мне нужно как-то заменить синтаксис box-shadow чем-то другим.Что я должен использовать?Я довольно новичок в css + веб-разработке, поэтому я не знаю, какие варианты у меня есть.В качестве альтернативы, есть ли другой подход, который я должен использовать для решения всей проблемы?

1 Ответ

1 голос
/ 12 октября 2011

CSS3 Pie является своего рода глючным. Попробуйте добавить позицию: относительный; и посмотрите, что это делает. Box-shadow должен поддерживаться в PIE.

Кроме того, вы используете CSS-фреймворк? В противном случае ваш CSS недействителен, так как вы не можете вкладывать стили так, как вы это делаете. Просто используйте стенографию: 

border:solid 1px rgba(255,165,6,.63);

Вероятно, вы также можете отказаться от первого градиента -webkit, так как он используется только в старых браузерах Webkit, которые быстро сокращаются.

...