圆角PNG图像边缘发光效果

请看看这个小提琴：http://jsfiddle.net/SkjHs/4/圆角PNG图像边缘发光效果

<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一流形象。第一个问题是，我正在边框和图像之间填充。其次无法获得发光效果。有什么建议么？

来源

2012-10-15 heron

图像周围没有填充物 - 但图像内有一个透明区域。您必须重新制作这些图像才能摆脱未使用的透明区域。 – feeela

@feeela我们可以使用插入阴影的东西 – heron

如果使用'inset'阴影，外线不会褪色到背景，但是是一个清晰的边框，而圆的内部部分淡出（但隐藏在图像后面）。 – feeela

这样的发光效果可以通过box-shadow实现：

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

用于与发光效果的例子参见http://jsfiddle.net/SkjHs/8/。

或（我会设置它）的解决方案，而无需使用img标签都有效：

<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-15 16:02:00 feeela

图像的所有填充首先是因为图片画布My Fiddle

图像与画布裁剪

enter image description here

下面的CSS添加到.activeLang像效果，你的形象辉光...（Ofcourse，你可以改变颜色根据您的选择）

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

而且从.activeLang

width: 32px; 
height: 32px;

来源

2012-10-15 16:02:31

请将您的代码添加到帖子中。 –

那么-1呢？ –

我在编辑我的答案 –

即使删除使用边框半径，边框不会进入元素内部。每个图像文件边缘的几个像素强制图像内容之外的边框。

我建议编辑图像去除间隔，甚至可以添加所有你想要对侧翻的影响。

来源

2012-10-15 16:03:12 KatieK

拼合为使问题更短的工作的一个例子：

<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-15 16:24:14

同样的技术也可以扩展到使用hover规范进行鼠标悬停，但这至少会得到你所说的效果而没有尝试使用边界半径进行猜测（并处理其旧版IE的不兼容性）。 –

圆角PNG图像边缘发光效果

回答

相关问题