纯CSS实现摆动的挂钟

纯CSS实现的挂钟。只是做了秒针的转动,时针和分针都是静止的。做动画展示用,不要当真。: D

钟摆使用常用曲线速度(linear,ease,ease-in,ease-out,ease-in-out)都不太自然,于是用css的贝塞尔曲线(cubic-bezier)来调整。

贝塞尔曲线工具:http://cubic-bezier.com/

 

See the Pen pure css pendulum clock by kitty wei (@kittywei) on CodePen.

Brackets-一个懂web设计的开源现代编辑神器

从第26版测试版开始,一直用Brackets至今,根本停不下来,龟速的DW就再也没打开过!当更新到1.0正式时,激动的心情简直难以言表。说Brackets是神器一点都不为过,它是多么懂web设计,懂前端啊!

捡几点经典实用的特色说。

1. 轻量,界面简洁。左边文件树,右边编辑面板。

brackets

2. 可以更换主题,即改变界面颜色字体,不喜欢白花花的底色?换!

brackets

3. 英文的?!必须改成中文。 Debug->Switch Language

brackets

4. HTML内快速编辑css(光标定位在要添加css的标签、类名、ID名上并Ctrl/Cmd+E)

5. 图片,颜色预览。鼠标移动到图片名,颜色代码上。光标定位在颜色代码上并Ctrl/Cmd+E可调用颜色面板选色噢。

6. 实时预览。Ctrl/Cmd + Alt + P打开实时预览功能,页面自动在chrome浏览器打开,文件有修改浏览器自动刷新,再也不用F5刷新页面啦!欢呼!!

7. 丰富的扩展插件。必装插件推荐:

  • Emmet:快速编辑器,让你编码健步如飞。
  • Code Folding:代码折叠,Brackets本身没有代码折叠功能,因此装一插件。
  • Beautify:格式化代码,让你的代码看起来美美的。
  • CSS Class Code hint: 输入class或id时会出现css里面的class/id。
  • Brackets Key Remapper: 修改快捷键

8. Extract for Brackets。

最高大上的功能来啦!!此神器可以预览PSD,点击图层,然后输入css属性,看到没有,图层的样式自动跑出来啦,有木有有木有?!width、height、left、top、color、background-color、opacity应有尽有,还能测量两个元素之间的距离,再也不用到PS里手工测量和偷瞄CSS Hat的代码啦!如果是文字图层,还可以点击copy text,文字就到粘贴板上啦。如果是普通图层,填写background或img的时候,还会自动切图到你的文件夹耶!要不要这么霸气呀?!

虽然目前只是预览版的,不能像copy text那样直接复制css,但是之后应该会加上的吧^_^网页版的是可以直接复制css的噢。好激动嘿嘿!

只是好像有个问题,有时图层会丢失。网页版的却很稳定,期待以后的改进吧Y(^_^)Y

 

你还在为DW的缓慢行动而烦恼吗?你还在编辑器和PS之间切换而晕头转向吗?你还在为拷贝文字点到手酸吗?那还等什么,赶紧拿起手边的电话订购吧,订购电话5151511,不要犹豫,不要彷徨,就是现在,先到先得!额。。。等。。。人家免费的好吧!去官网下载就好:http://brackets.io/

css设置下拉列表select的padding值

话说这原生select标签,在每个浏览器中自是各有各的面相,也只接受少数css属性的打扮,Safari里的select最为顽固,坚持素颜绝不动摇。可是艺术感超强的设计师们可不会将就,于是,聪明的程序员哥哥们开发了各种各样的select美化插件,许多杰作操作简单,灵活多变,美轮美奂,膜拜中。。。

近来遇到的一个问题是,需求只是要给select加上边内补白,就是padding啦,FF、Chrome、IE都很给力,而Safari里根本不起作用啦!如果装个美化插件,感觉有点像是拿大炮打蚊子,还得麻烦程序员哥哥去读插件的使用文档,出了问题要我提头去见(夸张),原生select多简单哪!

text-indent可以使select里的文本缩进,也能实现左边内补白的效果。可是右边被切掉了啊啊啊。。。如图:select

世界如此美妙,我却如此暴躁,这样不好,不好。

于是决定先应用padding,再对webkit浏览器做一个简单的hack。将-webkit-appearance属性设置为none,清除掉select的默认样式,再用css模拟一个select的样式,于是,想要多少padding值随我折腾,看代码:

Windows的FF、Chrome、IE、Safari,Mac的FF、Chrome,Safari以及iPhone4和android chrome(忘记机型)都没问题,别看说得这么啰嗦,其实只有1点,就是hack,如大神有高招,请给我留言。

PS:妹纸我弄这,是不是太闲了!

齐全的浏览器hack方法

browserhacks出来有一段时间了哇!网址:http://browserhacks.com/

所有冷门的,热门的,偏门的,正门的,前门的,后门的…应有尽有!

虽然平常编码规范,并且抛弃IE6,7,因此较少需要hack(得瑟一下…),但是遇到一些极品问题,hack还是需要滴!

作者说得好哇,hack并不总是完美的解决方案,但是在修复一些奇怪的bug还是很有用滴!

 

css clip属性剪裁元素

几乎忘了clip这个东西,很少用,但要用起来很好用^ ^。

解决溢出问题,习惯用标签把图片包起来,设定宽高,overflow hidden。

可是有一次,程序员同学完成开发后才知道需要图片剪裁,而那些图片外层木有加标签。要用overflow hidden的话,得要找忙碌的程序员同学修改html代码,还是不要了吧,不是有clip的吗?

<code>clip:rect(top,right,bottom,left)</code>

clip 的唯一合法形状值rect(left,right,bottom,left),元素必须为绝对定位(position:absolute)方能有效。

剪裁一张图片:

<code>img
{
position:absolute;
clip:rect(35px,260px,255px,95px);
}</code>

top, right, bottom, left 值参照下图,对号入座:

clip

浏览器支持情况:http://caniuse.com/#search=clip

去w3school试验一下:http://www.w3school.com.cn/tiy/t.asp?f=csse_clip

搜索框(Search)语音搜索

让搜索框多出一个话筒图标,实现语音搜索。

search

在input标签中加入x-webkit-speech即可。

<input type="text" class="" name="" id="" x-webkit-speech>

限制语音种类:

<input type="text" class="" name="" id="" x-webkit-speech lang="zh-CN">

去掉语音无意义词:

<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech x-webkit-grammar="bUIltin:search">

以上办法只适用于webkit浏览器,并且html无法通过W3C验证 T T

Less中的嵌套,混合,带参数混合,运算

Less如其名,是让css的繁琐编码变less的利器。一些基础用法便能解决项目中的多数问题。

1. 嵌套

以a标签为例,通常需要定义a标签及其hover,focus的样式。

css:

a{color:#000;}
a:hover{color:#fff;}
a:focus{color:#ff0000;}

真正的项目中,a标签或许拥有一个类名,并且这个类名较长。

于是复制粘贴类名->写样式->再粘贴类名->加上:hover->写入样式->再粘贴类名->加上focus->写入样式。

或者再有visited样式,接着复制。。。而Less不需要我们这样做。

Less:

a{
  color:#000;
  &amp;:hover{
    color:#fff;
  }
  &amp;:focus{
    color:#ff0000;
  }
}

只需要&:hover, &:focus,不管类名是长是短,是好是坏,再也不用复制它了!”&”是链接符:

有“&”:

a{
  &amp;.tag{
    color:#fff;
  }
}

编译为css(类名为tag的a标签):

a.tag{
  color:#fff;
}

无“&”:

a{
  .tag{
    color:#fff;
  }
}

编译为css(a标签下面的类名为tag的标签):

a .tag{
  color:#fff;
}

2. 混合

定义一个class,里面包含样式代码,如:

.filter{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h3{
   color:red;
   .filter;
}

编译为css:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

3. 多参数混合

像上面的混合,可以在其他标签同样调用.filter。但上例的透明度值为80%,而其他地方调用的时候需要改变这个值而其他不变,就需要将值以参数形式传入。

.filter(@percent: 80, @float:0.8){
    filter:alpha(opacity=@percent);
    -moz-opacity:@float;
    -khtml-opacity: @float;
    opacity: @float;
}
h3{
    color:red;
    .filter;
}
h4{
    color:blue;
    .filter(50,0.5);
}

h4中,将透明度的值以变量的形式传入。编译为css如下:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h4{
   color:blue;
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

无需复制长串css,随意更改参数,随意调用吧^ ^

4.运算

响应式设计中常常需要计算百分比用于大小、定位,Emmet能够帮助计算,但只能保留最多两位小数,并且需要快捷键把结果计算出来,必要的时候手动改成百分比。Less只需写好表达式,编译时会计算结果,于是再也不用关心结果是多少。

div{
   width:550/810;
}

这样的结果是:0.6790123456790124。可是计算宽度,肿么可以用小数点咧??

于是(参考:http://lesscss.org/functions/#math-functions-percentage

div{
   width:percentage(550/810);
}

结果为67.90123456790124%。正是我想要的!够精确!

 

Less中国官网:http://lesscss.net/article/home.html

 

初识yeoman

最近写Less,写着写着发现重复性的、繁琐的工作越来越多,less找软件编译,图片找软件压缩,文件找地方合并。。。于是搜索有一些前端自动化开发的工具,试了几天Grunt,几行命令一切搞定,果然是提高效率,节省体力的神器。

Grunt,一个javascript任务运行工具,可以帮助编译less,sass,压缩图片,合并js文件等等等等。现在有很多介绍Grunt的文章,比如: Grunt 入门教程一:开始使用Grunt(翻译自官方教程)Grunt教程——Gurnt任务的配置。当初接触的时候,也是这些文章一篇篇读下来的。

Grunt有很多实用插件,根据项目需要,其中的contrib-less、contrib-imagemin用得最多,因为写Less,contrib-less能迅速帮助编译并且压缩,再也不需要把编译软件打开,再把less文件选中然后点击编译了。当然,这还是小事,一个项目通常五六个到十多个页面,每次写less,html里面要写上style.less,并且加入编译less的js,可是less编译成css后,还得手动把html里面的style.less改成style.css。当然,DW里面批量修改,没问题,可是真心觉得活干多了!怎么办呢?yeoman!!

由于基础不好,yeoman也是研究了数个星期才弄到可以顺利开展项目。yeoman,前端开发自动化流程的利器,别的不说,至少能解决自己目前项目的所需。

前端项目可以更简单—Yeoman入门指南(1)这篇文章真心不错,不仅介绍了yeoman是什么,还有分享了安装教程。于是,我也想要分享一下自己的使用心得,因为刚开始时遇到真心不明白的问题。

1. “Yeoman其实是三个工具的集合:YOGRUNTBOWER” –前端项目可以更简单—Yeoman入门指南(1)

所以,要安装yo、grunt-cli、bower。在安装grunt-cli之前,先要安装node.js。因为Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。

下载安装好node.js后,可以查看node.js版本,

按住Win+R,输入命令:node -v

node

2. 接下来用npm安装yo、grunt-cli、bower。

命令:npm install -g yo grunt-cli bower

看到下面的提示,那就安装成功了:

yo

3. 上面的完成之后就可以安装工程模板。

webapp模板是基于sass的,由于个人是Less使用者,所以拿lessapp举例。

安装lessapp模板,输入命令: npm install -g generator-lessapp

less

 

完成!以上命令全部在根目录运行。

4. 模板安装好以后,需要进入项目目录(输入命令:cd “项目路径”),为你的项目创建一个less app模板。

项目目录而不是根目录下,输入命令:yo lessapp

选择项目中要用的工具、框架:

lessapp

去到项目文件夹,可以看到创建好的less app模板:

folder

终于完成啦!!看看是否成功,输入命令:grunt server,于是浏览器会自动弹出一个欢迎界面。

可是。。可是。。。为什么弹出来的页面没有样式!!百思不得其解啊!

后来才发现,在app这个文件夹下,应该有一个名为bower_components的文件夹,里面有bootstrap、jquery、modernizr(如果你勾选了的话)文件,而我的文件夹里面并没有!怎么回事呢?

在根目录下输入命令 bower -v,版本号为1.3.1,说明bower已经安装成功,可是它并没有为我安装bower_components文件。再用bower安装font-awesome试试,进入项目目录:bower install font-awesome,出现如下提示:

bower ENOGIT git is not installed or not in the PATH

原来如果用windows安装bower时,必须要正确安装msysgit,参考:A note for windows users

安装msysgit后,再一次 yo lessapp,查看app文件夹,如下:

app

输入命令 grunt server,欢迎界面有样式了!

welcome

立即进入coding状态!

 

参考:

Grunt:任务自动管理工具 

前端项目可以更简单—Yeoman入门指南(1)

Yeoman:Web 应用开发流程与工具

【Yeoman】热部署web前端开发环境

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前端工程构建工具——Yeoman

Yeoman:强大的web构建工具

让滚动的内容在IOS上滚动动作更平滑

默认情况下,网页在IOS上的scroll滚动就像在冰面上推冰球,轻轻一推,它会自动滚动并且减慢速度直至停止。而网页内容中同样需要将溢出内容以scroll的方式展示,直接使用overflow:auto并不能达到同样的效果,用手指触摸滑动时会变得生涩卡壳。于是需要给元素加上这样一个特殊属性:

-webkit-overflow-scrolling: touch;

例:

HTML:

<div class=”touch”>
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS:

.touch{
width: 300px;
height: 200px;

overflow-y: scroll; /* 重点:必须是scroll而不是auto */
-webkit-overflow-scrolling: touch;/*关键*/
}

 

原文链接(查看案例):http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/