categories:
- css
tags:
- ::before && ::after
- border-image
- box-shadow
有兴趣的可以去我的个人主页看看哦:psychola的博客
啦啦啦 psychola搬运工来啦,大家相信下图中大圆圆只用一个div就可以做到吗?
钉子 [“原文例子地址”](http://blog.dimpurr.com/one-div-css3-cd/)
答案肯定如你们所料是:可以的。
我和大家一样,一开始都觉得很不可思议,但如果你们参悟了css3的灵活性,说不定以后也能发现一些新奇的东东。然后这个例子是我从一个现在读高中的菊苣钉子(dimpurr)博客看到的,原文例子在14年1月写的把 很早看到的啦,个人很喜欢也很佩服他的奇思妙想和一些ui 设计。图为他个人简介页面的部分截图,而他的blog “钉子の次元”大家可以去逛逛,github上有他设计的wordpress博客主题下载哦~~(我没在打广告= =
废话不说 开始解读一下怎么实现的把
一般人一个div可以很简单地写成下面这样(用下border && box-shadow就可以了)
但钉子这么巨大的光盘一样的东东是怎么做到的呢?
其实就像玩乐高玩具一样,由以下几个积木拼成的:
- ::before && ::after
- border-image
- border
- box-shadow
在说积木之前先提两个下几个自己不怎么常用但钉子例子里用到的css属性:
- white-space (设置如何处理元素内的空白)
- word-wrap (是否允许长单词或 URL 地址换行到下一行)
钉子的具体使用如下图:
科普结束,同时,如上图所示用到了伪元素::before和::after,其中::before代码如下。
div::before {
content: "Bakemonogatari";
width: 500px;
position: absolute;
top: -110px;
left: 50%;
margin-left: -250px;
color: #FFF;
text-align: center;
font-size: 50px;
font-weight: bold;
font-family: "Times New Roman", serif;
text-shadow: 0 0 40px #000, 0 -1px 0 #F3F3F3, 0 -2px 0 #F3F3F3;
}
同理,那段文字”DimWorks CopyRight © TwentyThirteen\AOriginal Sound Track\AProundly Based on Html5 & Css 3”是通过伪元素::after实现的。
光盘的四个小正方形钉子是用border-image实现的, linear-gradient描绘border背景。钉子说“四个小点是利用了 border-image 在 Webkit 下诡异的默认渲染和 linear-gradient 的错误打开方式模拟,在别的内核下貌似没有效果。“
效果和代码请见下文
border-image: -webkit-linear-gradient( rgba(255, 255, 255, 0.3) , rgba(255, 255, 255, 0.3) );
//表示四个角每个角的颜色从上至下颜色由rgba(255, 255, 255, 0.3) 像rgba(255, 255, 255, 0.3)渐变。
再举个border-image栗子
.a{
width: 200px;
margin: 0 auto;
height: 200px;
border-width: 3px;
border-style: solid;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#fff)) 1 100%;
-webkit-border-image: -webkit-linear-gradient(#000, #fff) 1 100%;
-moz-border-image:-moz-linear-gradient(#000, #fff) 1 100%;
-o-border-image:-o-linear-gradient(#000, #fff) 1 100%;
border-image:linear-gradient(to bottom, #000, #fff) 1 100%;
}
表示透明度由上向下从黑色到呈线性变化
其实border-image和background-image渐变相似:background-image:-webkit-gradient(type, x1 y1, x2 y2, from(开始颜色值), to(结束颜色值), [color-stop(偏移量小数, 停靠颜色值), …] );
计算时border包含在宽度里哦
box-shadow
p.s. 计算时不包含在宽度里哦
参数有水平位移 竖直位移 模糊 扩散 颜色 内外嵌(外为默认)
钉子水平无位移 有4个外嵌 2个内嵌。
box-shadow: 0 0 0 4px rgba(247, 247, 247, 0.53) , 0 0 0 200pxrgba(177, 30, 30, 0.81), 0 0 0 204px rgba(247, 247, 247, 0.67), 0 0 10px 204px rgba(0, 0, 0, 0.64), 0 0 0 60px rgba(27, 27, 27, 0.79)inset, 0 0 10px 60px rgba(0, 0, 0, 0.73) inset;
下图中数字表示第几个box-shadow
psychola搬运工完工领盒饭去啦,有问题可以指出,333333q~~