0
这里是我的按钮设计(不同的背景,例如,缩放〜1500%和实际尺寸)。我怎样才能做到这一点与单个元素和一些css3,或最小的额外元素? css大师,任何人?我可以用css3和html5吗? (渐变背景,边框渐变,透明度)
http://ompldr.org/vZjBudQ/button.png
这里是我的按钮设计(不同的背景,例如,缩放〜1500%和实际尺寸)。我怎样才能做到这一点与单个元素和一些css3,或最小的额外元素? css大师,任何人?我可以用css3和html5吗? (渐变背景,边框渐变,透明度)
http://ompldr.org/vZjBudQ/button.png
HTML
<a href="#" class="button"></a>
CSS
.button {
position: relative;
z-index: 1;
display: block;
width: 22px;
height: 22px;
background: -webkit-linear-gradient(#f5f0ee, #e7ddd7);
background: -ms-linear-gradient(#f5f0ee, #e7ddd7);
background: -moz-linear-gradient(#f5f0ee, #e7ddd7);
background: linear-gradient(#f5f0ee, #e7ddd7);
border: 1px solid #c0b9b3;
border-radius: 3px;
box-shadow: inset 0px 1px #fcfbfb, 0px 1px rgba(0, 0, 0, 0.3);
}
.button:before {
content: "";
position: absolute;
left: -4px;
top: -4px;
z-index: -1;
padding: 4px;
width: 22px;
height: 22px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background: linear-gradient(#f5f0ee, #e7ddd7);
border-radius: 3px;
box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}
我认为唯一不能得到的是渐变边界。
非常感谢,它很酷!我认为我可以使用:之前/之后模拟内部跨度和modernizr后备与实际跨度为旧版浏览器,嗯? – user1581655 2012-08-07 14:34:05
nope,它与href文本重叠... – user1581655 2012-08-07 14:58:33
是的,我讨厌自己额外的标签,但我无法摆脱它。我会继续尝试。 – depa 2012-08-07 15:12:03