首页风格
门户
博客

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

CSS3实现的图片加载动画效果

CSS3实现的图片加载动画效果

在线演示

使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!

HTML

<ul class="grid effect-4" id="grid">
<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
<li><a href="http://drbl.in/fWMT"><img…

标签: 分享, CSS3, CSS, 响应式设计

阅读更多

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

帮助自动生成页面任何元素的Label的CSS类库 - Label.css

在线演示

如果你需要针对页面任何元素生成说明性文字的话,Label.css是个不错的选择,它是用纯CSS的代码帮助你添加页面元素的说明性文字或者打一个标识。

支持选项包括,显示文字的位置,包括上,下,左,右,中。 并且支持2种显示的动画效果: 淡入淡出和浮动。如果大家需要快速添加类似的效果,这个css是个不错的选择!

请点击在线演示查看效果,这里我们将说明文字放置在中部,试用浮动效果。

代码如下:

<figure class="label inside float middle" data-label="超棒的明星脸芭比娃娃">   <img id="pic" alt="gbtags.com" src="images/gbtags.jpg"> </figure>

网站地址:http://usablica.github.io/label.css

via…

标签: 分享, CSS3, CSS

阅读更多

开源javascript/html/css的在线运行和调试 - editr

开源javascript/html/css的在线运行和调试 - editr

大家肯定熟悉极客社区的gbdebug,jsfiddle和jsbin等在线调试和运行服务,今天这里我们介绍一个开源的在线运行服务,你可以非常方便的整合到自己的网站中。

主要特性

  • 依赖jQuery和ACE Eidtor
  • 配置简单a
  • 支持单页面多个实例
  • 可以通过JS对象或者HTML属性来配置

如何使用

导入js:

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script src="/editr/editr.js"></script>

导入css:

<link rel="stylesheet" href="/editr/editr.css">

HTML代码:

<div…

标签: HTML, 分享, javascript, CSS

阅读更多

超棒的CSS开源UI界面元素类库 - TopCat

超棒的CSS开源UI界面元素类库 - TopCat

TopCoat是一套免费的开源UI元素类库,整套类库不使用任何javascript,而是使用CSS和HTML来生成。

整套UI元素非常丰富,使用标准兼容的HTML/CSS来开发,并且支持响应式的布局,支持两套样式:移动和桌面,你可以直接在网站上查看所有的UI元素样式,当然,还有些元素依然在开发状态中,目前版本0.2。

TopCat的使用非常简单,直接包含对应的CSS,使用HTML结构并且支持自定义设置。如果你需要寻找一套前端CSS的框架的话,Topcat可能是你不错的选择,绝对能够帮助你快速的开发web应用。

支持现代浏览器,如果你使用IE6的话,恐怕支持的非常有限了!

网站地址:http://topcoat.io/

via 极客标签

标签: UI, 分享, CSS, 前端框架

阅读更多

避免CSS初学者常犯的那些错误

避免CSS初学者常犯的那些错误

1.不要忘记引号!

font family: "Times New Roman", "Times Roman", Roman, serif;

2.正确的注视样式表。 

/* This is a CSS Comment */

3.不要忘记了标点符号

.class {
margin: 0;
padding: 0 3px 0 3px;
font-family: "Times New Roman", "Times Roman", Roman, serif;
color: #000;
}

4.尽可能使用简称

5.就算使用"麻烦"的方法也要避免元素在CSS类里的重复。

.class { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }

上面是不是很麻烦呢? 看看下面如何?

.class {padding: 0 0…

标签: CSS

阅读更多

一款非常棒的CSS 3D下拉式菜单实现-Makisu

说到折叠效果,曾经我们介绍过一款oriDomi折纸效果的javascript类库,它是一款JavaScript类库,可以把页面中任何HTML元素生成折叠效果。在今天我们介绍的文章中,使用CSS3D菜单作为一个jQuery插件,它可以自动转换成任何一款列表中的元素。在今天的文章中,我们介绍一款非常棒的3D效果下拉式菜单-Makisu,它独有的滚动折叠效果能够让你的应用更富有吸引力。

在线演示 本地下载

使用CSS 3D并提供jQuery插件来实现,并且拥有为菜单定制的选项,例如动画、阴影色彩、透明度等等。顺便说一句,这款CSS 3D效果并不能支持所有浏览器,针对老的浏览器它会自动退回到标准列表样式。

标签: 下拉菜单, jQuery, CSS, 3D效果, 折叠效果

阅读更多

推荐20款最新的超棒CSS技术教程

设计行业是当前发展最快的行业之一,设计师需要了解最新的视觉设计趋势,及其类似jQuery,HTML5,CSS3的互动技术。在今天 这篇文章中我想与大家分享这20个最新的CSS教程,大家可以参考里面的网页设计元素, 从中找到适合自己的内容。希望对大家都有所帮助!

Quickly Build a Swish Teaser Page With CSS3

Quickly Build a Swish Teaser Page With CSS3

How to Create a CSS3 Dropdown Menu [Tutorial]

How to Create a CSS3 Dropdown Menu [Tutorial]

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Accordion with CSS3

Accordion with CSS3

Tutorial: CTA button without images using CSS3 and Entypo

Tutorial: CTA button without images using CSS3 and Entypo

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Pure CSS3 LavaLamp Menu

Pure CSS3 LavaLamp Menu

CSS3 signup…

标签: CSS, CSS教程, CSS3, 教程

阅读更多

CSS3浏览器在线兼容查询工具 - Browser Support

CSS3浏览器在线兼容查询工具 - Browser Support

今天我们介绍一个非常不错的用来查看不同浏览器下CSS属性兼容性的在线工具 - Browser Support,如果你需要查看不同浏览器下CSS的兼容性的话,这个工具肯定能帮你大忙,特别如果你想在你的项目中使用CSS3的话,这个工具肯定也是你不错的选择。

使用这个工具,你可以输入需要查询的属性,当然这个工具拥有自动补齐功能,使你可以更方便的查看不同的CSS属性。

CSS3浏览器在线兼容查询工具 - Browser Support

搜索结果会按不同的浏览器来展示兼容属性。

CSS3浏览器在线兼容查询工具 - Browser Support

是不是很方便?希望大家在web开发中能够用到这个在线工具。

标签: CSS, CSS3, 兼容查询工具, Browser Support, browsersupport.net

阅读更多

一个在线帮助你了解IE相关bugs的网站应用 - Explorer Exposed

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

一个在线帮助你了解IE相关bugs的网站应用 - Explorer Exposed

IE是CSS开发中最让我们恶心的浏览器,为了解决不同版本的浏览器的兼容性问题,我们不得不先了解IE浏览器下的一些bugs。今天分享的这个web应用很好的帮助我们演示并且了解IE相关的bugs,希望能够给大家带来帮助,当然,随着新版本IE浏览器的发布,这些折磨我们前端设计的东西迟早就会消失。

一个在线帮助你了解IE相关bugs的网站应用 - Explorer Exposed

主要特性:

  • 不停更新中
  • bug在线演示(当然你需要使用IE浏览器来查看)
  • 非常详细的bug复现过程和讲解

主要bug列表:

标签: IE bug, CSS bug, IE, CSS

阅读更多

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

日期:2011/12/20  来源:GBin1.com

为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣 gbin1.com

我不得不承认,CSS非常棒,但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢?特别是当项目越来越大,代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式,那么对于CSS开发的人员来说。绝对是一个不省心的工作!

而当CSS编译器真正来到的时候,完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。

Time to keep it simple, no time for the stupid!

会议一下作为前台开发人员,你写过多少次这样的代码?

ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }

或许你也感叹过,我到底要写多少个ul li阿? 真是无用功!

没错,的确是!…

标签: HTML, CSS, Javascript, JQuery, Compass, CSS compiler, CSS tools, CSS工具, css编译工具, SASS, Mixins, GBin1.com

阅读更多

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

日期:2011/12/20  来源:GBin1.com

在这篇文章中,我们将分享一些实用的CSS/jQuery代码编写小窍门,小技巧和小花招。包括视觉特效,布局和web表单设计等。希望大家会喜欢!

相关文章:

1. 完美的全页面背景图片

这个技巧允许一个图片填满整个页面,没有任何的空域。图片会根据实际需要缩放并且改变自身尺寸,不产生任何的滚动条

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

2. 非常棒的CSS位置技巧

这里我们将有一个基本的无序list(ul),这个list包含有文字并不排列在其下方的左浮动图片。当然这个技巧也可以在加载其它实例时使用。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

3. 如何使用CSS来生成超大背景

这个教程使用各种CSS例子来演示如果使用单张或者多张推片来创建一个巨大的背景图片

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

4. 四个生成等高列的方法

这个文章讨论了几种能够兼容各种浏览器的创建等高列的实现方法(包括IE6)。所有的方法都教你如何生成一个3列的布局。

分享10个实用的jQuery/CSS代码书写技巧,窍门和点子

标签: HTML, CSS, Javascript, JQuery, Web设计, jquery技巧, css技巧, 设计技巧

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

分享16个javascript&jQuery的MVC教程

日期:2011/12/19  来源:GBin1.com

2011即将过去我们将在几周后迎来新的一年。 这里我们将介绍10多个js和jQuery的MVC教程希望大家喜欢!

jQuery MVC

1. AJAX - Spring MVC 3和jQuery的整合

这个教程中我们将使用jQuery的AJAX机制开发一个简单的Spring MVC3应用。我们将介绍如何使用jQuery.post()方法来处理post数据

分享16个javascript&jQuery的MVC教程 by gbin1.com

2. Progressive Enhancement Techniques

如果你开发大量的javascript代码,你就应该考虑使用progressive enhancement模式来工作。基本流程是开发一个无js的基本功能 ,然后使用javascript来增进功能

分享16个javascript&jQuery的MVC教程 by gbin1.com

jQuery with ASP.NET MVC

3. Building Contact Us Form

这个教程中将教会你如何使用jQuery和ASP.NET来开发一个联系我们表单,使用progressive…

标签: HTML, CSS, Javascript, JQuery, JS MVC, javascript MVC框架, jquery MVC框架, MVC框架, MVC架构, MVC架构介绍

阅读更多

实例帮助你了解HTML5滑动区域选择元素Slider element

日期:2011/12/16  来源:GBin1.com

在线演示1  在线演示2  在线演示3

HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素,例如,选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间,但是现在只是如何将他们整合到浏览器中。

因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单,支持对于支持它的浏览器来说。

实例帮助你了解HTML5滑动区域选择元素Slider element

浏览器支持

除了著名的Firefox外所有的现代浏览器都支持这个元素,但是很容易使用html5slider.js来创建。当然IE也不支持区域选择输入,这个修改不太容易。这样的话,意味着你需要使用分开的类库类似jQuery UI来支持多浏览器。好消息在于如果浏览器不支持区域选择的话,它会做为一个输入框显示。

实例帮助你了解HTML5滑动区域选择元素Slider element

标签: HTML5, CSS, Javascript, JQuery, slider, range input, HTML5区域输入选择, 滑动选择, 最大值最小值选择输入

阅读更多

下一页

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

?ü?à

今日推荐