仓酷云

标题: 来看看：HTML+CSS网页制造实例:制造左上角卷角效果的网页 [打印本页]

作者: 小妖女 时间: 2015-1-15 22:53
标题: 来看看：HTML+CSS网页制造实例:制造左上角卷角效果的网页
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
破洛洛文章简介：HTML+CSS网页制造实例:制造左上角卷角效果的网页.

英文原文http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/
这篇文章中我们将先容怎样制做paper左上角的卷角效果。
我想让我的几句笔墨以一张有卷角折叠效果的纸为背景，假如间接用一张图片，很简单完成，可是这里我要用css来完成。

我的这类完成办法并非十分具有立异意义，可是仍是值得拿出来分享的，复杂的来讲，除一个矩描述器之外，我们还必要两个三角形，以下图所示：

当我们失掉两个三角形并定位好以后，改动下面的三角形的色彩，使之和全部背景致一样。你会发明我们已制造出了折叠的效果了。

html代码
起首创立一个以下的div，包括一个题目，和一段笔墨内容。div有两个class，一个（page)是设定一样平常的page效果，别的一个(foldtl)设定纸张的卷角效果，foldtl的tl代表topleft，别的我们还在最初topright的折叠效果。
<divclass="pagefoldtl"><h2>Headline</h2><p>Loremipsumdolorsitamet...</p></div></div>css部分
css部分，我先做好一张没有卷角效果的一般纸：设置背景致为夺目恬逸的玄色，然后设置纸张的宽度和高度，并添补红色背景。还能够给纸的背景增加一个奇妙的突变效果，你也能够不这么做，由于css内里完成这个要用到不是很尺度的代码，以顺应分歧的扫瞄器。假如你以为如许是不值得的，疏忽之。上面是代码：
body{background:#272822;}.page{background:#fff;width:250px;height:330px;margin:50px;/*OptionalGradient*/background:-moz-linear-gradient(top,#ffffff0%,#e5e5e5100%);/*FF3.6+*/background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#ffffff),color-stop(100%,#e5e5e5));/*Chrome,Safari4+*/background:-webkit-linear-gradient(top,#ffffff0%,#e5e5e5100%);/*Chrome10+,Safari5.1+*/background:-o-linear-gradient(top,#ffffff0%,#e5e5e5100%);/*Opera11.10+*/background:-ms-linear-gradient(top,#ffffff0%,#e5e5e5100%);/*IE10+*/background:linear-gradient(top,#ffffff0%,#e5e5e5100%);/*W3C*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#e5e5e5,GradientType=0);/*IE6-9*/}如今我们失掉了纸的表面效果了，该来丑化一下我们的字体了。h2标签设置为较年夜的玄色字体LilitaOne，而且阔别上界限，给左上角的折叠效果留下必定空间。段落内里的字体：设置必定的padding，色彩为灰色，而且和题目相隔一段符合的间隔。
.pageh2{padding:85px0020px;font:40035px/1.5LilitaOne,Helvetica,sans-serif;}.pagep{padding:10px20px;font:12px/1.5Helvetica,sans-serif;color:#4b4b4b;}假如没出甚么情形下面的代码应当会显现出上面的效果，不是那末耐看，可是为我们前面打下了一个基本。

css三角形部分：

在持续完工之前，我们必要学会怎样用css制造三角形。
创立一个class为“triangle”的空div
宽度和高度设置为0
给下边框和右边框一个很厚的宽度，可是如果分歧的色彩
效果和css代码以下图：

就如你看到的，矩形被对角线支解成了两个色彩分歧的三角形。假设我们让个中的一个边框酿成通明会呈现甚么情形呢？

如许我们就可以失掉一个三角形了，并且还能够换一个border设置成通明，那样就可以失掉一个指向分歧的三角形。

至因而上界限下界限右边界右侧界你本人尝尝就晓得了。
将纸卷起来：
将我们方才学到的三角形制造用到我们的纸上。必要三个步骤：
1.foldtl（下面提到过）div的css款式。
2.增加一个三角形，用伪元素:before
3.增加另外一个三角形，用伪元素:after
上面来说解着三个步骤：

.foldtl{position:relative;-webkit-box-shadow:5px5px5pxrgba(0,0,0,0.8);-moz-box-shadow:5px5px5pxrgba(0,0,0,0.8);box-shadow:5px5px5pxrgba(0,0,0,0.8);}就如你看到的，我只是给div使用了绝对定位（为了三角形中利用相对定位），然后再增加一个盒子暗影效果。特地说一句，这个项目中不利用暗影的话会复杂良多，我只是为了告知你，如许做的确可行，只需注重给暗影一个充足的偏移，一面盖住折叠的效果。

如今该制造第一个三角形了。这是一个伪元素，相对定位，而且x和y的值都为0，其他的就和我们学到的制造三角形的css一样了。

.foldtl:before{content:"";position:absolute;top:0%;left:0%;width:0px;height:0px;border-bottom:70pxsolid#eee;border-left:70pxsolidtransparent;-webkit-box-shadow:7px7px7pxrgba(0,0,0,0.3);-moz-box-shadow:7px7px7pxrgba(0,0,0,0.3);box-shadow:7px7px7pxrgba(0,0,0,0.3);}如图：

裁剪：

裁剪实在就是在左上角再做一个和玄色背景色彩不异的三角形，办法基础和第一个三角形一样。
.foldtl:after{content:"";position:absolute;top:0%;left:0%;width:0px;height:0px;border-top:69pxsolid#272822;border-right:69pxsolidtransparent;}如今我们的全部效果就出来了：

</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

作者: 小魔女 时间: 2015-1-17 19:44
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

作者: 简单生活 时间: 2015-1-24 14:26
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 只想知道 时间: 2015-2-1 17:26
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 山那边是海 时间: 2015-2-7 13:54
可以使用 CSS 检查工具进行设计。

作者: 变相怪杰 时间: 2015-2-22 16:16
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 谁可相欹 时间: 2015-3-14 11:47
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 飘灵儿 时间: 2015-3-21 07:00
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

欢迎光临仓酷云 (http://ckuyun.com/)