html书页卷角效果,HTML+CSS网页制作实例制作左上角卷角效果的网页
网页制作网络技术需要大家共同分享,不能闭门造车,下面是bj-dns文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页.
英文原文
这篇文章中我们将介绍如何制做paper左上角的卷角效果。
我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现。
我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形容器以外,我们还需要两个三角形,如下图所示:
当我们得到两个三角形并定位好之后,改变上面的三角形的颜色,使之和整个背景色一样。你会发现我们已经制作出了折叠的效果了。
html代码
首先创建一个如下的div,包含一个标题,和一段文字内容。div有两个class,一个(page)是设定一般的page效果,另外一个(foldtl)设定纸张的卷角效果,foldtl的tl代表top left,另外我们还在最后top right的折叠效果。
css部分
css部分,我先做好一张没有卷角效果的普通纸:设置背景色为醒目舒服的黑色,然后设置纸张的宽度和高度,并填充白色背景。还可以给纸的背景添加一个微妙的渐变效果,你也可以不这么做,因为css里面实现这个要用到不是很标准的代码,以适应不同的浏览器。如果你认为这样是不值得的,忽略之。下面是代码:
现在我们得到了纸的轮廓效果了,该来美化一下我们的字体了。h2标签设置为较大的黑色字体,并且远离上边界,给左上角的折叠效果留下一定空间。段落里面的字体:设置一定的padding,颜色为灰色,并且和标题相隔一段合适的距离。
如果没出什么情况上面的代码应该会显示出下面的效果,不是那么耐看,但是为我们后面打下了一个基础。
css三角形部分:
在继续开工之前,我们需要学会如何用css制作三角形。
创建一个class为“triangle”的空div
宽度和高度设置为0
给下边框和左边框一个很厚的宽度,但是要是不同的颜色
效果和css代码如下图:
就如你看到的,矩形被对角线分割成了两个颜色不同的三角形。假如我们让其中的一个边框变成透明会出现什么情况呢?
这样我们就能得到一个三角形了,而且还可以换一个border设置成透明,那样就能得到一个指向不同的三角形。
至于是上边界 下边界 左边界 右边界你自己试试就知道了。
将纸卷起来:
将我们刚刚学到的三角形制作用到我们的纸上。需要三个步骤:
1.foldtl(上面提到过) div的css样式。
2.添加一个三角形,用伪元素:before
3.添加另一个三角形,用伪元素:after
下面来讲解着三个步骤:
就如你看到的,我只是给div应用了相对定位(为了三角形中使用绝对定位),然后再添加一个盒子阴影效果。顺便说一句,这个项目中不使用阴影的话会简单很多,我只是为了告诉你,这样做确实可行,只需注意给阴影一个足够的偏移,一面挡住折叠的效果。
现在该制作第一个三角形了。这是一个伪元素,绝对定位,并且x和y的值都为0,其他的就和我们学到的制作三角形的css一样了。
如图:
裁剪其实就是在左上角再做一个和黑色背景颜色相同的三角形,方法基本和第一个三角形一样。
现在我们的整个效果就出来了:
html书页卷角效果,HTML+CSS网页制作实例制作左上角卷角效果的网页相关推荐
- div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
- 大一学生期末大作业 html+css+javascript网页设计实例【电影购票项目】html网页制作成品代码
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- html 网页联系人,HTML+CSS网页制作实例:制作联系人网页表单
网页制作文章简介:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格. ...
- html5 css3鼠标滑过效果,Hover.css纯CSS3鼠标滑过特效动画库
Hover.css是一款非常简单实用的纯CSS3鼠标滑过特效动画库.有100多种效果可以选择,包括:2D动画.背景动画.边框动画.图标动画.发光渐变.阴影.对话框.折角等100多种特效. 使用方法 首 ...
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...
- 纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术 简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果 纯CSS实现帅气的SV ...
- N01web网页设计实例作大作业(div+css) ——中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计...
web网页设计实例作业 --中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计- 文章目录 web网页设计实例作业 --中国茶文化(6页) 茶文化网页制作作业_中国化(网页设计... 一.作品展 ...
最新文章
- R语言|PLS_DA分析绘图示例
- 设置session失效的几种方法
- MarshalByRefObject浅析
- php 制造异常,php 异常
- 【CSS基础】实现 div 里的内容垂直水平居中
- 均分纸牌(洛谷-P1031)
- [转]版本控制软件Subversion的使用笔记(WIN)
- Springboot项目部署到外部Tomcat
- c java通讯_java与c通讯
- 黑苹果 Catalina 15 声卡定制
- data 谷歌浏览器更改user 路径_谷歌浏览器修改缓存路径
- LeetCode-LCP 17. 速算机器人(Goland实现)
- 实例讲解PMP相关方参与度评估矩阵
- MPAndroidChart的详细使用——BarChart条形图组(三)
- 模拟小信号调理电路(智能车电磁组)
- 数据结构和算法(五)--栈(Stack)
- 什么是哈希?哈希的模拟实现
- 大型企业AD架构规划(一)
- Android 禁止屏幕休眠和锁屏的方法
- 地势坤,君子以厚德载物