分类 学习分享 下的文章

zen coding for sublime text2

zen coding是神马我就不多介绍了,下面直接讲怎么在sublime text2中安装zen coding插件:

1、通过前一篇文章为sublime text2安装Package Control。

2、安装好Package Control之后,通过快捷键[ctrl+shift+p]调出command palette,然后输入install,调出Package Control,然后找到zen coding(zen coding已改名为 emmet),回车即可。

重启sublime text 2,然后新建个HTML页面输入你熟悉的zen coding快捷键试试!

Sublime Text 2 安装 Sublime Package Control

Sublime Text 2 安装 Sublime Package Control,通过 Sublime Package Control,安装、升级和卸载 Package。

安装 Package Control 的方法:

1、打开 Sublime Text 2,按下 Control + ` 调出 Console,通常这个快捷键会与PC上的其它软件起冲突,需要修改其它软件的这个快捷键。

2、将以下代码粘贴进命令行中并回车:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

3、重启 Sublime Text 2,如果在 Preferences -> Package Settings中见到Package Control这一项,就说明安装成功了。

官方最新安装方法:https://sublime.wbond.net/installation#Simple

重复的线性渐变

替代线性渐变,你可以使用重复的线性渐变:标注色标值,然后无间断地重复它们。用百分比的话就没有太大的意义,但用像素或者其他单位的,它可以实现非常酷的效果。例如:

background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

渐变以明亮的纯红色开始,在20像素的位置之后渐变为深红,随后在40像素的位置渐变回纯红色。这是一个重复的渐变,它会重复这个图案到块的结束。像Figure6所示

Figure6.pngFigure 6: A repeating gradient example.

最后感谢 Jessica 同学。

更多复杂的例子 ↓

- 阅读剩余部分 -

透明渐变

一个很酷的技术,在渐变中改变颜色的alpha通道的值,例如:

background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));

我们用RGBA,在渐变开始时alpha值是1,在渐变结束时alpha值是0.5。我没有使用红、绿、蓝三个色值,但我却完成一个很棒的效果,如Figure5如示

Figure5.pngFigure 5: Varying transparency along a gradient to give a cool semi-seethrough effect.

继续浏览重复的线性渐变

CSS3 线性渐变-色标

渐变可以指定位置做色标标明特别的颜色。在一个渐变里你可以指定许多色标只要你喜欢,浏览器会计算出这些色标间的所有颜色。一起看一个例子,从top left到bottom right渐变,从亮红色到暗红色

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(150,0,0));

等同于下面的写法:

background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,rgb(150,0,0) 100%);

在这个渐变块,我们一个色标在0%处,一个在100%处。但是你没看到一个坐标值,是因为它是默认的。反而,在开始和结束添加色标是非常有用的。例如:

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));

这边我们从一个亮红色,50%深红色,75%再深一点的深红色,最后一个稍微亮的深红色。如Figure 3所示

Figure3.pngFigure 3: A linear CSS gradient with multiple colour stops.

百分比的方式,是一种非常万能的做法,它将为你展示CSS渐变是多么地灵活多变。即便渐变是应用在一个改变宽度,高度当浏览器窗口重置大小时的不固定的布局里,它也总是适用的。

当然你也可以用像素代替百分比,例如:

background-image: -o-linear-gradient(top left,rgb(255,0,0),rgb(100,0,0) 100px,rgb(50,0,0) 200px,rgb(150,0,0));

这意味着色标总是标在从渐变开始的100像素和200像素,不管浏览器窗口重置大小。如果你想,你可以改变色标的开始和结束的位置——它们不必要在块的开始和结束位置。在这种情况下,在色标开始前是一个固定的颜色,在色标结束后是一个固定的颜色。例如:

background-image: -o-linear-gradient(360deg,rgb(100,100,100) 50% ,rgb(200,200,200) 75%);

你会得到Figure4结果

Figure4.pngFigure 4: Moving the start and end colour stops.

继续浏览透明渐变

最近回复

  • unicac: 很久没打理了。。。
  • kuye: 你的博客做得也不错(...
  • unicac: 哈哈,是咯!
  • 柠檬园主: 还在更新的独立博客,...
  • 18通讯网: 虽然过程很辛苦,但你...
  • fenny: 这个尴尬的年龄,谈爱...

分类