Kairyou's Blog

专注于WEB前端开发, 永远追求更好的用户体验, 更好的开发体验

  • typecho模版: K Blue G1

    / 分类: 生活 / No Comments

    css代码片段1:

    html{min-height:100%;background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .2)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .2)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .2)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .2)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .2)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .2)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .2)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .2)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .2)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .2)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .2)), to(transparent))
    ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .2)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .2)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .2)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .2)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .2)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .2)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .2)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .2)), to(transparent))
    ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .2)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .2)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));}
    #wrapper{background:-webkit-gradient(linear, 0 0, 0 0, from(transparent), to(transparent));}

    css代码片段2:

    html:hover{background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .05)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .05)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .05)), to(transparent))
    ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .05)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .05)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .05)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .05)), to(transparent))
    ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));}

    css代码片段3:

    html{min-height:100%;background:-webkit-gradient(radial, 10% 8%, 0, 10% 8%, 50, from(rgba(155, 102, 253, .09)), color-stop(90%, rgba(155, 102, 253, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 20%, 0, 5% 20%, 37, from(rgba(82, 254, 183, .09)), color-stop(90%, rgba(82, 254, 183, .05)), to(transparent)) ,-webkit-gradient(radial, 0% 29%, 0, 0% 29%, 93, from(rgba(215, 77, 29, .09)), color-stop(90%, rgba(215, 77, 29, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 17%, 0, 13% 17%, 109, from(rgba(84, 121, 221, .09)), color-stop(90%, rgba(84, 121, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 13% 35%, 0, 13% 35%, 70, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 14% 42%, 0, 14% 42%, 123, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 16% 53%, 0, 16% 53%, 70.5, from(rgba(92, 20, 142, .09)), color-stop(90%, rgba(92, 20, 142, .05)), to(transparent)) ,-webkit-gradient(radial, 2% 50%, 0, 2% 50%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(1, 117, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 62%, 0, 6% 62%, 63, from(rgba(8, 161, 95, .09)), color-stop(90%, rgba(8, 161, 95, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 70%, 0, 9% 70%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(165, 133, 151, .05)), to(transparent)) ,-webkit-gradient(radial, 6% 75%, 0, 6% 75%, 73, from(rgba(223, 149, 76, .09)), color-stop(90%, rgba(223, 149, 76, .05)), to(transparent)) ,-webkit-gradient(radial, 5% 92%, 0, 5% 92%, 63, from(rgba(165, 133, 151, .09)), color-stop(90%, rgba(24, 98, 115, .05)), to(transparent)) ,-webkit-gradient(radial, 9% 97%, 0, 9% 97%, 54, from(rgba(218, 117, 44, .09)), color-stop(90%, rgba(218, 117, 44, .05)), to(transparent))
    ,-webkit-gradient(radial, 98% 7%, 0, 98% 7%, 63, from(rgba(63, 129, 245, .09)), color-stop(90%, rgba(63, 129, 245, .05)), to(transparent)) ,-webkit-gradient(radial, 95% 17%, 0, 95% 17%, 93, from(rgba(223, 4, 78, .09)), color-stop(90%, rgba(223, 4, 78, .05)), to(transparent)) ,-webkit-gradient(radial, 85% 29%, 0, 85% 26%, 129, from(rgba(116, 197, 202, .09)), color-stop(90%, rgba(116, 197, 202, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 28%, 0, 96% 28%, 63, from(rgba(223, 101, 39, .09)), color-stop(90%, rgba(223, 101, 39, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 35%, 0, 90% 35%, 63, from(rgba(79, 6, 106, .09)), color-stop(90%, rgba(79, 6, 106, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 46%, 0, 96% 46%, 80, from(rgba(255, 40, 110, .09)), color-stop(90%, rgba(255, 40, 110, .05)), to(transparent)) ,-webkit-gradient(radial, 90% 52%, 0, 90% 52%, 63, from(rgba(9, 233, 23, .09)), color-stop(90%, rgba(9, 233, 23, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 53%, 0, 96% 53%, 80, from(rgba(123, 201, 221, .09)), color-stop(90%, rgba(123, 201, 221, .05)), to(transparent)) ,-webkit-gradient(radial, 96% 69%, 0, 96% 69%, 70.5, from(rgba(19, 225, 148, .09)), color-stop(90%, rgba(19, 225, 148, .05)), to(transparent)) ,-webkit-gradient(radial, 93% 79%, 0, 93% 79%, 43, from(rgba(174, 187, 203, .09)), color-stop(90%, rgba(174, 187, 203, .05)), to(transparent)) ,-webkit-gradient(radial, 92% 93%, 0, 92% 90%, 143, from(rgba(183, 44, 116, .09)), color-stop(90%, rgba(183, 44, 116, .05)), to(transparent))
    ,-webkit-gradient(radial, 50% 5%, 0, 50% 5%, 80, from(rgba(67, 132, 155, .09)), color-stop(90%, rgba(67, 132, 155, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 97%, 0, 50% 97%, 133, from(rgba(197, 184, 244, .09)), color-stop(90%, rgba(197, 184, 244, .05)), to(transparent)) ,-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 0, from(transparent), to(rgba(226, 226, 226, .97)), color-stop(90%, transparent));}
    #wrapper{background:-webkit-gradient(linear, 0 0, 0 0, from(transparent), to(transparent));}

    使用说明(下面三种效果任选其一):
    效果1:编辑K Blue风格文件夹的g.css,在最下面加入 css片段1+css片段2。默认背景是比较亮的圆组成,鼠标移动到页面上,背景里的圆颜色变浅(既是本页效果)。
    效果2:复制css片段1,在g.css的最下面加入。效果:背景圆一直都是深色的,鼠标移动到页面无变化。
    效果3:复制ss片段3,在g.css的最下面加入。效果:背景圆一直都是浅色的,鼠标移动到页面无变化。

    K Blue G1是K Blue的一个小分支,想使用G1风格只需按照上面的步骤修改css文件即可。

    Ps:K Blue、K Blue G1、K Blue G2的区别:
    K Blue :基础简洁版,背景色是灰色的过度,背景无彩色圆。
    K Blue G1 : 跟"K Blue"类似,背景色加上了26个彩色的圆。
    K Blue G2 : 暗色调,背景色是黑色加上了26个彩色的圆。

    K blue 发布帖K blue 演示K blue G1演示K blue G2演示

  • 在VIM里 调用多种浏览器 预览html php 等文件

    / 分类: 工具 / 5 Comments

    最近这段时间睡眠严重不足,脑袋发晕的时候就要放送下,so改善vim。产生个想法:把自己喜欢的editplus的功能都搞到vim上面来。这个就是其中之一:在浏览器中预览当前文件。有时间的话,可能要写点从editplus转型到vim的东西。

    优点1:
    囊括了主要的浏览器:chrome、firefox、oprea、ie、ietester(随自己喜欢可以增加更多,比如safari),浏览器的简称:cr、ff、op、ie、ie6、ie7、ie8、ie9、iea,简称、路径以键值对方式都保存到browsers中。
    上面的简称大部分人应该都明白了,ie就是系统默认的ie,最后一个iea是在ietester中使用所有版本的ie同时预览(IE5.5-IE9)。

    IETester 的Arguments可以见 : http://www.my-debugbar.com/wiki/IETester/CommandLineArguments

    优点2:
    本地文件自动以file://开头或http://开头的两种方式预览。如果文件在htdocs就用http方式打开,否则用file方式。
    file://开头的地址预览html一般没问题,但是预览php或aspx等就显得苍白无力了。这里可以设置一个htdocs/wwwroot的文件夹地址,然后预览的时候匹配文件是否在这个文件夹内(支持子目录),如果在就用http://方式打开,否则就用file://方式。

    无论前端开发者或者程序员都及其适合。自夸完毕,下面说下使用:
    在_vimrc中加入下面的代码,然后按F4+cr - 在chrome预览,F4+ff  - 在firefox下预览……。方式就是F4+浏览器简称(应该比用F4+1234的数字形式便于记忆)。当然,这个完全可以自己diy的。

    下面fuc里面的浏览器地址需要自己修改,我的文件夹目录和你的可能是有不同的。还有htdocs文件夹、本地的预览的端口号,我使用的是8090.