CSS

使用CSS3开启GPU硬件加速提升网站动画渲染性能

GPU硬件加速

  最近几周一直在搞自己的个人网站,一来是为了总结一下近几年自己的前端职业历程,二来是希望把这个网站做成自己的Web版个人履历/简历。网站首屏会有一个跟随鼠标进行空间透视移动的DOM动画效果,这里用到了一些JS逻辑,由于涉及到动画和性能问题,这里简要总结一下开发过程中遇到的一些问题。想来博客已经近两年没有更新过了,甚感愧疚,2014年一定一定一定会勤快些的!

Read More

CSS, HTML5

HTML5和CSS3工具资源汇总

HTML5和CSS3工具资源汇总

  HTML5CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局,因为他们给这个领域带来了太多太多令人惊奇的新特性!我用大量时间学习了HTML5和CSS3技术,它们的动画、圆角等特效会令你震惊…在后面的内容中彬Go将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持,但我们作为前端开发从业者,有必要掌握它们。彬Go希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。
Read More

CSS, JavaScript, jQuery

用CSS3制作50个超棒动画效果教程

50个css3技术教程

  CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如SafariChrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)
Read More

CSS, 资源

你需要了解的21个CSS惊人技巧

21-css-技巧
  级联样式表(CSS)在当代Web设计中已经成为重要的环节,如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及,越来越多的高质量CSS教程涌入互联网,让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧,相信其中必有你想不到的。还等什么,继续往下看吧!
Read More

CSS, HTML, 资源

99款高质量免费(X)HTML/CSS模板

div-css-xhtml-模板

  大家都清楚一个网站象征着你和你的品牌,这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注,它并不代表最基本的(X)HTML/CSS很丑、很杂乱和单调。彬Go将向大家推荐99个高质量的免费(X)HTML/CSS模板,你可以用于自己或公司企业的网站。
Read More

CSS

5个CSS3技术实现设计增强

css3-新特性-教程

  层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新属性没有得到官方的确认,但是一些浏览器已经开始支持来自CSS3得新特性了。
  但问题是——许多浏览器支持了,唯独最主要的Internet Explorer浏览器仍不支持!
  很多人尤其是中国的前端er们会觉得既然IE不支持,那就先不关心CSS3。其实不应这样的,CSS3现在能为我们带来什么好处呢?至少现在我们就能使用那些CSS3的新特性来进行设计增强。如果你赞成渐进增强这个理念的话,我想你一定会赞同彬Go的看法的~~
Read More

CSS, HTML5

一起感受HTML5和CSS3的能量

html5-css3-教程

  Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
  虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…
Read More

CSS

5步让你的CSS样式表成功减肥

css-压缩-减肥

你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。
Read More

CSS

提升你设计水平的CSS3新技术

CSS3新技术

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音,并详细说明了每个新技术目前有哪些浏览器兼容。彬Go本想将本文翻译成中文版和大家分享,但发现已有国人完成翻译,所以就偷个小懒,转载一下人家的翻译,在此感谢前端观察的博主辛苦翻译本文,为大家贡献了如此珍贵的学习资料。

如果你热爱前端开发,你对CSS感兴趣,那么你肯定不可错过这篇文章。
Read More

CSS, HTML

dl,dt,dd标签 VS 传统table实现数据列表

dl列表和table表格哪个更适合数据列表

近期博客忙着搬家,所以将近两周的时间都无法访问,还好现在已经解决,从windows主机迁移到了更适合php+mySQL环境的Linux主机,速度方面是否有所提升还不太清楚,总之现在博客恢复正常,还是比较欣慰的。从今天开始彬Go会一如既往的为大家奉献更多更好的技术文章,希望大家继续捧场,学到更多有用的东西。好了言归正传….

过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难。现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松…
Read More