Aak*_*thy 10 html css effects insets web
许多最新网站的"插入"效果给我留下了非常深刻的印象.一些例子是 alt文本http://img687.imageshack.us/img687/457/inset2.png
和
替代文字http://img163.imageshack.us/img163/8158/inset1.png
在中心的线.如今,许多网站都使用这些线条/效果.
我尝试用边框实现相同但颜色组合不起作用,这是不正确的.
其他网站是否使用图像？这很容易吗？
任何一个例子css？
示例站点:http://woothemes.com,http: //net.tutsplus.com/,http://www.w3schools.com(在标题中)和wordpress管理页面侧栏
edl*_*edl 17
不知道这是否会帮助,但使用1间像素的边界是比2种相邻元素的背景稍明亮和灰暗可以效仿这一点.例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
编辑:
作为一个侧面说明,切换光明与黑暗在上面的例子会给你一个略微凸起/浮雕边框效果.
| 归档时间： |
|
| 查看次数： |
23703 次 |
| 最近记录： |