首页

关于

如何在HTML中使用图标字体 - icon font?

如何在HTML中使用图标字体 - icon font?

在线演示  本地下载

主要特性

使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:

  • 自由的变化大小
  • 自由的修改颜色
  • 添加阴影效果
  • IE6也可以支持
  • 支持图片图标的其它属性,例如,透明度和旋转等等
  • 可以添加text-stroke和background-clip:text等属性,只要浏览器支持

如何使用?

文字修饰:

<h3>
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h3>
[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

单独图标:

<a…

标签: icon, icon font, 图标字体, 图标

阅读更多

来自于Mozilla Networks演示工作室的超酷CSS3/Javascript动画演示

这个叫做DemoStudio的网站来自于Mozilla Developer networks,收集了很多超酷的CSS3和Javascript特效。因为都是实验产品,所以如果你使用这些技术,有可能在一些老的浏览器,比如,IE中无法正常工作。当然如果你有fallback的话,大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢,请给我们留言!

折纸效果

相当不错的折纸效果

Paperfold

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

RotorJS

3D图片过渡

类似flash效果的3D CSS过渡效果

3D Image transition

The Box

一个动画卡片和白纸的3D情节,由回收材料制成。

The Box

3D Flip list menu

一个翻动的3D菜单特效

CSS3 Reflection effect

动画菜单图标

小并且可缩放,纯CSS3实现的动画

Animated Menu Icons

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

Animated CSS3 Gallery

The CSS Book

纯CSS实现的3D书效果

The CSS Book

via quaness.com

标签: HTML5, CSS3, Javascript, jQuery, jQuery Mobile, jQuery插件, 图标, 模板, iphone, ipad, 产品, 用户体验

阅读更多

轻量级的超酷时间序列javascript类库 - Morris.js

日期:2012/03/02  来源:GBin1.com

轻量级的超酷时间序列javascript类库 - Morris.js

在线演示  本地下载

是不是寻找一个轻量级的时间序列javascript类库,今天我们将介绍的这个时间序列类库morris.js可能就是你需要的图形利器。希望大家有机会在自己的项目中使用到。如果你喜欢们的文章,请给我们留言!

主要特性

最初morris.js用来开发网站 howmanyleft.co.uk,现在已经成为一个开源项目。

依赖类库:

支持浏览器:

  • IE6+
  • Safari/Chrome/Firefox
  • iOS 3+
  • Android 3+

如何使用?

morris.js的使用很简单,你只需要使用一个方法:

Morris.Line(options)

选项:

  • element(必选): 用来插入图形的元素 (注意:这个元素必须宽度和高度定义在自己的样式表里)
  • data(必选):用来绘图的数据,可以使对象数组,包含了x和y轴属性(注意:排序在这里不重要,你可以按你的需要随意的排序)
  • xkey…

标签: time-series, morris.js, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

一个页面内滚动的jQuery插件 - PageScroller

日期:2012/02/28  来源:GBin1.com

一个页面内滚动的jQuery插件 - PageScroller

在线演示  本地下载

今天介绍一款页面内滚动的jQuery插件-pagescroller,以前我们也介绍过类似的jQuery插件 jQuery的滚动插件Waypoints

主要特性:

  • 支持缺省方式左侧导航
  • 支持向上及其向下滚动图标,支持俩个主题
  • 支持顶端固定导航菜单
  • 支持右侧导航 
  • 支持IE9+,firefox,chrome等浏览器

如何使用?

  1. 倒入相关类库
  2. 定义滚动区域:$('#wrapper').pageScroller()
一个页面内滚动的jQuery插件 - PageScroller

Javascript

$(document).ready(function(){

// instantiate page scroller plugin

var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation',…

标签: PageScroller, jquery滚动插件, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

11个灵活可定制的jQuery内容幻灯插件

日期:2012/02/28  来源:GBin1.com

jQuery的图片幻灯实现很多,可能有几百个。如果你有兴趣,可以阅读我们相关文章

这里我们将介绍内容幻灯,和图片幻灯不同,内容幻灯除了图片以外可以展示更多的内容,比如,HTML,内容,视频等等。这里我们挑选了11个不错的jQuery内容幻灯插件,有些在我们以前的插件介绍中也有过介绍,希望大家喜欢!

Orbit

Zurb可能对于大家来说并不陌生,他们使用CSS3创建了很多的相当酷的东西和web体验。这次他们创建了jQuery图片幻灯,可以同时支持图片和内容。而且将它整合到了他们的框架 Foundation中。虽然目前他们不支持这个幻灯了,但是依旧很出色。

Zurb Image Slider

Slidorion

一个图片幻灯和手风琴效果的整合。支持大量的特效,传统幻灯外的一个很不错的选择。

11个灵活可定制的jQuery内容幻灯插件

Slides JS

基于简单实现的jQuery插件。拥有很多有用的特性,例如创建友好的幻灯展示。

11个灵活可定制的jQuery内容幻灯插件

标签: 幻灯, jquery幻灯, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

CSS3属性的快速说明信息图

日期:2012/02/26  来源:GBin1.com

今天分享一张CSS3主要属性的信息图,帮助大家更好的理解和记忆CSS3的关键属性,相信大家一定喜欢!

CSS3属性的快速说明信息图

来源: CSS3属性的快速说明信息图

标签: CSS3属性, CSS3信息图, css3 infographic, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

使用绘图类库flotr2来绘制HTML5的图形和图表

日期:2012/02/26  来源:GBin1.com

使用绘图类库flotr2来绘制HTML5的图形和图表

在线演示  本地下载

今天介绍一个款不错的HTML5绘图和制表类库-flotr2。 它可以有效地帮助你绘制基于HTML5的图表和图形,包括线图,柱状图,饼图,气泡图等等,对于浏览器的兼容性也非常不错。

flotr2主要特性

  • 移动支持
  • 独立框架
  • 可扩展的插件框架
  • 自定义的图表类型
  • FF, Chrome, IE6+, Android, iOS
  • 线装图
  • 柱状图
  • 烛柱图
  • 饼图
  • 气泡图

HTML

<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>

标签: flotr2, 图表类库, html5图表类库, 绘图类库, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24  来源:GBin1.com

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够使得你的网站能够针对不同的设置做出最好显示响应。最初这个名称来自于Ethan Marcotte的文章"Responsive Web Design",设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使用行为,并且及时的做出响应。现在的响应式设计中,我们网站也针对不同的设备的显示尺寸来有效的改变页面布局和样式。如果大家使用过jQuery mobile网站API文档的话,你可以看到它也是用了响应式设计的模式,如果你使用浏览器浏览文档,如果你变化你的浏览器尺寸,显示的内容也会根据浏览器尺寸变化。

今天这里我们将介绍几款非常不错的jQuery插件来帮助你构建你的响应式设计,希望大家喜欢,如果你喜欢我们的文章,请大家去我们微博或者留言区留言,谢谢大家!

相关文章:分享10款帮助你设计自适应布局(Responsive

标签: 响应式布局, responsive design, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

使用jQuery和CSS3实现的超炫3D画廊特效

日期:2012/02/23  来源:GBin1.com

使用jQuery和CSS3实现的超炫3D画廊特效

在线演示  本地下载

今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效,这个3D特效使用CSS3的3D变化特性实现,简单而非常华丽,希望大家喜欢!

使用3D变化,通过将它们放置于一个三维空间,我们可以让很简单元素变得更加有活力,同时使用CSS的过渡效果,这些元素可以很容易的移动到3D空间中,并且创建一个非常真实的效果。

主要的想法是创建一个轮播式的画廊,我们可以将一个图片放置在中间,旁边放置两个图片。因为我们使用不同的角度,所以看起来两张旁边的图片好像被设置在一个3D空间中,然后我们旋转它们。

注意:这里的效果需要你的浏览器支持3D变化效果

如何工作

<section id="dg-container" class="dg-container">

标签: 3D图片画廊, jQuery图片画廊, 图片画廊, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

一个帮助你提高阅读体验的jQuery页内书签插件 - youRhere

日期:2012/02/23  来源:GBin1.com

一个帮助你提高阅读体验的jQuery页内书签插件 - youRhere

在线演示  本地下载

大家肯定都有这样的体验,正当我们在专注的阅读某位大神的最新大作的时候,一个电话过来,当我们接完电话的时候,发现自己迷失在文章中,于是自己再从某部分开始重新阅读。我相信很多人都有类似的糟糕阅读体验,而今天我们介绍的这款jQuery插件 - youRhere,将能够让你的用户在阅读文章过程中,解决这个继续阅读的问题。希望大家喜欢这个插件,个人觉得很不错!

主要特性

  • 免费开源,自由下载,当然你去youRhere网站看不到jQuery下载地址,可以在本文演示下载地址
  • 使用HTML5的本地存储API,需要你使用现代浏览器
  • 支持"左到右"和"右到左"阅读
  • 初次使用的向导
  • 使用简单
  • 支持多浏览器,IE,Firefox,Chrome,并且支持Chrome插件
  • 10k的javascript,需要jQuery类库支持

如何使用

使用很简单,你可以直接在本文的演示下载地址下载,下载类库后,调用如下:

<script

标签: 阅读, 阅读体验, 用户体验, youRhere, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.