【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种:
- none: 不生成任何值。
- attr: 插入标签属性值
- url: 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
- string: 插入字符串
none
其实我们常用的clearfix就是应用了这个none了
css code
- .clearfix:after {
- content: "";
- visibility: hidden;
- display: block;
- font-size: 0;
- clear: both;
- height: 0;
- }
- * html .clearfix { zoom: 1; } /* IE6 */
- *:first-child+html .clearfix { zoom: 1; } /* IE7 */
attr: 插入标签属性值
普通文字demo
青,取之于蓝,而青于蓝;冰,水为之,而寒于水。
css code
- .attr-title:after{
- content:attr(title);
- color:#f00;
- }
图片滑过动画效果
css code
- #imghover li{
- position:relative;
- margin-right:20px;
- }
- #imghover a:after{
- content:attr(title);
- position:absolute;
- top:0;
- left:0;
- width:100%;
- background-color:rgba(0,0,0,0.5);
- line-height:30px;
- color:#fff;
- text-align:center;
- font-size:14px;
- text-shadow:-1px -1px 0 rgba(0,0,0,0.8);
- opacity: 0;
- -webkit-transition:all 0.3s ease;
- -moz-transition:all 0.3s ease;
- -ms-transition:all 0.3s ease;
- -o-transition:all 0.3s ease;
- transition:all 0.3s ease;
- }
- #imghover a:hover:after{
- top:50%;
- margin-top:-15px;
- opacity: 1;
- }
url: 使用指定的绝对或相对地址插入一个外部资源
css code
- #icon_list a{
- font-size:16px;
- }
- #icon_list a[href]:before{
- content:'';
- margin-right:5px;
- }
- #icon_list a[href$='.txt']:before{
- content:url(images/icon_txt.gif);
- }
- #icon_list a[href$='.pdf']:before{
- content:url(images/icon_pdf.gif);
- }
- #icon_list a[href$='.doc']:before{
- content:url(images/icon_doc.gif);
- }
- #icon_list a[href$='.jpg']:before{
- content:url(images/icon_pic.gif);
- }
- #icon_list a[href^="mailto:"]:before{
- content:url(images/icon_mailto.gif);
- }
string: 插入字符串
其实关于插入字符串,这个页面结构已经应用了很多了,第一个是h2标题左边的蓝色一块,第二个是鼠标滑过代码区的动画效果,第三个就是footer部分的emailto旁边的小图标,如果有兴趣可以用firebug查看查看,这个主要说下如何应用content做计数器
- css3新增的选择器
- 属性选择器
- 结构伪类选择器
- 增强的文本和颜色功能
- 文本阴影,文本换行,溢出文本
- rgba色彩模式
- 新增的弹性盒模型
- box布局
- 弹性布局实战
css code
- #counter li{
- margin-left:0;
- list-style:none outside none;
- counter-increment: title1;
- }
- #counter li:before{
- content:"第"counter(title1)"章:";
- font-size:14px;
- color:#f00;
- }
- #counter li li{
- margin-left:25px;
- counter-increment: title2;
- }
- #counter li li:before{
- content:counter(title1)"."counter(title2);
- }
关于content计数器的应用可以参考这两篇文章CSS Counters – The Right Way to Organize Your Ordered Content,CSS content, counter-increment 和 counter-reset详解
插入特殊字符
在这篇文章的最后,说下如何在content里面插入特殊字符,关于特殊字符可以参考这里:html特殊字符,请先查阅其实用方法,即第一列为符号;第二列为html中使用的,需在前面加上&#;第三排css中可以使用,不过需要反斜杠\转义。下面实例操作下
- css3新增的选择器
- 增强的文本和颜色功能
- 新增的弹性盒模型
- copyright
css code
- #special li:before,
- #special li:after{
- color:#f00;
- }
- #special li:nth-child(2n+1):before{
- color:#ccc;
- }
- #special li:first-child:before,
- #special li:first-child:after{
- content:"\25ba";
- }
- #special li:first-child:after{
- -webkit-transform:scale(-1);
- -moz-transform:scale(-1);
- -ms-transform:scale(-1);
- -o-transform:scale(-1);
- transform:scale(-1);
- }
- #special li:nth-of-type(2):before{
- content:"\2714";
- }
- #special li:nth-child(3):after{
- content:"\00bb";
- }
- #special li:last-of-type:before{
- content:"\00a9";
- margin-right:5px;
- }
注:这里顺便多应用了下css3的子元素选择器,然后对于第一的after箭头,通过transform的scale为-1来左右调转
更多资料
- Pure CSS GUI icons
- Awesome: 10 CSS3 box shadow experiments
- Pure CSS speech bubbles
- CSS3 ordered list styles
- CSS3 breadcrumbs
- Cool headings with pseudo-elements
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
转自:http://www.w3cplus.com/solution/css3content/css3content.html
【转载】css3 content 生成内容的更多相关文章
- 转载:css3 content 生成内容
本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- 【CSS3】---:before :after生成内容
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...
- css权威指南学习笔记--列表与生成内容
列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...
- angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
- 使用NVelocity生成内容的几种方式
使用NVelocity也有几个年头了,主要是在我的代码生成工具Database2Sharp上使用来生成相关代码的,不过NVelocity是一个非常不错的模板引擎,可以用来生成文件.页面等相关处理,非常 ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- css3 -- 自动生成序号(不使用JS,可任意排序)
需求:一个table 需要在第一列生成序号:1.2.3.4.5...... 并且自适应行数 不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,最后采用CSS的一个计数器方法实现! & ...
- 基于ABP做一个简单的系统——实战篇:4.基于富文本编辑器,Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
随机推荐
- Etag缓存在PHP和NodeJS中的实现
HTTP 提供了许多页面缓存的方案,其中属 Etag 和 Last-Modified 应用最广.本文会先介绍 Etag 的应用场景,然后说说他在 php 和 node 中的使用. 本文地址:http: ...
- 走进AngularJs(七) 过滤器(filter)
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...
- [.NET自我学习]Delegate 泛型
阅读导航 委托Delegate 泛型 1. 委托Delegate 继承自MulticastDelegate 声明委托定义签名: public delegate int DemoDelegate(int ...
- MYSQL分页存储过程及事务处理
最近给客户做的一小系统是SQLSERVER的数据库,因为特殊原因要切换到MYSQL上去,切换数据库确实让人头疼的,SQLSERVER和MYSQL的存储过程还是有很大差别的,下面是我做切换时转换的MYS ...
- IOS UIView 01-View开始深入 绘制像素到屏幕上
注:本人是翻译过来,并且加上本人的一点见解. 前言 一个像素是如何绘制到屏幕上去的?有很多种方式将一些东西映射到显示屏上,他们需要调用不同的框架.许多功能和方法的结合体.这里我们大概的看一下屏幕之后发 ...
- 分割超大Redis数据库例子
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/124.html?1455853509 薄荷 App 上的伙伴功能大量使用了 ...
- Ghost博客安装
Ghost博客是一个基于Node.js 的开源博客平台,由前WordPress UI 部门主管John O'Nolan 和WordPress 高级工程师Hannah Wolfe 创立,目的是为了给用户 ...
- 删除顽固node_modules
在工作中有用到gulp,webpack,使用他们需用依赖node的一些模块包,于是会在目录下生成一个node_modules文件夹.有一次想删掉它重新生成模块包的时候发现根本不太可能,无穷无尽的报一个 ...
- Atitit 图像处理 灰度图片 灰度化的原理与实现
Atitit 图像处理 灰度图片 灰度化的原理与实现 24位彩色图与8位灰度图 首先要先介绍一下24位彩色图像,在一个24位彩色图像中,每个像素由三个字节表示,通常表示为RGB.通常,许多24位彩色图 ...
- Linux初学 - 解决chkconfig Segmentation fault(core dumped)
yum install *chkconfig*