CSS3实现文字输入效果

今天我们要来分享一款很酷的CSS3文字输入效果,它可以在屏幕上模拟我们键盘输入文字的效果,就像打印机打印一样。另外,接收文字输入的编辑器的外观也比较漂亮,当然文字的字体和颜色大家可以自行设置。

css3-text-type-effect

在线演示源码下载

使用uncss去除无用的CSS

从代码的角度讲,你知道什么是比往网站或应用里添加功能更好的事情吗?删除那些没用的东西。也许是一些代码、图片、或相关依赖等,就像扔掉家中储存柜里没用的产生异味的存货。我经常用ImageOptim来优化我的图片的体积,这既能提供页面加载速度,又能减少带宽流量。然而,你知道有什么工具能找到页面中样式文件里无用的CSS吗?之前我介绍过一个用JavaScript找到无用CSS的方法,但事实上,我们并不想知道哪些CSS规则是无用的,我们想要的是一个没有多余CSS的干净的样式文件。所以,这个叫做uncss的NodeJS工具就是我们要找的了。下面我们来看看uncss是如何使用的!

一个基本的用法是直接在命令行窗口里输入uncss命令:

uncss http://www.webhek.com > styles.css

执行输出的结果就是一个你想要的、剔除了所有无用的CSS规则的完整的样式表文件。那uncss究竟是如何做到这些的呢?让我来一步步告诉你:

  1. 首先PhantomJS会加载整个HTML页面,然后执行JavaScript。
  2. 接着从HTML页面里提取页面中所有的CSS样[......]

阅读全文>>

响应式CSS3 Tab菜单 带小图标菜单

这次要介绍的这款响应式CSS3 Tab菜单非常不错,它看起来挺简单的,而且设计也干净利落,但是Tab菜单的实用性很强。每一个tab项都有文字和小图标,当屏幕宽度变小时,比如在手机上浏览,那文字会自动隐藏,只剩下小图标。

css3-responsive-tab-menu

在线演示源码下载

HTML5 SVG圆盘时钟动画 5种时钟样式

今天我们要来分享一款基于HTML5和SVG的圆盘时钟动画,首先,圆盘时钟的时间是和你的本地时间同步的,因此,你完全可以用它来看上网时间。另外,这款HTML5圆盘时钟提供了5中不同的盘面样式,有带刻度的和不带刻度的,还挺实用的。

html5-svg-clock

在线演示源码下载

jQuery操作腾讯地图API 可标注地图位置

今天我们要来分享一款jQuery地图插件,准确的说,它是利用了腾讯地图的API来实现的。我们不仅可以像使用百度地图和谷歌地图那样移动和缩放地图可视区域,也可以选择需要定位的省份地区。最重要的是你可以在地图上标注信息,保持后方便下一次查找。

jquery-tx-map-api

在线演示源码下载

给想成为程序员的大学生的8个建议

本文是html5tricks原创翻译,转载请看清文末的转载要求,谢谢合作!

我在Groupon的其中一项工作就是帮助公司招聘一些优秀的开发人员,因此我也可以算是Groupon开发团队的代言人,主要任务是发布一些招聘信息、解答疑问等。在上周,我对两个来咨询夏季实习工作的大学生进行了回复。

我认真回顾了在邮件中回复的内容,并总结了8点我认为有价值的建议,送给梦想成为程序员的大学生们:

1、如果你在大二的时候就开始接触外面的公司,那么你这种做法是值得表扬的。很多大学生都要等到毕业前两个月(甚至更晚)才去考虑找工作的问题。即便你不能获得实习的机会,那也要经常去面试接触一些企业,争取给别人留下好印象。

2、如果你对一种成熟的技术感兴趣,你可以先从书本上去了解相关的基础知识。要注意理论知识和实践练习相结合,书本上的知识都是通过精心编辑的,会教给你一整套系统的学习要点。但是也不能只看书,要动手做里面的练习。比如你要学Rails,可以阅读《Agile Web Development with Rails》,它会教你如何在一周内开发出一个完整的电子商务网站。有时候实践往往先于理解[......]

阅读全文>>

编程真是一件枯燥乏味的事情吗?

本文是html5tricks原创翻译,转载请看清文末的转载要求,谢谢合作!

当我告诉人们我以写代码为生时,他们翻着白眼问我编程是不是特无聊?有许多编程博客告诉我们,如果你想要精于编程,那么就必须先热爱编程。那么,这是不是意味着如果没有激情,那你就写不出一行代码?我认为,这种说法不仅完全错误,而且非常愚蠢。下面让我解释一下我是如何得出这个结论的。

每年三月,所有爱尔兰青少年要作出一个会影响他们一生的决定。那正是他们在中学的最后一年(相当于我们的高三),为了能进入心仪的大学就读喜欢的专业,避免让父母和老师失望,他们必须在超过6门的考试中尽量拿到最好的成绩。那一年可能是我这一生中最有压力的一年,现在想起来都觉得有压力。

压力大不仅仅是因为有考试,还因为你必须决定你的未来要从事什么工作。有的甚至感觉压力大得有些吃不消,因为经常早起晚睡,废寝忘食。

回过头来看现在,我的长辈经常告诉我要做你喜欢的或者感兴趣的事,但不要做一些不会是一份好工作的事情。虽然我相信,当人们说你应该遵从你的激情的时候,他们的出发点是好的,但我还是认为这是个错误的建议。

告诉你个秘密:我一开始并[......]

阅读全文>>

jQuery/CSS3淡入淡出下拉菜单

今天我们要来分享一款非常简单的jQuery/CSS3下拉菜单,这款菜单一共有两级子菜单,在子菜单展开的时候伴有淡入淡出的动画效果,菜单的背景是黑色的,显得比较庄重和大气。另外,如果能将菜单配置成任意级的就更加完美了。

jquery-in-out-dropdown-menu

在线演示源码下载

jQuery滑过头像图片展示个人信息效果

这是一款经典的jQuery图片插件,同时,也可以是一款jQuery提示框插件。这款jQuery插件的功能是当你把鼠标滑过头像图片缩略图时,即可弹出头像对应用户的详细个人信息,弹出的标签虽然不大,但是还是能容纳很多个人信息的。

jquery-image-personal-effect

在线演示源码下载

如何编写更棒的代码:11个核心要点

本文是html5tricks原创翻译,转载请看清文末的转载要求,谢谢合作!

作为一个合格的程序员,有太多的理由促使你去编写干净利落且可读性强的代码。最重要的是因为你编写的代码,将来会有很多人一次次地阅读。当你有一天回过头来看自己的代码时,你就会明白编写优雅的代码是多么的重要。另外,如果别人来阅读你编写的代码,你是否想知道别人看到那些烂代码无比抓狂的感受。因此,花多一点的时间去编写优雅的代码,将来说不定会给你节省更多的时间。

那么,如何编写更棒的代码,下面是11条基本规则:

  1. 保持方法简短扼要
  2. 永远永远不要将同一个变量用于不同的目的
  3. 尽可能让变量和方法的名称能够描述要实现的功能
  4. 尽可能将变量定义在最靠近它们的地方
  5. 不要出现让人费解的数字
  6. 要像对待朋友一样对待你擅长的语言
  7. 不要逆常规而行
  8. 千万小心过早的优化代码
  9. 要常常重构经过测试的代码
  10. 不要沉溺于过度的设计技巧
  11. 随时随地学习新的知识

下面我们来对每一点详细展开介绍。

1、保持方法简短扼要

尽管很多人都遵循这条规则,但是它依然很重要。总的来说,编写的方法最好能在首屏完全显示[......]

阅读全文>>