优大网

标签存档: 前端开发

用来简化开发任务的20个JavaScript类库

摘要:所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。JS的首要用途是将编写的功能内嵌在HTML页面,并与页面的对象模型(DOM)进行互动。

很多JS库很容易和其他Web开发技术进行整合,例如CSS、 PHP、Ruby、和Java。许多程序库可以检测运行环境之间的差异,删除一些应用程序,以满足整合需求。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

1. Tracking.js

Tracking.js是一个独立的JS库,可以跟踪照相机实时收到的数据。跟踪对象既可以是色彩也可以是人物,当检测到某个特定的颜色时或人物/脸庞/身体出现移动的时候,我们可以触发JS事件。

2. Aristochart

Aristochart是一个不依赖于其它库的JS库,它能够使用Canvas创建静态的2D线形图表。这个库专注于打造客户化设计,提供多种选项用于更改设计、标签等等。

3. Hitch

Hitch是一个轻量级的JS库,能够向CSS文件添加表现能力。同时具备CSS预处理程序能力,比如添加前缀或变量,还有一些其他的功能。这个程序库有多个随时可用的表达方式,如“any of,all of,has…”,并允许我们定义任何一种方式(称为hitches)。

4. Cesium

Cesium是基于WebGL的JS绘图库,支持3种不同的视图:3D globe、2D map、2.5D Columbus View,相互转换只要一行代码而已!绘画各种形状,突出显示特定区域以及使用鼠标或触摸板与地图进行互动是非常简单的。Cesium作为一个独立的JS文件可以在所有主流浏览器上运行,包括手机上。

5. Two.js

它是一个2D的绘图API,一个优秀的JS库,用于较新的Web浏览器,可基于不同上下文绘制,包括svg、canvas和webgl。 这个库目前只支持形状(非文本或图片),允许导入SVG数据。当需要一起转变的时候,Two.js可以聚合多个有用的元素。其中还有一个内置动画循环方法来绘制各种图形,还具有使之个性化的多个选项。

6. Sequel.js

Sequel.js是一个轻量级JS库,有助于通过一个面向对象的API来构建SQL查询字符串,既可以在浏览器上运行,也可以在所有标准的SQL查询上运行。

7. Draggabilly

这是一个可以让页面元素可拖动的独立JS库,Draggabilly能够帮你轻松实现网页上各种元素的拖放操作。可以在一个限制的容器范围内拖动页面元素,对于每一个事件(start,move,end)都有回调,可以返回当前元素的位置。它可用于大部分浏览器(IE8+)并内置支持触摸事件。

8. Zebra

此JS库带有一串富用户界面组件,可以创建类似于桌面效果布局。UI元素由HTML5 canvas构建,由CSS着色,预期在所有浏览器中渲染出相同的效果。拥有30多个UI元素,包括grid、tabs、menu、form elements、menu等等。

9. Formula.js

这个JS库为Web开发者带来了大多数公式,公式列举了多重分类——日期/时间,文本,逻辑,金融等等。此外,除了在客户端运行,还在服务端(即将发布)上运行。

10. Chart.js

这是一个给人印象深刻的JS独立图表库,大小不足5kb的程序包,建立在HTML5 canvas之上。目前支持6种图表类型:直线图、条形图、雷达图、饼状图、柱状图和地区区域图。颜色、字体、边框、大小都可以根据用户需求自定义。

11. Flippant.js

这是一个迷你JS和CSS库,允许自动翻转桌面上的东西。不依赖任何其它类库,便于自定义,翻转功能效果好。

12. React

React是一个用来构建用户界面的JS库,可以高效灵活地与你之前使用的类库和框架结合使用。

13. PathFinding.js

PathFinding.js是JS里一个综合路径寻找类库,其目的是提供一个可以方便结合到网络游戏里的路径寻找类库。它可以在服务端运行,也可以在浏览器上运行。提供在线演示算法是怎样执行的。当具体使用路径寻找器时,你可以通过其它的参数来指示该用哪一个策略。

14. Reactor.js

这是一个用于响应式编程的轻量级类库。它提供的反应变量,当它们所依赖的的事物发生改变的时候可以实现自动更新。这和电子数据表的运作方式有点相似,当一个单元格的数值有所变化的时候,与其有联系的其他单元格数值也会变化。

15. Bootbox.js

Bootbox.js是一个很小的JS库,允许使用Twitter的Bootstrap模式创建程序对话窗口,不需要担心创建、管理或删除任何任何需要的DOM元素或JS事件处理程序。

16. Parallel.js

Parallel.js在JS里是一个用于多核处理的微型库,它的创建充分发挥了成熟的Web-workers API,JS的确是很快,但由于它的单线程计算模式,它缺乏了与其对等语言的平行计算功能。

17. SVG.js

SVG.js可以通过SVG进行操作和手动绘画,此库轻便独立,功能丰富,有内置方法可以创建各种形状——三角形、圆形、多边形,或自定义图形。

18. Packery

这是一个使用“装箱算法”的JS布局库,这是“补漏”的体面说法。Packery的布局可以是井然有序的,也可以是错乱无序的。元素可以被固定在相应的位置,也可以随意拖放。

19. FPS Meter

FPS Meter是一个简单的JS库,用来制作迷人的、快速的、可主题化的FPS仪表。他可以测量出每秒的帧数,帧之间的毫秒数,以及使用.tickStart()方法时,渲染一帧所需要的毫秒数。

20. Howler.js

Howler.js一个是JS库,通过默认方式运行在网页音频API上,当浏览器不支持时退回到HTML5音频。为了保证跨浏览器的兼容性,它允许接收多种文件格式。该库能同时缓存和播放多个声音,还有循环播放功能,淡入淡出效果和标准的多媒体控制功能。

原文:CodeGeekz

 

http://www.csdn.net/article/2013-07-09/2816111-javascript-libraries

超棒的30款JS类库和工具

摘要:对于Web设计人员和开发人员来说,手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快,所以拥有最新的工具是必不可少的。因此小编今天为大家整理了30个JS类库和工具以供参考。

当设计人员和开发人员真正快速便捷的使用JavaScript类库和工具的同时,他们的生活也就变得更轻松、简单。你付出的越多,它回报你的也就越多,这正是JS类库和工具需求量很大的原因。

对于Web设计人员和开发人员来说,手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快,所以拥有最新的工具是必不可少的。

可是要想找到质量高和效率高的工具并非易事,尤其是考虑到这种类型的工具它所带有的额外工具的可用性,并且,不是所有的工具都是高质量的。因此,寻找好的工具不仅仅是一项艰巨的任务,同时也很耗时。这就是为什么小编今天为大家提供30个JS类库和工具列表的原因。所有的工具都很有用,找出最能够满足你需要的那一个!

dynamo.js

这是一款使用很便捷的工具,它可以快速容易的创建HTML动态bits,为文本目录添加微妙效果。

Smoke.js

Smoke.js是一个轻量级且灵活的JS插件,只是用来替代原有的alert而已。它完全由HTML与CSS3构成,所以你能够自己添加样式来表现出个性化。

Holder.js

Holder.js可直接在客户端渲染图片的占位。支持在线和离线,允许轻松创建占位符,并快速使用可链接API(chainable API)风格。

Graphene

这款工具有惊人之处,有一个控制面板和绘图工具箱,使用起来很容易上手。

GMap

这是一款了不起的轻量级jQuery插件,用来将Google Maps插入到网页或者博客中。提供了更加简便的方法用于集成、管理和定制。

jPages

jPages是一个超给力的jQuery分页插件,它提供了很多丰富的新特性,例如自动翻页功能、可用键盘和鼠标滚动浏览、内容延迟显示、支持自定义分页导航菜单等等。使用起来很简单,效果也很出色。

Leaflet-JS Library

Leaflet是一个开源的基于移动开发的互动式地图JS库,代码量仅约28 KB。

JSZip

JSZip允许使用JS创建、阅读和编辑.zip文件。

Colors

这是一款非常有用的颜色处理类库,工作效率高,可以为项目选择正确的颜色。

Fitvids.js

这是另一款轻量、易用的jQuery插件,如果你需要你的视频能够自动适应网页的宽度,FitVids.js这个jquery插件可以帮助你。

Stroll.js

这些滚动效果是纯粹使用CSS3所实现的,其中所用到的JS仅是用来实现绑定和移除CSS样式。

Hammer.js

Hammer.js是一个轻量级的JS库,能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。

Socialite.js

Socialite.js 是一个用来方便生成各种社交网站分享按钮的JS库,提供多种按钮排列样式,可以根据客户需求实现个性化设置。

Retina.js

顾名思义,Retina.js是很棒的脚本,帮助你在Retina显示设备上制造出高质量的图片,这是一款便捷的开源软件。检查网页中的图片是否存在高清的版本,如果有将会替换显示。

KineticJS

这是一个很简便的HTML5 Canvas独立JS类库,使用这个类库你可以轻松的在桌面和移动设备上进行图形和图片绘制和修改,执行动画效果,或者和图形图片进行互动。

URI.js

URI.js是一个JS库,用于处理URLs地址。它提供了类似于jQuery风格的API(便利的接口和方法链),用于读写所有常用组件,像.directory和.authority一样的方式。

Crossfilter

Crossfilter是一个用来展示大数据集的JS库,在浏览器里有很多不同的多元数据集,支持超快的交互,甚至在上百万或者更多数据下都很快。主要用来构建数据分析程序。

DropKick.js

从头开始做下拉式菜单可能是非常耗时和繁忙的任务,因此DropKick出现了,它是一个下拉框美化插件,使用非常简单,直接为下拉框select调用方法即可,瞬间让你摆脱繁琐。

Foresight.js

Foresight.js可以在装载图片之前知道用户的设备是否可以显示高分辨率的图片。

Kartograph

Kartograph是一个简单且轻量级的框架,建立交互式地图应用程序无需谷歌地图或其他任何地图服务。

Patternizer – Stripe Pattern Generator Tool(条纹模式生成器工具)

Patternizer是一个在线的带状模式生成工具,可以帮助你简单快捷的创建复杂的模式。你同样可以把你创建模式的经验与别人分享,收集别人的意见。

Morris.js

Morris.js是一个轻量级的JS库,使用jQuery和Raphaël来生成各种时序图。

JavaScript Library Boilerplate

JS Boilerplate可以帮助你来轻松创建你自己的JS库,例如jQuery,Zepto,Prototype等等。

heatmap.js

Heatmap.js用来生成基于用户自定义数据上的Web热图,内嵌HTML5 Canvas元素。

uiji.js

uiji.js很独特,它是jQuery的反向,它不是使用CSS选择器来查找元素,您可以使用相同的语法来创建元素。

sigma.js

sigma.js是一个开源的轻量级JS库,用来绘制各种图形,使用的是HTML Canvas元素。它同样可以用来显示交互式的静态和动态图表。

Heyoffline.js

heyoffline.js是一个简单的JS库,当用户网络不可用的时候可以提示用户保存信息,以免数据丢失。

JavaScript Console–Debugging JavaScript Tool(JS调试工具)

从字面意思可以看出,它是一个JS调试工具,同时为移动Web Apps提供远程调试。

Yeoman

它旨在为开发者提供一系列“健壮的”工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。

Batman.js

这个框架就像它的名字一样酷——它可以创建丰富高效的单页面浏览器Apps。Batman.js框架利用CoffeeScript或JavaScript来快速构建Web Apps。由于其拥有强大的视图绑定和可观察的属性,所以它的代码非常简洁。

原文:Inspire Trends

http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools

加速编码的17款最棒的CSS工具

摘要:文章中收集了加速编码的17款最好的CSS工具;以帮助开发人员和设计人员简化工作。利用它们可以生成CSS菜单、动画影像、按钮、滑块、动画文本、CSS形状代码、图层还有很多其他的。

不用介绍,软件开发界的“地球人”都知道CSS,因为它是最流行的一种样式设计语言。学习和使用CSS已经不再是一件棘手的事,因为在网上可以获得很多信息教程和CSS工具。这些工具有助于你创造出有用的、有创新的Web应用程序,同时节省更多开发步骤和时间。

文章中收集了加速编码的17款最好的CSS工具;以帮助开发人员和设计人员简化工作。利用它们可以生成CSS菜单、动画影像、按钮、滑块、动画文本、CSS形状代码、图层还有很多其他的。希望这个列表对你的开发工作有用。

1. Topcoat : CSS for Clean and Fast Web Apps

Topcoat是一个程序库,包含CSS类用于创建表格元素、按钮、复选框、滑块等。这个轻量级的工具可以让你设计的网页或者App看起来相当不错。

2. PCSS : Shortcut Oriented Server Side CSS3 Preprocessor

PCSS是一款由PHP驱动的CSS预处理器,它可以帮助开发者通过定义变量、类测试、默认单元和服务端浏览器细节,以达到快速编写CSS代码的目的。PCSS使用PHP5来实现服务端处理,因此正在运行的网站服务器上需要具备这个PCSS版本。

3. Skeleton

Skeleton是一款较小的CSS文件集合体,它可以帮助开发者快速创建适配任何尺寸的网站,无论是在17寸笔记本屏幕或iPhone上。Skeleton的构建基于三大规律:快速响应到手机,迅速启动和独一无二的风格。

4. CSS Menu Maker

这个工具帮助用户轻松创建CSS下移菜单。CSS菜单编辑器提供网络专业人员和工具,帮助开发人员构建个性化的、跨浏览器相兼容的CSS菜单,同时还为所有的CSS菜单和设备用户提供源代码,以便下载和调整代码。

5. Sencha Animator

这是一个桌面应用程序,允许用户创建专门用在触摸屏移动设备和Webkit浏览器上的CSS3动画。 Sencha Animator还可以协助用户创建动画文本、图片、倾斜按钮和内嵌分析。

6. CSS Form Code Generator

CSS Form Code Generator可以制作布局好看的表格,也可以制作出布局简单的色彩表。这个“Code Maker”生成的CSS布局代码也可以为这些表格添枝加叶。

7. PrefixmyCSS

PrefixmyCss可以简简单单的为CSS3代码添加前缀。用户必须复制CSS代码到窗口才能添加前缀,供应商已提前在代码上添加了前缀,用户可安全放心的替换旧的代码。

8. Sky CSS Tool

Sky CSS Tool允许你创建CSS类时几乎不需要使用手写代码。用户可能需要与JavaScript相兼容的浏览器来确保正常运行。

9. Spritemapper

Spritemapper是一款可以合并多个图片的应用程序,为相应的片段生成CSS精确位置。此款工具可以帮助开发者优化可用空间和加载时间。

10. CSS Compressor

CSS Compressor通过压缩CSS来提高加载速度,还可以节约带宽。依据你对CSS的压缩程度和代码的易读性,它提供了三个级别的压缩。

11. Patternify

Patternify可以帮助你生成漂亮的CSS模板。

12. CSS Text Shadow

CSS Text Shadow帮助使用者生成漂亮的文字阴影。

13. CSS3 Pie

CSS3 Pie在IE 6-9下可以渲染出最有用的CSS装饰功能。

14. The Web Font Combinator

该工具旨在浏览器下快速预览字体,无需一遍遍的刷新。近些年出版的书也都让标题字体紧挨着正文字体,这也是一种网络再创作的尝试。

15. 3D Transforms

CSS 3D变换器是一款在线工具,用户使用它可以执行多种级别的3D转换。目前此工具还处在实验模式下,在使用的时候,需要在浏览器下制定浏览器前缀。

16.  Quick Form Builder

Quick Form Builder有助于便捷地创建CSS表单。

17.  Layer Style

这是一款HTML5 App,用一种直观的方式创建CSS3。其内置的Colorpicker允许用户选择各种颜色,还便于用户拖放图片到页面,使用它们作为背景或挑选他们喜欢的颜色。(编则/张红月)

原文:codegeekz

http://www.csdn.net/article/2013-06-24/2815973-17-Best-CSS-Tools-to-Speed-Up-Your-Coding

Web开发者不容错过的20段CSS代码

摘要:共享已成为互联网的一种主流,尤其是分享一些非常实用的技术,本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

 

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

 

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

 

1
2
3
4
5
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 <font></font> 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

 

 

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

1
2
3
4
.clearfix:before, .container:after { content: ""; display: table; }<font></font> 
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

 

 

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

1
2
3
4
5
6
.transparent {
    filter: alpha(opacity=50);/* internet explorer */
    -khtml-opacity: 0.5;     /* khtml, old safari */
    -moz-opacity: 0.5;      /* mozilla, netscape */
    opacity: 0.5;          /* fx, safari, opera */
}

源码地址: http://perishablepress.com/cross-browser-transparency-via-css/ 

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
blockquote {
    background: #f9f9f9;<
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote; 
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}

查看源码: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ 

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px; 
    border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-rightright-radius: 3px;
    -webkit-border-bottom-rightright-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}

 

7. 一般媒体查询

这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) { 
  /* Styles */
} 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
} 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
<font></font> 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}  
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

源码地址: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 
  
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 
  
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
  
/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
  
/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 
  
/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 
  
/*The heavier “Impact” sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 
  
/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

 

源码地址: http://www.sitepoint.com/eight-definitive-font-stacks/ 

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

 

1
2
3
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

 

 

10.隐藏Logo上的H1文本

 

1
2
3
4
5
6
7
h1 {
    text-indent: -9999px; 
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

 

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

 

1
2
3
4
5
6
7
8
9
10
img.polaroid {
    background:#000;/*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;/* Standard blur at 5px. Increase for more depth *
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; /*Set to height of your image or desired div*/
    width:200px;/*Set to width of your image or desired div*/
}

源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3

 

12. 锚链接伪类选择器

1
2
3
4
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

 

 

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.has-pullquote:before {
    /* Reset metrics. */
    padding: 0;
    border: none; 
    /* Content */
    content: attr(data-pullquote);
    /* Pull out to the right, modular scale based margins. */
    float: rightright;
    width: 320px;
    margin: 12px -140px 24px 36px;
    /* Baseline correction */
    position: relative;
    top: 5px;
    /* Typography (30px line-height equals 25% incremental leading) */
    font-size: 23px;
    line-height: 30px;
}
.pullquote-adelle:before {
    font-family: "adelle-1", "adelle-2";
    font-weight: 100;
    top: 10px !important;
}
.pullquote-helvetica:before {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}
.pullquote-facit:before {
    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}

源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/

 

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

1
2
3
4
5
6
7
html {
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

源码: http://css-tricks.com/perfect-full-page-background-image/

 

15. 内容垂直集中

相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

 

1
2
3
4
5
.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

源码地址: http://www.w3.org/Style/Examples/007/center

 

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

 

1
html { height: 101% }

 

 

17. CSS3 Gradients模板

 

1
2
3
4
5
6
7
8
9
#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);
}

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。

 

1
2
3
4
5
6
7
8
9
10
11
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');/* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('webfont.woff') format('woff'),/* Modern Browsers */
    url('webfont.ttf')  format('truetype'),/* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg');/* Legacy iOS */
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

源码地址: http://css-tricks.com/snippets/css/using-font-face/

 

19.创建缝合效果

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
p {
    position:relative;
    z-index:1; 
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border: 2px dashed #fff;
}   
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}

 

 

20. CSS3 斑马线效果

当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。

1
2
3
tbody tr:nth-child(odd) {
    background-color: #ccc;
}

源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

来自: HONGKIAT.COM

 

http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have

常用前端开发工具合集

最流行的前端开发工具

2.HttpWatch http://www.httpwatch.com/
集成在IE和Firefox上的监听HTTP和HTTPS的工具

3.Fiddler http://www.fiddler2.com/fiddler2/
Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理

4.HttpFox https://addons.mozilla.org/eu/firefox/addon/6647?lang=en-US
和HTTPWatch很类似的一个工具

5.Yslow http://developer.yahoo.com/yslow/
Firebug的一个扩展,可以根据高性能网站的一些准则来分析网页并且提出建议来提高网站的性能

6.Css Usage https://addons.mozilla.org/zh-CN/firefox/addon/10704
Firebug的一个扩展,可以用来察看哪些CSS被用到了

7.VIM http://www.vim.org/
一个高级的文本编辑工具,是在UNIX系统上面VI编辑器的升级版本

8.Editplus http://www.editplus.com/
Windows系统上的一个好用的文本编辑器

9.DNS Flusher https://addons.mozilla.org/en-US/firefox/addon/7408
Firefox上的一个附加组件,当HOST文件改变时可以很快地更新页面而不需要重启浏览器

10.PageSpeed http://code.google.com/intl/zh-CN/speed/page-speed/
Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能,并获得有关如何改进性能的建议

11.Dust-me Selectors https://addons.mozilla.org/zh-CN/firefox/addon/5392
Firefox上的一个附加组件,可以找出没有用到的CSS选择符

12.Myspace Performance Tracker http://msfast.myspace.com/
Myspace的性能分析工具, 可以分析到页面渲染的各个阶段的时间、CPU和内存的消耗情况,只使用于IE中

13.YUI Compressor http://developer.yahoo.com/yui/compressor/
用java写的一个代码压缩工具,使用方法: java -jar yuicompressor-x.y.z.jar [options] [input file]

14.JS Beautifier http://jsbeautifier.org/
在线JS格式化工具

15.JSLint http://jslint.com/
在线JS校验工具,使用请注意“JSLint will hurt your feelings.”

16.JSCompress http://jscompress.com/
在线JS压缩工具

17.JSMin http://www.crockford.com/javascript/jsmin.html
JS压缩工具

18.HTML2Javascript http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明

19.Web Developer https://addons.mozilla.org/da/firefox/addon/60?lang=zh-CN
Firefox的一个附加组件,给Firefox增加了一个菜单以及工具栏,里面包含了很多开发工具

20.JS Regexp Generator http://www.jslab.dk/tools.regex.php
一个制作正则表达式的在线工具

21.Opera Dragonfly http://www.opera.com/dragonfly/
Opera Dragonfly 是Opera浏览器的跨设备,跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM, 并且查看移动设备或计算机上的错误

22.IE Web Developer http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
微软的浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具

23.DynaTrace http://ajax.dynatrace.com/pages/
一个页面性能分析工具,是针对浏览器 IE 6 ~ 8 的。它可以用来分析页面渲染时间、DOM方法执行时间,甚至可以看到 JS 代码的解析时间。多谢“有米啦”同学的推荐,好友卓群的 博客以前也介绍过

24.IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage
IETester是一个免费的浏览器,它同时包括了IE 5.5、IE 6、IE 7、IE 8的所有内核,多版本IE测试好工具,DIV测试,CSS兼容和各个版本浏览器兼容检测工具

25.Companion JS http://www.my-debugbar.com/wiki/CompanionJS/HomePage
IE下的js调试工具,需要结合Microsoft Script Debugger使用,通过安装这个工具,但页面出现错误时会在左上角弹出一个小错误提示,点击会在IE下面显示出一个错误控制台,就如FF下的 firebug控制台一样,错误信息提示很详细

26.Live Http Header https://addons.mozilla.org/zh-CN/firefox/addon/3829
live HTTP headers是firefox的一个插件,可以查看到http头,非常方便

27.Closure Compiler http://code.google.com/intl/zh-CN/closure/compiler/
Google的JavaScript编译工具

Copyright © 2026 优大网 浙ICP备13002865号

回到顶部 ↑