使用Google Font API为网页嵌入个性字体

网页设计师都知道,在网页中可以使用的字体非常有限,中文字体使用最多的就是“宋体”和“黑体”及新流行的“微软雅黑”,当然英文字体能使用的也是只有那几个。想要使用个性字体除非使用图片,但图片与SEO又是天敌,除了图片外还有JS脚本和FLASH转换等方法,但这些方法都不具有文字的可识别特性。

这篇要介绍的就是可以让你非常方便的在制作网页的时候,使用除默认字体外的“个性字体”。先声明一点,这个个性字体不包括中文,因为中文实在是太强大了,怎么说也好几千年历史呢(呵呵),所以字库都是动辄几M,甚至十几M大小,任何人也不会想要看看你的字体就去下载那么大的字库吧,我们还是死了这条心吧。

继续进入正题……

要说使用方便,google 大神的产品个个体验都是一流的,一个小小的API也是那么方便就可以调用了。

看图吧还是:

gfont1

够个性吧,而且是活生生的字体哦,不是图片!

再看个图,你就知道怎么用了,真是太方便了!哈哈

继续阅读“使用Google Font API为网页嵌入个性字体”

CSS3 速查手册 + 参考学习资料整理

CSS3,出道有段时间了,作为一位前端开发人员,CSS3中的很多新特性肯定特别吸引人吧,反正特别吸引我,她能方便的实现圆角,阴影,渐变,还有她强大的选择器!她的出现让我感觉到了作为一名前端开发人员真正的乐趣,我们不用借助任何图形设计软件就能创造出优雅的网页!她让我彻底抛弃感觉很臃肿又拖后腿的图片(当然我不是说完全抛弃,它还会辅助我们创造更优美佳作。呵呵)!

css3sheet

这是英文原版,就像看电影一样,还是原汁原味的好!

查看原图JPEG版  PDF版下载

原文中还有CSS2.1的

 

另附我Google的CSS3其他参考和学习资料

继续阅读“CSS3 速查手册 + 参考学习资料整理”

开源Web开发工具目录:Open Web Tools Directory

Open Web Tools Directory

 

此目录分为:设计(Design)、源代码(Code)、代码调试(Debug)、测试工具(Test)、开发辅助工具(Deploy)、文档编写(Docs)6大类别,这些开发工具都很大的为我们的工作学习节省了80%的精力和时间!我谨代表我自己感谢!那些开源大神们!真挚的感谢!当然我也会尽自己所能给予开源作者们一些捐助!

地址:http://tools.mozilla.com/

 

顺便哀悼一下伟大的云端存储服务:Dropbox

再顺便Fuck!一下鸡哎服达不溜!

强大:基于jQuery UI的多层级手风琴效果插件

见过JS做的手风琴效果插件,但这么强大的第一次见!

上图先:

infogridexample

 

演示是一定要看的:http://css-tricks.com/examples/InfoGrid/

如果你看到示例中的效果跟上图有差异请不要惊慌,因为默认样式表里用到了CSS3版才有的选择器属性,部分版本浏览器肯定是不支持的,像微软的IE!但并不影响使用,你完全可以自定义样式表。

它的的主要结构是通过HTML的DL定义列表实现的,所以代码很容就能看明白,而且配置起来也很方便就几行JS代码,老外的东西就是牛逼!

infogridexampledl

下载和配置:http://css-tricks.com/grid-accordion-with-jquery/

提示:作者提供的压缩包里的示例文件是PHP文件的,有些同学可能没有配置环境,那也没关系,只要把PHP文件里的PHP代码删除然后另存为HTML文件就OK了!

Adobe Dreamweaver CS5 增强的前端开发功能

Adobe 近期发布了,CS5版本的设计及WEB开发工具,看到Adobe官网对 Dreamweaver CS5 的介绍,与 Adobe BrowserLab 的集成,是开发者更容易使用多个查看、诊断和比较工具预览动态网页和本地内容。并且集成 CMS 的支持,增强对 WordPress、Joomla! 和 Drupal 等内容管理系统框架的创作和测试支持。已经迫不及待想要试用一下了,虽然现在已经有破解了,不过还是等稳定点的版本吧。

一些截图预览:

cs5

 

大家可以到官网,了解详细信息

http://www.adobe.com/cn/products/dreamweaver/

COIN SLIDER 基于 jQuery的 JS 炫丽幻灯片插件

workshop

COIN SLIDER

jQuery Image Slider with Unique Effects

COIN SLIDER 基于 jQuery 在JS插件中拥有独一无二的切换效果

特点:

  • 多种炫丽的切换效果
  • 兼容多浏览器:Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • 方便安装和配置
  • 自动幻灯片
  • 导航提示
  • 轻量级(仅8K)
  • 图片链接
  • 完全免费
  • 完全自定义CSS样式表

演示和下载:http://workshop.rs/projects/coin-slider/

豆瓣验证:doubanclaim50f59e3ca33dbd36