Coding Serf - 2013

利用HTML5重力感应识别手机的甩动方向

去年的圣诞节怎么过的已经忘了,不知道是不是和海底捞有关,反正是和“圣诞捞”(FlipScript在2012年圣诞节的活动网站)有关。 先简单地介绍一下“圣诞捞”的玩法:网站分为PC端(Flash开发)和手机端(HTML5开发)两个部分,用户先要通过PC端打开网站获取手机端URL(或者直接发送URL短信到手机),在手机端输入并打开此URL,就可开启与桌面端...

iOS上用JS控制滚动时position:fixed元素错位的Bug

“你滚与不滚,它就在那里,动也不动!” 最近项目中有个sidebar的控件,即始终紧贴在浏览器左或右边的,通过点击这个sidebar中的button来完成相应的页面交互。可是页面在iOS5.1中显示时,这个sidebar却表现地有些蹊跷…… 当用脚本控制页面滚动时(如scrollTop();),这个被fixed的元素你看到它的确是没有动,此时你再想点击这个sidebar上的...

自定义下拉框NO.2——致我们终将改头换面的<select>

这次的select是纯CSS,所以只是改头换面,不像之前都“洗心革面”了…… .feedback-dropdownlist{display: inline-block;position: relative;width: 48%;height: 35px;overflow: hidden;background-color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.7) inset,1px 1px 8px rgba(0,0,0,.2);-moz...

用jQuery模拟backgroudSize的cover效果

CSS3新增属性backgroud-size有个cover值你知道吧?显示个什么效果你……不知道的话来这里看看。 But!兼容性呀兼容性!虽然modernizr也收集了一个jQuery的polyfill插件,可惜我的ie6-7下不起作用。issues里也有人反映,只是作者貌似NB大发了…… 我和这个polyfill的作者一样不想把时间花在给(对我而言)别人的插件找bug上,所以就自己写了一个,当然这代码写得太以自我为中心了...

兼容性不完全笔记

1.清除浮动[2013-04-09] 方法一:下一个兄弟元素{clear:both;}. 缺点是要多加个空元素。 方法二:设置父元素是{display:block; zoom:1; overflow:hidden;}.不需要冗余元素。 实践:父元素包含浮动子元素且未设置高度时,父元素高度将变成0。此时可通过设置父元素float:left;才会有自动高度,但在ie6中当用DD_belatedPNG修复父元素中的png图片时,会导致失效,即图片不显示,...

BEM进化史

  特别声明:此篇文章由David根据Maksim Shirshin的英文文章原名《The Evolution Of The BEM Methodology》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2013/02/21/the-history-of-the-bem-methodology以及作者相关信息 ——...

CSS3随意画之Transform3D变换

昨天Boss拿着手机过来:“David,看这效果,咱能做不?!” 我一看3D的??心想CSS3D还没普及,直接就说“做不了……” “为什么?!?!?!” “3D现在还没标准化,不兼容呀?!这个是APP吧?!” “这是个网页……” “……那一定是用了插件吧……” 出糗了!!!狂汗呀!!!虽然CSS的3D尚未普及,但是webkit内核的浏览器支持得不错,加之手机端大多浏览器内核是webkit的。 啥也不说了,开始...

关于单页模式网站的历史记录

之前,在做FlipScript官网的时候,将网页前端架构定位在单页模式,故页面之间的切换是由Ajax加载而来的。当时并未考虑iframe,也没什么理由。如果你有更好的思路,欢迎共享。 单页模式——顾名思义,网站在单个页面里完成浏览,不会轻易发生跳转。如果单纯地用Ajax来做的话,浏览器的url是不会发生改变的,这样浏览器也就无从记录网站的浏览历史。所以为了让...

BEM思想之彻底弄清BEM语法

  特别声明:此篇文章由David根据csswizardry的英文文章原名《MindBEMding – getting your head ’round BEM syntax》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax以及作者相关信息 ...

文章归档
友情链接
参与项目
  • 830.格林学堂
  • 840.精优教育
  • 850.拯救红包君
  • 860.不开心抢包包
  • 870.打大折
  • 880.金地广场(西安)
  • 890.Engine Group
  • 900.Starbucks Mooncake
  • 910.宝存科技
  • 920.诺优能
  • 930.Zuse
  • 940.新吉士
  • 950.KSNY x Darcel
  • 960.澳大利亚官方旅游网站
  • 970.圣诞捞
  • 980.FlipScript
  • 990.五维互动
Copyright © 2013-2014 Coding Serf | Powered By WordPress |Theme design By Coding Serf