随笔- 24  文章- 3  评论- 11 

Visor 有很多隐藏功能,这些功能并不是系统的核心功能,只是为了测试一些技术,做了些对初学前端的工程师还算有用的功能。今天就介绍一下CSS3 生成器。

先介绍一下Note 组件:

Note是基本图形部件的一个组件。由于Visor是一个基于HTML5的图形设计器,所以Note也可以实现需要HTML5的一些特效,我们可以通过设置Note的属性,来获得一个视觉效果,再通过下一段介绍的CSS Style Template将整个CSS的实现逆向生成出来提供给用户使用。

Note常用的属性:

      边距:指代内部文本距离外框的边距padding

      旋转:当前的这个容器按顺时针旋转的角度

      宽:整个容器的宽度

      高:整个容器的高度

 Note的外观属性:

文字设置:能够设置字体的样式,颜色,大小,以及是否为粗体、斜体,是否填充。

 背景选择:可以选择背景的样式。颜色,渐变,图片

 

 

边框效果的设置:可以对边框进行颜色,阴影以及是否为圆角的设置。

文本段落的设置:文本段落见得行间距以及对齐的效果

            

下边介绍一下  Css Style 模板

Css Style模板是使用一个前端的技术JSRender所实现的,它通过分析Note的属性,获取其中的信息来进行解析,最后自动化的实现一个Css的代码。

在我们设计好了Note后,通过点击右方的模板,就能够逆向的生成一个CSS的代码。用户能够使用自己设计的CSS效果放在自己想要的容器中。

1.设计个性化的容器note

点击模板

就生成了CSS代码

 

生成的CSS 应用到DIV上可以产生和note 一样的效果。

有兴趣的朋友可以访问 http://www.visor.com.cn 去尝试一下。

 

 posted on 2015-05-14 21:45 沧海一声笑 阅读(...) 评论(...) 编辑 收藏