全方位了解CSS3的Regions扩展


Posted in HTML / CSS onAugust 07, 2015

这是一个adobe的提议:css Regions,提供在多个不同元素中排布内容的方法。首先需要为内容容器声明一个flow属性独一无二的字符值,然后通过from()函数和内容的属性确定内容将会在哪些元素内排布:
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先将内容容器中的内容放置到第一个元素target1中,如果有溢出,就将溢出的部分放在target2中显示。说得更明白一点,她不是在另一个target中重复内容,而是继续在第二个target中显示1中没有完全显示的内容。请看下面的例子:
全方位了解CSS3的Regions扩展

region布局效果
随便说一下,两个目标区域不需要在DOM或者布局中相邻,如果需要的话,她们完全可以是同一个页面的两个毫不相干的人或者仇人(但是这样的话会带来可及性问题)。
Regions和Exclusions一样还不被任何浏览器支持,但是你可以从adobe的实验室中下载它,亲自试一试。

现在,让我们了解这个扩展吧,他们可以被分为4类:

    线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
    任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
    任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
    区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子:
内容流(Content flow)

在典型的HTML文档中,文字可以在多个区域显示,但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本,或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时,这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能,或者,当显示在平板上时,自适应竖屏(portrait)或者横屏(landscape)显示。
全方位了解CSS3的Regions扩展

全方位了解CSS3的Regions扩展

文字跨3个不同宽的列显示

如果你想要单独地指定一托内容(比如文字和图片),那些内容如何在一串区域内显示(flow)呢?这正是内容流(content flow)要做的。

要使用它,通过flow属性赋予内容的容器一个名字,这样做会将内容从普通的CSS布局流中去掉,然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。

上面的三列布局的代码如下:

CSS

CSS Code复制内容到剪贴板
  1. #source {   
  2.     flow: "main-thread";    
  3. }    
  4. .region {    
  5.     content: from(main-thread);    
  6.     background#C5DFF0;    
  7. }  

HTML

XML/HTML Code复制内容到剪贴板
  1. <div id="source"> <p>Lorem ipsum dolor [...]</p> </div>     
  2. <div id="region1" class="region"></div>     
  3. <div id="region2" class="region"></div>     
  4. <div id="region3" class="region"></div>    

你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定,将会使用正常的文档顺序。

通过这个简单的构件,你可以实现更复杂的布局,包括多列文本、不同宽高的列,以及跨越多个列的区域。

文字穿越全方位了解CSS3的Regions扩展堆叠的区域和列
形状环绕(Wrap shape)

使用形状环绕,你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。
全方位了解CSS3的Regions扩展

文字内容显示在自定义形状的内部

要使用这个特性,你需要使用wrap-shape属性来定义形状,并设定wrap-shape-mode属性为需要的值。通过制定content的值,文字将显示在形状内部。

上面的现实心形的代码如下:

CSS

CSS Code复制内容到剪贴板
  1. .circle/* 定义元素形状为一个圆*/  
  2.     wrap-shape: polygon(0px150px /* ...更多点*/);   
  3.     wrap-shape-mode: content;    
  4. }    
  5. .heart{ /* 定义元素形状为心形*/  
  6.     wrap-shape: polygon(150px32px /* ...更多的点 */);    
  7.     wrap-shape-mode: content;    
  8. }  

HTML

XML/HTML Code复制内容到剪贴板
  1. <div class="circle"></div>     
  2. <div class="heart"></div>    

我们的基于WebKit原型支持使用一个简单的多边形指定一个形状,但是你可以想象其它的集合体也可以被用于设定形状,或者甚至使用一张图片的alpha值。。。
环绕(Exclusions)

通过使用wrap-shap-mode属性的其它值,你可以创建不同的效果,包括指定的wrap-shape 属性可以理解为要完全避开的区域

全方位了解CSS3的Regions扩展

文字环绕在自定义图形周围

CSS

CSS Code复制内容到剪贴板
  1. .exclusion{    
  2.     /* 文字环绕整个元素 */  
  3.     wrap-shape-mode: around;    
  4. }  

HTML

XML/HTML Code复制内容到剪贴板
  1. <div class="exclusion circle">     
  2.     <p>Lorem ipsum dolor [...]</p>    
  3. </div>    

区域样式(Region Styling)

在杂志中,指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction标题的部分)被设定为深蓝色,而余下的文字则为灰色
全方位了解CSS3的Regions扩展

文字样式依赖它流入的区域

CSS

CSS Code复制内容到剪贴板
  1. p { colorgray: }     
  2. @region-style #region_1 {   
  3.     p { color#0C3D5F; }    
  4. }  

HTML

XML/HTML Code复制内容到剪贴板
  1. <div id="article">     
  2.     <h1>Introduction</h1>  
  3.     <p>This is an example [...]</p>    
  4. </div>     
  5. <div id="region_1"></div>     
  6. <div id="region_2"></div>     
  7. <div id="region_3"></div>     
  8. <div id="region_4"></div>    

区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
You might like
相对路径转化成绝对路径
2007/04/10 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python动态网页批量爬取
2016/02/14 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
什么是URL
2015/12/13 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
路政管理毕业自荐书范文
2014/02/10 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
事业单位岗位说明书
2015/10/08 职场文书
初中美术教学反思
2016/02/17 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书