gbin1

gbin1

To be developer and designer

css

关于z-index的那些事儿

关于z-index的真正问题是,很少有人理解它到底是怎么用。其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息。 不相信我吗?好吧,看看你能否解决下面这个问题: 问题: 在 接下来的HTML里 有三个元素,并且每个里包含一个元素。每 个被分别给定一个背景颜色:红、绿、蓝。每个被放置到文档的左上角附近,部分重叠着其他 的元素,这样你就可以看到哪些是被堆叠在前面。第一个有一个z-index的值为1,而其他两个没有任 何z-index值。 以下就是这个HTML和它的基本CSS。 HTML代码 Red Green Blue CSS代码 .red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; } 挑战: 尝试使红色元素堆在蓝色和绿色的后面,不要打破以下规则:

dribbble

超酷的响应式dribbble设计作品瀑布流布局效果

相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西。 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件: isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费的哦) Jribbble :一个帮助你方便调用dribbble API的jQuery插件 imagesloaded:一个帮助你预先加载图片的jQuery插件 先看下在线演示 第一步:使用jribbble来取得最受欢迎的dribbble设计内容 首先呢,我们需要使用jribbble来取得最受欢迎的设计作品,代码如下: $.jribbble.getShotsByList("popular", function(data){ $.each(data.shots, function (i, shot) { /* 这里我们取得dribbble中的作品,注意我们得到所有的“最受欢迎”作品列表 */ }); }, {page: pagenum, per_page: 10}); 使用以上代码,我们可以分页取得dribbble的最新设计,

css

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。 介绍 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素: block inline 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型。 inline类型的元素包括: img,span,a等,用来定义文字或者数据,通常显示方式是“同一行显示”。更具体的说就是,如果很多的inline类型的元素在同一行的时候,它们会显示在同一行,直到宽度不够显示了,再转到下一行。例如,如下代码: gbtags.com is website for geeks 查看在线调试 相 反block类型的元素,例如,div,p或者HTML5中新的元素section,article和article的显示方式和inline类型都不一 样。它们都是典型的结构化的元素,可以包含inline类型的元素。浏览器处理block类型的元素,会在元素前后添加换行,这样你看到它们都是独立成行 显示的。

书签

20款超棒的响应式设计测试书签应用

2013年注定了响应式设计流行,它是网站设计的新的方向,从去年开始越来越多的网站开始使用响应式的设计理念,它能够帮助你开发一套界面并且能运行在所有不同分辨率的设备上,包括,PC,平板,或者移动手机。今天我们继续推荐给大家5款书签类型的测试工具,你可以方便的添加到你的书签中,并且在测试响应式网站的时候方便的使用。 Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 (portrait | landscape) 支持Media query 自适应Meta的viewport设置 手动重新加载页面 移除页面工具栏 Viewport相关信息显示 (尺寸,分辨率,横纵屏,user agent) 支持触摸设备 支持vector Resizer 这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展! Bricss 另外一个方便的测试响应式的书签,你可以自己指定自己的几套显示窗口的尺寸。 Responsinator 这个工具提供了仿真的web界面来测试你的响应式设计,不过呢,只是界面外面套了一个设备的壳子图片,如果你想查看实际的设备展示情况,还是应该使用真实的设备。同时,提供了一个书签,你可以方便的添加到浏览器中。 ish

web开发设计人员不可不用的在线web工具和应用

大家可能还记得在过去的文章我们我们曾经介绍我们收集的前端开发人员必备的工具,脚本和资源,在今天的这篇文章中,我们将继续推荐给大家一组我们精挑细选的web开发设计必备的在线工具应用。相信会在web开发和设计的过程中给你带来方便和快捷! 前端开发相关 jsfiddle jsfiddle是老牌的在线调试和分享代码的网站,它可以帮助你在线调试javascript/css/html代码, 并且方便的发布到社区,论坛或者社交媒体上与朋友们分享或者提问。整合了很多的不同的类库供大家选择。 类似的工具还有jsbin.com,也非常不错。更多工具请参考我们以前的文章。 codepen codepen也是一个可以帮助你在线调试和分享前端代码的地方,和jsfiddle不太一样的地方,它更像一个社区,你可以看到最近的用户添加的在线演示或者代码,并且可以更加方便的分享到其它网站或者是fork。和jsfiddle相比,更像一个帮助展示前端效果的平台。如果你常常光顾的话,能够找到很多很不错的前端效果,包括html5,js,CSS3等等。相当不错,向大家推荐! gbdebug gbdebug是gb标签社区中整合的前端调试工具,最初是为了方便社区的朋友提问或者展示jQuery代码效果而开发,如果你使用jsfiddle的话,肯定会觉得非常熟悉。最强大的在于和GB社区内容的整合,你可以分享自己开发的前端展示,模板或者教程,并且使用gbdebug来添加”在线调试“,更方便大家在线阅读和调试。 reFiddle+ 如果你是个正则表单式的狂热爱好者的话,这款在线工具肯定是你必备的工具之一,reFiddle+可以帮助你在线的调试正则表单式,你只需要输入数据和对应的正则表达式后,

jquery

最新jQuery Mobile 1.2版本新特性

大家还记得在jQuery 1.0 RC版本发布的时候我们曾经发布过一个jQuery Mobile RC版本介绍文章介绍主要的特性。就在前不久,jQuery Mobile团队又发布了jQuery Mobile 1.2。新版本中带来了一些非常不错的特性。在今天的这篇文章中我们将继续介绍1.2版本的一些新的widget,及其一些针对老版本widget的功能加强。希望大家喜欢! Widgets jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中,加入了一个全新的widget:popup modal。 Popups (弹出层) 弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏,显示照片,地图或者其它内容。在jQuery mobile 1.2中,实现了这个超棒的widgets。 在本篇文章中,我们将使用如下代码框架来演示代码: <!DOCTYPE html> <html> <head> <meta

javascript

与moment.js整合使用的日期选择期 - Pikaday

在线演示 Pikaday是一款超轻量级的javascript日期选择器,并且支持模块化的CSS,可以帮助你更加简单的配置样式。目前虽然处于开发状态,但是看起来已经很不错了。 和重量级别的jQueryUI 日期选择器相比,Pikaday更轻量级,压缩版本只有5kb。当然,如果你使用jQuery类库的话,同时也提供了jQuery插件,相信大家一定会喜欢。 如果你需要处理日期或者时间相关格式的问题,你可以考虑使用moment.js来帮助你处理,这个超棒的时间,日期处理类库在以前的文章中我们曾经介绍过: 不容错过的超棒Javascript日期处理类库-Moment.js 如此小巧并且功能完整的日期选择器还是不多见的,希望大家喜欢!

cloud

超酷的javascript文字云/标签云效果 - D3 Cloud

在线演示 如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用**D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的 D3.js**,能够帮助你生成类似wordle.com风格的字体或者标签云效果。 这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。 文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件: word – 当每一个文字添加后触发 end – 当全部文字添加后触发 当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少! 来源:超酷的javascript文字云/标签云效果 – D3 Cloud

javascript

使用数据库方式访问JSON数据的javascript类库-TaffyDB

在线演示  本地下载 是不是有过这样的想法,如果能够像处理数据库方法一样来处理JSON对象数据的话,是不是会非常方便?今天我们介绍一款超棒的javascript类库-TaffyDB,它能够帮助你实现处理数据库一样的方式来处理JSON对象。 主要特性 类库非常小,性能不错 强大的数据选择引擎 支持不同的数据库操作,例如,插入,更新,删除 支持各大浏览器 兼容其它JS类库 可以方便的开发扩展应用 支持链式操作,超酷超方便 来源:帮助你使用数据库方式访问JSON数据的javascript类库-TaffyDB

javascript

另外一款超棒的响应式布局jQuery插件 - Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage 和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。 如何使用 基本使用方式: $('#container').freetile(); 启用动画特效: $('#container').freetile({ animate: true, elementDelay: 30 }); 指定一个自定义的元素选择器: $('#container').freetile(

javascript

如何选择Javascript模板引擎(javascript template engine)?

随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下: var data={   email: 'terry.li@gbin1.com,   gender: 'male'  } 然后你需要将json数据组织成页面内容,如下: var email, gender; email= '' + data.email+ '; gender= '' + data.gender + '; $('#contentwrapper‘).append(content).append(gender); 代码执行功能非常简单,将json数据生成web页面中的内容,如下: terry.li@gbin1.com Male 如果只是简单代码组合可能还好一些,但是如果页面大量使用类似的结构的话,除非一直是同一个程序员维护,否则后期的管理成本会相对非常的高。 为 了解决这个问题,

javascript

帮助你生成翻页效果的jQuery插件 - bookblock

在线演示  本地下载 今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock,使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢! 这个插件依赖于jQuery++,这个类库是一个jQuery的扩展类库,这里使用了它的swipe事件。 HTML代码 主要html代码如下,生成需要展示的图片内容: <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt=

javascript

使用javascript生成PDF的类库 - jsPDF

在线演示 曾经生成PDF都是服务器端代码的专利,在今天的这篇文章中,我们将介绍一个javascript类库 – jsPDF,使用它能够帮助你使用前端脚本生成PDF文件,是不是很棒,试试吧! jsPDF支持不同类型的PDF文件格式,包括:文本,数字,图形,图片,同时你可以自由的编辑标题或者其它类型元素。 支持互动的内容制作,例如,你可以输入文字或者数字,然后jsPDF帮助生成最后的PDF内容。 支持现代浏览器,如果是老式浏览器的话,可以很好的使用flash来实现兼容。不过貌似支持Firefox不是很好,如果要查看演示,使用Chrome吧! 类库依赖:无 网站地址:http://jspdf.com/ 下载地址:https://github.com/MrRio/jsPDF 来源:使用javascript生成PDF的类库 – jsPDF

javascript

轻量级的jQuery表单验证插件 - HAPPY.js

在线演示  本地下载 功能强大的表单验证插件很多,以前我们介绍过validation engine,但是如果你希望使用简单轻量级的表单验证插件的话,你可以考虑使用HAPPY.js。 主要特性 支持jQuery和Zepto.js 使用简单,支持日期,数字,电子邮件,最大/最小数和手机号码等验证 拥有很多自定义的选项 支持IE6-8,FF3.6,Chrome7和safari5 如何使用 HTML代码: <form id="login" action="index.html"> <div class="loginPic"> <input id="loginEmail" class=

javascript

使用jQuery开发超酷波浪动画背景的单页面网站导航菜单

在线演示  本地下载 在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢! 主要开发使用插件: jQuery one page nav:用来生成单页面网站典型的滚动效果 jQuery scrollTo.js:单页面插件依赖类库 jQuery background position:用来生成动画背景效果 jquery.animate-shadow-min.js:用来生成背景阴影效果 jQuery easing 1.3.js:用来添加更多生成动画效果 Cufon-yui.js:cufon类库,用来生成更加漂亮的字体 fixie.js:用来辅助自动生成网站中的文字 本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。 如何生成按钮的背景波浪动画特效? 在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的“使用jQuery background-position插件来创建超酷的导航条效果教程”中,

javascript

2012年度最新免费web开发设计资源荟萃

免费的设计和开发资源大家肯定都喜欢,在这篇文章中我们收集了7月到8月的最新免费开发设计资源,包含PSD UI套件,图标javascript,jQuery插件等等,绝对是web开发设计人员必备,如果你也喜欢,过来看看吧! 1. Smart Time Ago(jQuery插件) 2. 使用javascript开发超棒的动画文字书写效果 3. Magnifying Glass for Image Zoom (jQuery/CSS3) 4. Settings Panel (PSD) 5. iOS Icon Template 6. Blitz PSD UI Kit 7. PSD Retro Text Effect Vol. 2 8. Beer Bottle PSD Mockup Template

javascript

帮助你自动生成已经过去时间的jQuery插件 - Smart Time Ago

在线演示  本地下载 如果大家经常开发web应用的话,肯定会遇到需要计算相对现在过去的时间的情况,在今天的jQuery插件介绍中,我们将介绍一个方便的jQuery插件 – Smart Time Ago。使用这个插件可以自动帮助你生成类似:“3小时之前”,“2分钟之前”的相对时间格式。希望大家喜欢! 主要特性 自动的计算相对时间 基于另外一个插件: http://timeago.yarp.com/. 支持国际化和本地化 如何使用 在node.js下使用,调用如下命令: $ npm install -g smart-time-ago 可以作为jQuery插件,设置为全局: $('body').timeago(); 或者指定范围: <div> <time datetime="2012-07-18T07:51:50Z">about 8 hours

javascript

【简报】使用oriDomi折纸效果的HTML元素

oriDomi是一款超酷的JavaScript类库,可以把页面中任何HTML元素生成折叠效果。此类库不依赖于任何JavaScript框架(但对于jQuery可以有选择性支持)并使用CSS 3D创建过渡效果。 在线演示  本地下载 主要特性 图片小于15K 可选择性支持jQuery/Ender 可以在iOS环境下工作 支持折叠效果,页面字体和动画图片 这里有一些动画演示的折叠效果,包括横向/竖向折叠、切片式,阴影等,并且所有的内容都可以自定义。此款特效还包括:手风琴、卷曲、折叠、缩放等。oriDomi兼容所有现代浏览器(包括移动设备) 如何使用 HTML <div> <h1>Hello.</h1> <h4>my name is oriDomi.</h4>