2

このフィドルを見てください：http://jsfiddle.net/SkjHs/4/

<html>
<ul class="langBar">
  <li><a href="?lang=az&amp;page=main"> <img src="http://goo.gl/aIxpv"> </a></li>
  <li><a href="?lang=en&amp;page=main"> <img src="http://goo.gl/wIQob"> </a></li>
  <li><a href="?lang=ru&amp;page=main"> <img class="activeLang" src="http://goo.gl/If4lA"> </a></li>
</ul>
</html>

html {
background-color:#000;}
.langBar{
    display: block;
    overflow: hidden;
    float: left;
    width: 125px;
}

.langBar li{
    display: block;
    width: 32px;
    height: 40px;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.activeLang{
    -moz-border-radius: 20px;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    border: 2px solid #482663;
}

.langBar li a{
    display: block;
    height: 100%;
    width: 100%;
}

activeLangクラスのイメージの周りに素敵なグロー効果を実現しようとしています。最初の問題は、境界線と画像自体の間にパディングが発生していることです。2番目はグロー効果を得ることができません。助言がありますか？

4

4 に答える 4

2

まず、画像のパディングは、画像キャンバスMy Fiddleによるものです

キャンバスをトリミングした画像

ここに画像の説明を入力

以下のCSSを追加し.activeLangて、画像にグローのような効果を加えます...（もちろん、選択に応じて色を変更できます）

box-shadow: 0 0 3px 3px #888;

そしてから削除.activeLang

 width: 32px;
 height: 32px;
于 2012-10-15T16:02:31.993 に答える
1

このようなグロー効果は、次の方法で実現できますbox-shadow。

/* pink glow effect */
box-shadow: 0 0 5px 5px #f3a;

グロー効果の例については、http://jsfiddle.net/SkjHs/8/を参照してください。

または（私が設定するように）img-tagsを使用しないソリューション：

<ul class="langBar">
    <li><a href="?lang=az&amp;page=main" class="icon icon-az">[AZ]</a></li>
    <li><a href="?lang=en&amp;page=main" class="icon icon-en">[EN]</a></li>
    <li><a href="?lang=ru&amp;page=main" class="icon icon-ru active">[RU]</a></li>
</ul>


.langBar {
    overflow: hidden;
}

.langBar li{
    display: block;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 5px 0;
    overflow: hidden;
    text-indent: 110%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

}

.icon:focus, .icon:active, .icon:hover,
.icon.active {
    -webkit-box-shadow: 0 0 5px 5px #f3a;
    -moz-box-shadow: 0 0 5px 5px #f3a;
    box-shadow: 0 0 5px 5px #f3a;
}

/* one may use a sprite and only set the background position here */
.icon-az {
    background-image: url(http://goo.gl/aIxpv);
}
.icon-en {
    background-image: url(http://goo.gl/wIQob);
}
.icon-ru {
    background-image: url(http://goo.gl/If4lA);
}

http://jsfiddle.net/SkjHs/10/

于 2012-10-15T16:02:00.477 に答える
0

border-radius を使用しても、境界線は要素内に入りません。各画像ファイルの端にある数ピクセルにより、境界線が画像のコンテンツの外側に強制されます。

画像

画像を編集してスペースを削除するか、ロールオーバーに必要なすべての効果を追加することをお勧めします.

于 2012-10-15T16:03:12.727 に答える
0

問題の作業を短縮するスプライトの例として:

<ul class="langBar">
    <li><a id="az" href="?lang=az&amp;page=main"></a></li>
    <li><a id="en" href="?lang=en&amp;page=main"></a></li>
    <li><a id="ru" href="?lang=ru&amp;page=main" class="activeLang"></a></li>
</ul>

html {
background-color:#000;}
.langBar{
    display: block;
    overflow: hidden;
    float: left;
    width: 125px;
}

.langBar li {
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.langBar li a {
    background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
    display:block;
    width:32px;
    height:32px;
}

.langBar li a#az {
    background-position:0 0;
}

.langBar li a#en {
    background-position:0 -32px;
}

.langBar li a#ru {
    background-position:0 -64px;
}

.langBar li a.activeLang, 
.langBar li a#az.activeLang, 
.langBar li a#en.activeLang, 
.langBar li a#ru.activeLang {
    background-position-x: -46px;
}

これは少し長いと思ったので、これを jsFiddle に入れました: http://jsfiddle.net/mori57/n3Q74/

お役に立てれば！

于 2012-10-15T16:24:14.607 に答える