首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

CSS中有关圆圈的趣味设计

CSS中有关圆圈的趣味设计

曾被设计师抛弃的圆圈元素,现在又卷土重来了。圆形并不会像其他矩形那样堆叠,所以可以营造出不一样的整体感觉。圆圈的形状是完美的,无论从哪个角度看它都一样。圆圈是完整的,与自然相和谐的--想想有多少自然元素都是以圆形为基调的。让我们来看看用圆圈能做些什么吧!

基础的圆形

圆圈对于我们来说是既熟悉又安全的图形。圆圈里面的物质被保护起来,圆圈外围的物质无法影响到圈内。这种形状非常有趣,很有特点。将圆形应用到设计中去是经 过深思熟虑的。但是处理圆形也是具有挑战的,因为这种奇怪的形状可能与其他设计元素无法融合。以圆圈为主题的设计方案必须经过详细计划、设计和执行。

在现代设计作品里,除了传统意义上的圆圈之外,我们通常还能见到更多的圆状元素。椭圆形、拥有显著弧形边缘的类似矩形等等,这类元素都带有各自的设计风格。今天我们专注于标准的圆形图案,讨论近期火热的设计作品。

圆圈体现的内容

CSS中有关圆圈的趣味设计

圆圈可以带有很多关联性。它们是流体的,与运行和移动联系在一起(想想车轮)。由于圆形是大自然中一种基础图案--月亮,花朵,水果--所以圆形代表的图案能够表达真实与生活。此外,圆形的弧度还可以与能源,力量,和谐,无限联系起来。

作为设计师,我们经常见到带有颜色的轮子形状,它是最易于辨认的圆圈。这种运用很成功,因为结合了上述特征,创造了一个传递信息的对象,这是一种简单,有力,和谐的方式。圆形是完整的,用于突出强调。

网页设计中的圆圈

CSS中有关圆圈的趣味设计

圆圈,曾经很少用于网页设计中,如今却成为一种主流。很多年前,在CSS中很难创建圆形图案,但现在情况不同了。那么一个很棒的带有圆圈的网站设计包括哪些特点呢?通常有以下五种展示形式:

作为占主导地位的形状或框架

比起矩形图案,一些设计师更愿意使用圆圈。圆圈可能被用于标志或按钮。圆圈能够增加趣味性,把图案"困"在圈内。图案是否适合圆形呢(相机拍的照片就不是圆…

标签: css, design, 设计, 趣味设计, 网页设计

阅读更多

富有创意的菱形响应式页面设计

富有创意的菱形响应式页面设计

在线演示

如果你是一个追求个性的web设计师的话,是不是厌倦了千篇一律的网站设计形状,不管你浏览那个网站,在你眼中的只有形形色色的方形或者矩形的网页布局设计,如果你想让你的网站看起来与众不同的话,看看这个与众不同的响应式菱形布局吧!

这个设计来自于Trevor Davis,你可以在Github上免费下载使用,如果你想了解详细的信息,请查看Trevor的教程吧!相信你肯定会喜欢的!

via gbtags

标签: layout, 响应式设计, design

阅读更多

8个超棒的使用javascript开发的视觉特效网站

随着flash的落寞及其HTML5CSS3的发展,更多的网站开始使用javascriptCSS3HTML5来开发炫酷的特效。今天我们挑选了8个超棒的CSS3javascript开发的视觉特效网站,希望大家喜欢!如果你也收藏了一些不错的网站,请留言和我们分享,谢谢!

Joint London

拥有非常独特的导航设计

Lena Sanz

拥有特别字体设计的响应式网站设计

Skull Candy

一个拥有预定义轨道的独特视差滚动特效

Black Negative

一个拥有全屏背景的拖动菜单设计

Viens La

滚动过程中会有不同的小动画

Matte Ozanga

另外一个使用拖拽的网站设计

Angrybird Space

在以前的3D特效网站文章中我们介绍过这个网站,愤怒的小鸟,非常有意思的滚动特效

Opvers Taub

一个典型的flash式样的网站,使用俩个方框来展示动画

Nature Valley Trail View

一个超棒的全的幻灯滚动登录页面…

标签: javascript网站, 网站设计, design

阅读更多

2012年令人崩溃的百度收录量变化

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

不知道是不是最近为了配合百度统计,最近收录量非常奇怪,2月份一天就丢失了一半的收录量,更让人崩溃的是今天3月2号突然又全回来了,貌似百度收录量查询现在按天来计算了。有图为证:

2012年令人崩溃的百度收录量变化

人生大起大落莫过于此啊。 也不知道是不是百度调整搜索算法还是调整百度统计。无语啊!

来源: 2012年令人崩溃的百度收录量变化

标签: SEO, 百度收录, 最新文章, blog, gbin1, 博客, keyword, 博客首页, jQuery, UI, 下载, html, htm5, css, css3, javascript, 前端, 设计, design

阅读更多

10个帮助你创建超棒jQuery插件的小技巧

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

10个帮助你创建超棒jQuery插件的小技巧

这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多不错的jQuery插件,但是对我们这些插件的使用者来说,很多jQuery插件的使用都不是那么直 接和透明。这里的10个技巧能够帮助你将更好的维和和扩展你的jQuery插件。而且对于插件开发来说,如果你有一个非常好的架构,将会给你的开发带来极 大的益处。所以在正式开发前,进过深思熟虑还是非常有必要的。

1. 插件开发需要做到独立

这是jQuery插件开发中最让个伤脑筋的事之一。因为我们需要首先考虑。你的插件应该在不需要额外的配置情况下正常工作。因此最小的缺省初始化你的jQuery插件就应该正常工作,如下:

$("#gbin1-container").wTooltip();

一个非常好的例子就是拥有向前/向后按钮的jQuery幻灯展示插件。…

标签: queness, kevin liew, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

10个CSS和jQuery的加载中(loading)动画效果实现

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

以往web开发中都使用Gif来实现加载中的效果,但是随着技术的发展我们也可以使用jQuery和CSS来实现加载中的效果,希望大家喜欢!

相关文章:

5个在线Ajax"加载中"旋转图标生成器工具

分享10个jQuery图片加载插件和教程及其生成器

1. Sonic - Looping Loaders

一个非常小的JS class,你可以用来创建个性化的加载中动画。非常适合循环的动画。

10个CSS和jQuery的加载中(loading)动画效果实现

2. Bouncy Animated Loading Animation

使用CSS3实现的加载中动画

10个CSS和jQuery的加载中(loading)动画效果实现

3. CSS3 Loading Spinners without Images

CSS变化(firefox3.5和webkit类的浏览器)拥有很多的有趣功能,旋转,过渡和缩放等

10个CSS和jQuery的加载中(loading)动画效果实现

4. Ajax Style Loading Animation in CSS3 (no Images)

加载中是网站开发中非常重要的元素,但是加载图片需要时间,因此这里使用CSS来开发加载中。

10个CSS和jQuery的加载中(loading)动画效果实现

5.…

标签: loading, jquery, css3, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

不容错过的超棒Javascript日期处理类库-Moment.js

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

不容错过的超棒Javascript日期处理类库-Moment.js

moment.js是一个轻量级并且健壮的js日期处理类库,相信大家在javascript开发过程中,都自己动手写过,或者使用google和百度搜索过相关的实现函数。使用这个类库,可以帮助你有效的处理相关日期。希望大家喜欢!

主要特性:

  • 3.2kb超轻量级
  • 独立类库,意味这你不需要倒入一堆js
  • 日期处理支持UNIX 时间戳,String,指定格式的Date
  • 日期处理:加,减日期
  • 日期显示:包括相对时间显示的日期显示选项
  • 其它内建的功能,例如,保存,timezone offset和i18n支持
  • 可以作为node.js的一个模块
  • 完整的文档介绍

如何使用?

var now = moment(); 
console.log(now.format('dddd, MMMM Do YYYY, h:mm:ss a'));
var halloween = moment([2011, 9, 31]); //…

标签: moment.js, 日期类库, js日期类库, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

分享8个让你绝对印象深刻的具有超酷特殊过渡效果的jQuery幻灯插件

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

曾经大家都使用flash来构建动态的幻灯效果,不过随着HTML5和CSS3的发展,越来越多的网站使用jQuery,CSS3和HTML5的黄金组合来构建漂亮的幻灯效果。今天我们介绍8个具有超棒的过渡效果的jQuery幻灯插件,可能有一些需要你拥有最新的现代浏览器,否则你看不到任何效果,希望大家能在项目或者网站设计中使用到!大家一定会喜欢的!

Skitter

分享8个让你绝对印象深刻的具有超酷特殊过渡效果的jQuery幻灯插件

支持过渡效果: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight,…

标签: slider, jquery plugin, jquery幻灯插件, jquery插件, 超棒jquery幻灯特效, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress

阅读更多

分享一款超强的辅助标签(Tag)输入及其提供自动补齐功能(autocomplete)的jQuery插件 - jQuery TextExt

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

分享一款超强的辅助标签(Tag)输入及其提供自动补齐功能(autocomplete)的jQuery插件 - jQuery TextExt

在线演示  本地下载

今天我们将介绍一款非常不错的标签输入相关的jQuery插件 - jQuery TextExt,这个插件能够有效的帮助你快速添加标签,并且提供相关的强大的辅助功能,帮助你有效的输入,自动补齐提示及其提供AJAX支持。个人觉得非常不错,符合大多数情况下网站中使用标签的方式和习惯,个人感觉基本上很多网站的标签功能,都是为了实现标签功能而强行添加的标签功能,典型的从众心理,使用生硬,并且没有任何所谓的使用体验。

Javascript

$('#tags').textext({ plugins : 'tags autocomplete' })
.bind('getSuggestions', function(e, data)
{
var list = [
'Basic',
'Closure',
'Cobol',
'Delphi',
'Erlang',
'Fortran',

标签: gbin1, terry, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress, jquery plugin, jquery插件, TextExt

阅读更多

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

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

分享一个用来添加快捷键组合的javascript类库 - keyboard.js

在线演示  本地下载

今天分享一款帮助大家在网站或者web应用中添加快捷键组合的类库 - keyboard.js,使用这个类库你可以很方便的捕捉输入键的组合,可以帮助你很好的添加相关快捷键的操作,希望大家喜欢!

主要特性:

  • 独立类库,当然也可以和其它类库组合使用,例如,jQuery
  • 字母或者字母组合绑定
  • 支持Callback回调
  • 多语言支持
  • 支持AMD加载,例如 RequireJS
  • 文档完整

Javascript:

$(document).ready(function(){ 
var gbin1 = ['g', 'b', 'i', 'n', '1'],
google = ['g', 'o', 'o', 'g', 'l', 'e'],
baidu = ['b', 'a', 'i', 'd', 'u'],
kI = 0;
document.addEventListener('keydown', function(){

标签: gbin1, ajax, browser, cms, css-html, design, flash, freebies, gadget, graphic, icon, inspiration, javascript, logo, misc, mobile, mysql, os, photography, photoshop, php, seo, template, tips, tools, trend, tutorial, typography, usability, video, wallpaper, wordpress, javascript类库, js类库, keyboard.js

阅读更多

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐