CSS3新特性应用之字体排印
2018-06-24 00:48:43来源:未知 阅读 ()
目录
- 背景与边框第一部分
- 背景与边框第二部分
- 形状
- 视觉效果
- 字体排印
- 用户体验
- 结构与布局
- 过渡与动画
- 源码下载
一、插入换行
- ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。
- +:表示同辈元素的兄弟元素。
- \A:一个空白换行符
- 解决方案:
- 在dd与dt相邻的dt上的子元素前面加入一个空白换行符
- 在相邻的dd与dd之间,加入一个逗号
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> dt, dd{ display: inline; } dd{ font-weight: bold; margin: 0px 0px 0px 5px; } dd + dt::before{ content: '\A'; white-space: pre; /*html默认换行符与其相邻的其他空白符合并,pre表示不合并空白符*/ } dd + dd::before{ content: ','; margin-left: -5px; } </style> </head> <body> <dt>Name</dt><dd>Sam Long</dd> <dt>Email</dt><dd>abc@163.com</dd><dd>bcd@163.com</dd> <dt>Location</dt><dd>CQ</dd> </body>
二、文本行的斑马条纹
- 背景尺寸是行高的2倍
- 注意em单位
- white-space:设置或检索对象内空格的处理方式
- normal:默认处理方式
- pre:用等宽字体显示预格式化的文本,空白字符会被浏览器保留
- nowrap:文本不会换行,直到遇到<br>标签为止
- pre-wrap:用等宽字体显示预格式化的文本,空白字符会被浏览器保留,文本会换行
- pre-line:保持换行符,合并空白符
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ padding: .5em; line-height: 1.5; background: hsl(20, 50%, 95%); background-image: linear-gradient( rgba(120,0,0,.1) 50%, transparent 0); background-size: auto 3em; background-origin: content-box; font-family: Consolas, Monaco, monospace; } .wrap code{ font: inherit; } </style> </head> <body> <pre class="wrap"> <code> while(true){ i++; if(i>10){ break; }else{ console.log(i); } }</code></pre> </body>
三、调整tab的宽度
- 注意Ide是否应用的tab替换为space的功能,必须要关闭。
- 利用tab-size指定tab的大小
- 示例代码
<head> <meta charset="UTF-8"> <title>Document</title> <style> pre, code{ font-family: monospace; } pre{ white-space: pre; background: red; tab-size: 2; display: block; } </style> </head> <body> <pre><code> while(true){ var d = new Date(); } </code></pre> </body>
四、自定义下划线
- linear-gradient的角度,默认是180deg
- text-shadow实现阴影效果,做出左右阴影偏移
- 存在兼容性问题,chrome50版本没有下划线显示
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> body { font: 250%/1.6 Baskerville, Palatino, serif; } a { background: -webkit-linear-gradient(gray, gray) no-repeat; background-size: 100% 1px; background-position: 0 1.02em; text-shadow: .05em 0 white, -.05em 0 white; /*水平左、右偏移一个背景色的阴影,用于降级字母的下半处理*/ } p:nth-child(2) a { background: -webkit-linear-gradient(180deg, gray 66%, transparent 0) repeat-x; /*0,180deg都是可以的*/ background-size: .2em 2px; background-position: 0 1em; } </style> </head> <body> <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p> <p>The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.</p> </body>
五、现实中的文字效果
- text-shadow实现的效果不能退化,如果浏览器不支持则看不见,可以用filter实现,但支持得更好(但可以退化样式)
- text-shadow设置多个值,并按递增规则偏移,可以制作出立体效果
- 凸版文字
- 字体太小text-shadow属性产生的效果不可接受
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font: 110%/1.6 Baskerville, Palatino, serif; /*字体过小表现不出样式*/ } .wrap{ width: 200px; background: hsl(210, 13%, 60%); color: hsl(210, 13%, 30%); padding: .1em; text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8); } .wrap02{ margin-top: 10px; width: 200px; background: hsl(210, 13%, 60%); color: hsl(210, 13%, 30%); padding: .1em; text-shadow: 0 -1px 1px hsla(0, 0%, 100%, .8); } </style> </head> <body> <div class="wrap"> <span>根据协议,四省(市)将深化教育综合改革合作交流.</span> </div> <div class="wrap02"> <span>根据协议,四省(市)将深化教育综合改革合作交流.</span> </div> </body>
- 其他效果示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ text-align: center; font-size: 38px; width: 200px; background: deeppink; color: white; text-shadow: 1px 1px black, -1px 1px black, -1px -1px black, 1px -1px black; } .wrap02{ margin-top: 10px; font-size: 38px; width: 200px; text-align: center; background: #203; color: #ffc; transition: 1s; } .wrap02:hover{ text-shadow: 0 0 .1em, 0 0 .3em; color:transparent; } .wrap03{ margin-top: 10px; width: 200px; font-size: 38px; text-align: center; color: white; background: hsl(0,50%,45%); text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0, 0%, 65%), 0 3px hsl(0, 0%, 45%), 0 4px hsl(0, 0%, 25%), 0 5px hsl(0, 0%, 5%), 0 5px 10px black; } .wrap04{ margin-top: 10px; width: 200px; font-size: 38px; text-align: center; color: white; background: hsl(0,50%,45%); text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black; } </style> </head> <body> <div class="wrap"> <span>CSS</span> </div> <div class="wrap02"> <span>CSS</span> </div> <div class="wrap03"> <span>CSS</span> </div> <div class="wrap04"> <span>CSS</span> </div> </body>
六、自定义复选框
- 系统自带复选框美化
- 利用css3提供的:checked伪类选择器实现
- 宽、高、对齐等设置单位最好用em,让按钮变得更为灵活
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="checkbox"]{ display: none; } input[type="checkbox"] + label::before{ content: '\a0'; /*不换行空格*/ display: inline-block; background: silver; border-radius: .2em; margin-right: .2em; width: .8em; height: .8em; line-height: .65em; text-indent: .15em; } input[type="checkbox"]:checked + label::before{ content: '\2713'; background: yellowgreen; } </style> </head> <body> <input type="checkbox" id="anesome"/> <label for="anesome">anesome</label> </body>
- 开关按钮的实现
- 伪类选择器 + 修饰label元素实现
- 示例代码:
<head> <meta charset="UTF-8"> <title>Document</title> <style> input[type="checkbox"]{ display: none; } input[type="checkbox"] + label{ display: inline-block; padding: .3em .5em; background: #ccc; border: 1px solid rgba(0, 0, 0, .2); background-image: linear-gradient(#ddd,#bbb); text-align: center; border-radius: .3em; box-shadow: 0 1px white inset; text-shadow: 0 1px 1px white; } input[type="checkbox"]:checked + label{ box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset; border-color: rgba(0, 0, 0, .3); background: #bbb; } </style> </head> <body> <input type="checkbox" id="anesome"/> <label for="anesome">anesome</label> </body>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)
下一篇:网页布局基础
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash