英文原文
http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/
本文最先发表在我的个人网站:http://jcodecraeer.com/a/cssjiqiaoyuguifan/2012/0628/289.html
这篇文章中我们将介绍如何制做paper左上角的卷角效果。
我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现。
我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形容器以外,我们还需要两个三角形,如下图所示:
当我们得到两个三角形并定位好之后,改变上面的三角形的颜色,使之和整个背景色一样。你会发现我们已经制作出了折叠的效果了。
html代码
首先创建一个如下的div,包含一个标题,和一段文字内容。div有两个class,一个(page)是设定一般的page效果,另外一个(foldtl)设定纸张的卷角效果,foldtl的tl代表top left,另外我们还在最后top right的折叠效果。
1
2
3
4
5
|
<div class=
"page foldtl"
>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
|
css部分
css部分,我先做好一张没有卷角效果的普通纸:设置背景色为醒目舒服的黑色,然后设置纸张的宽度和高度,并填充白色背景。还可以给纸的背景添加
一个微妙的渐变效果,你也可以不这么做,因为css里面实现这个要用到不是很标准的代码,以适应不同的浏览器。如果你认为这样是不值得的,忽略之。下面是
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
body {
background:
#272822;
}
.page {
background:
#fff;
width: 250px;
height: 330px;
margin: 50px;
background: -moz-linear-gradient(top,
#ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+
*/
background: -webkit-linear-gradient(top,
#ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,
#ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,
#ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(top,
#ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#ffffff'
, endColorstr=
'#e5e5e5'
,GradientType=0
);
}
|
现在我们得到了纸的轮廓效果了,该来美化一下我们的字体了。h2标签设置为较大的黑色字体Lilita One
,并且远离上边界,给左上角的折叠效果留下一定空间。段落里面的字体:设置一定的padding,颜色为灰色,并且和标题相隔一段合适的距离。
1
2
3
4
5
6
7
8
9
10
|
.page h2 {
padding: 85px 0 0 20px;
font: 400 35px/1.5
'Lilita One'
, Helvetica, sans-serif;
}
.page p {
padding: 10px 20px;
font: 12px/1.5 Helvetica, sans-serif;
color:
#4b4b4b;
}
|
如果没出什么情况上面的代码应该会显示出下面的效果,不是那么耐看,但是为我们后面打下了一个基础。
css三角形部分:
在继续开工之前,我们需要学会如何用css制作三角形。
创建一个class为“triangle”的空div
宽度和高度设置为0
给下边框和左边框一个很厚的宽度,但是要是不同的颜色
效果和css代码如下图:
就如你看到的,矩形被对角线分割成了两个颜色不同的三角形。假如我们让其中的一个边框变成透明会出现什么情况呢?
这样我们就能得到一个三角形了,而且还可以换一个border设置成透明,那样就能得到一个指向不同的三角形。
至于是上边界 下边界 左边界 右边界你自己试试就知道了。
将纸卷起来:
将我们刚刚学到的三角形制作用到我们的纸上。需要三个步骤:
1.foldtl(上面提到过) div的css样式。
2.添加一个三角形,用伪元素:before
3.添加另一个三角形,用伪元素:after
下面来讲解着三个步骤:
1
2
3
4
5
6
|
.foldtl {
position: relative;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
|
就如你看到的,我只是给div应用了相对定位(为了三角形中使用绝对定位),然后再添加一个盒子阴影效果。顺便说一句,这个项目中不使用阴影的话会简单很多,我只是为了告诉你,这样做确实可行,只需注意给阴影一个足够的偏移,一面挡住折叠的效果。
现在该制作第一个三角形了。这是一个伪元素,绝对定位,并且x和y的值都为0,其他的就和我们学到的制作三角形的css一样了。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.foldtl:before {
content:
""
;
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid
#eee;
border-left: 70px solid transparent;
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}
|
如图:
裁剪:
裁剪其实就是在左上角再做一个和黑色背景颜色相同的三角形,方法基本和第一个三角形一样。
1
2
3
4
5
6
7
8
9
10
|
.foldtl:after {
content:
""
;
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-top: 69px solid
#272822;
border-right: 69px solid transparent;
}
|
现在我们的整个效果就出来了:
分享到:
相关推荐
用css3制作纸张效果 一、中规中矩的效果 所谓“中规中矩的效果”就是加个投影,贴个胶带什么的。效果如下: 这里纸张本身的效果没有什么说头的,就是个CSS3的box-shadow投影效果而已,相关代码如下: 复制代码代码...
摘要:脚本资源,CSS特效,Css3,卷边 纯CSS3 模拟维基百科档案纸质卷边、卷角效果,pure CSS3 article style,把鼠标移到纸张的右上角,会看到纸张的边角卷了起来,看上去很不错的卷边效果,基于CSS3技术,下载源码...
JS+CSS实现矩形对象的圆角效果 JS+CSS实现矩形对象的圆角效果
CSS3制作卷角菜单,供大家一起共同分享学习。
div+css实现圆角导航菜单的效果。
CSS3实现黑色卷角翻页导航条是一款HTML5 CSS3实现的卷边菜单,鼠标放在卷边上可拖动卷边改变大小。
摘要:脚本资源,CSS特效,... 利用CSS3生成纸张的卷边效果,当你把鼠标移到右边纸张右下角的时候,纸张就会卷边,并出现阴影,在卷边和阴影效果的配合下,本效果更加逼真,CSS3的功能真的好棒,个人认为是未来的方向。
用js实现css3效果的圆角方法,代码简洁方便,效果很不错,跟大家分享一下!!
css3做的滚动卷轴样式的菜单栏,效果绚丽,富有创意
HTML+css卷帘样式效果、HTML+css卷帘样式效果、HTML+css卷帘样式效果、HTML+css卷帘样式效果、
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
纯css 实现边框圆角实例,不使用图片,时候所有浏览器.
css图片外边框效果实现 css图片外边框效果实现
用CSS实现圆角框框.txt用CSS实现圆角框框.txt用CSS实现圆角框框.txt用CSS实现圆角框框.txt
CSS实现超级炫酷的流光按钮效果 在网页中实现文字的一个一个出现
纯css实现div圆角,代码简单易懂,没有js那么麻烦,缺点是效果有点小缺憾
让我们来实现它! 呈现光泽图片 下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些。 注意:左边的那张是纯白色的,所以看不到,两张图在CSS代码中都要用到。 HTML代码 制作这种...
内容概要: 使用纯css实现扇形展开效果 能学到什么: css变化, 旋转以及定义旋转的原点 阅读建议: 有一点点css基础的