首页风格
门户
博客

CSS技术

超酷的CSS3列表动画特效在线生成工具 - liffect

超酷的CSS3列表动画特效在线生成工具 - liffect

在线调试  在线演示

还记得我们曾经介绍过的开源CSS3动画CSS文件animate.css吗?使用它能够帮助你快速的编码CSS3动画效果。当然,如果你不喜欢自己编写CSS3动画效果代码的话,今天我们将介绍的另外一个在线代码生成工具 liffect肯定会成为你的最爱。

liffect是一个在线的列表动画生成工具,能够帮助你针对一个ul列表来生成动画效果,你可能会经常的看到如下的动画类型:

  • fadeIn
  • zoomIn
  • zoomOut
  • slideTop
  • slideDown
  • pageTop
  • pageRight
  • ...

所有的以上动画特效,都可以使用liffect轻松的生成。这个工具依赖jQueryCSS3的动画来生成以上所有的特效。最重要的是能够根据你的特效选择自动生成HTML,CSS和javascript代码。而且提供了其它的选项来有效的控制动画,例如,延迟,CSS前缀等等。相信你能更加精细的控制动画的效果。

这里我们使用PageTop效果生成如下代码:

HTML

<ul…

标签: css, css3, 动画, 特效, liffect

阅读更多

不容错过的window8 metro UI风格的web资源

不容错过的window8 metro UI风格的web资源

最近微软已经正式发布了windows 8操作系统,window操作系统的风格已经完全改变成了瓦片状的Metro UI。

对于微软来说这是一个巨大的改变,而且所有微软的平台包括,桌面,平板,移动及其网站都使用这个UI风格。

Metro UI包含了所有的现代web设计的特点,包括了,简化,基于网格的界面,并且富有连续性。 大家如果有兴趣可以看看这个界面设计说明(http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx)。

如果你也喜欢Metro风格的话,这里我们收集了很多windows 8的Metro UI风格布局资源,希望大家喜欢!

Metro风格的网站框架和模板

Metro UI CSS

Metro UI CSS是一个非常完整的创建Metro风格的网站的框架。使用LESS创建,并且拥有网格系统,排版样式,表格,按钮和图片。

同时也拥有内建的javascript组件,帮助你生成片状,菜单,边栏,进度条,提示等等

etro…

标签: metro, metro ui, windows8, ui, jQuery, css

阅读更多

分享40个超棒的CSS3按钮教程

css3 button

还记得10个实用的超绚CSS3按钮设计吗?在今天的这篇文章中,我们将带给大家40个精心挑选的CSS3按钮开发教程,相信大家在前面的文章中对CSS3按钮的超酷效果有所了解,希望在今天的这篇文章中,你能够更多的学习如何自己制作漂亮的CSS3按钮,还等什么,了解一下吧!

Animated Buttons with CSS3 [在线演示 | 在线教程]

Fancy 3D Button with CSS3 [在线演示 | 在线教程]

Just Some Awesome CSS3 Buttons [在线演示 | 在线教程]

CSS3 Social Buttons [在线演示 | 在线教程]

Pretty CSS3 Buttons [在线演示 | 在线教程]

Download Me! CSS3 Download Button [在线演示 | 在线教程]

Add to Cart Button in CSS3 [在线演示 | 在线教程]

CSS3 Github Buttons [在线演示 | 在线教程]

CSS3 Animated…

标签: css3, css3按钮, css3 button

阅读更多

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

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

在线演示 本地下载

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

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

阅读更多

47款超酷超实用的CSS3技巧教程

如果你已经足够精通CSS3的话呢,那么它带给你的惊喜和乐趣已经不言而喻了吧,它不仅可以帮助你创建出最优美的设计,还可以大大提高你的工作效率。今天我们给大家推荐的这47套CSS3教程无疑可以带给大家巨大的帮助,不光是专业开发人员,即使初学者也同样适用。在这套CSS3教程中,我们收集了足够多的小技巧可以更巧妙的运用在你的网站设计中,你可以用它们更好的优化你的网站。还等什么呢?快来试试吧。

相关阅读:推荐20款最新的超棒CSS技术教程

1. Swatch Book with CSS3 and jQuery

Demo

2. 3D Thumbnail Hover Effects

Demo

3. Create a Stunning Menu in CSS3

Demo

4. More Efficient CSS3 Transitions

Demo

5. Create Fluid Layouts with CSS3 and HTML5

Demo

6. Mastering CSS3 Multiple…

标签: CSS3, CSS3tutorials, techniques, CSS3教程, CSS3使用技巧

阅读更多

【简报】微软Metro/win8风格的web开发框架 - BootMetro

微软Metro/win8风格的web开发框架 - BootMetro

相信大家一定听说过Twitter Bootstrap,来自Twitter的超棒web框架,帮助你快速高效的开发网站和web应用。

今天这里我们介绍另外一个超棒的微软Metro/Win8风格的框架 - BootMetro,这个框架基于Twitter BootStrap,提供了类库win8风格的界面和设计,如果你希望能够开发类似win8风格的网站或者应用,这个框架是一个不错的选择!

这个框架设计源于Metro UI CSS,提供了丰富的UI设计样式和元素,包含了大量的设计组件,插件和布局元素。相信如果你需要开发win8风格的界面,它绝对是你的开发利器。

主要特性

  • 让你专注于内容开发,提高用户体验,减少干扰
  • 使用Applicationbar来展示上下文含义的图标
  • 执行metro风格的导航
  • 方便的创建性感的面板
  • 拥有超棒的IcoMoon图标字体

【简报】微软Metro/win8风格的web开发框架 - BootMetro

网站:http://aozora.github.com/bootmetro/

标签: css, web frameworks, framwork, metro, win8, bootmetro

阅读更多

分享2个帮助你自动刷新CSS文件的工具

分享2个帮助你自动刷新CSS文件的工具

大家在页面设计过程中时常需要修改CSS文件,而每次修改后都需要刷新页面才能够看到效果,是不是感觉有点麻烦?今天这里我们介绍2个不错的工具能够帮助你在修改CSS文件后自动刷新页面中的CSS,立刻就能够看到修改后的效果,希望能够帮助大家提高开发效率!

CSS Refresh

分享2个帮助你自动刷新CSS文件的工具

cssrefresh是一个很不错的javascript类库,能够帮助你自动刷新页面中的CSS文件而不刷新页面,你需要做的就是引入提供的javascript文件。无须其它的配置步骤,非常方便。

或者你也可以通过它的书签小程序(Bookmarklet)来激活CSSrefresh,这种方法你不需要倒入任何的js文件,使用更加方便。

SoFresh

分享2个帮助你自动刷新CSS文件的工具

sofresh也利用了书签小程序,你直接拖拽对应的图标,然后就可以激活CSS刷新功能。

标签: css, css刷新, css自动刷新, css工具

阅读更多

【简报】帮助开发人员在线了解CSS Filter特性的工具 - CSS FilterLab

【简报】帮助开发人员在线了解CSS Filter特性的工具 - CSS FilterLab 

如果你对于CSS Filter不是很熟悉的话,今天介绍的在线工具CSS FIlterLab肯定可以有效的帮助你理解和实践CSS Filter,这个在线工具由Adobe开发,主要帮助大家在线实现CSS Filter和CSS自定义Filter的一些属性和操作。

在这个工具中,你可以设置不同的CSS Filter属性,例如,模糊, 亮度,对比度,阴影,反转等等。并且它能够帮助你自动生成对应的CSS代码。

最酷的功能在于,你可以使用Filter来创建基于keyframe的动画,并且使用到你的项目中去。

注意,这是一个开源的项目,因此你可以修改和Fork,相信大家会喜欢的!

 

网站:http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

 

标签: css, css filter, filterlab, adobe

阅读更多

【简报】超棒的免费Web字体服务:Adobe Edge Web字体

谷歌Web字体拥有当前最流行且最受欢迎的免费Web字体服务。最近Adobe推出了一个通过Typekit提供的名为'Adobe Edge Web Fonts'的替代品,这套新的内容包括了谷歌的Web开放型源代码字体等。当然很可惜,都不支持中文字体,不过如果你做国外网站或者外包的话,肯定还是可以用一用的。

adobe edge web fonts

字体服务使用起来非常简单,首先在Web页面中选择需要的字体,然后你将得到一个js文件。之后,在你的页面中引用这个js,并且在你的CSS中使用这个字体组合中就可以了。 是不是非常简单,还等什么,赶快使用起来吧!

标签: web字体, adobe edge, 字体服务, free

阅读更多

【简报】kube框架结构-一个小型响应式CSS框架

当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择。一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计。

kube框架

Kube Framework包括网格、按钮、表、排版的样式和一些其它你用得上的内容,比如链接或者图像等。对于一个开发人员来说,足够的灵活性和完整的自定义是非常有必要的。如果你也正处于新建一个项目时,不妨也来使用一下Kube框架吧。

浏览器兼容:

  • 最新版Chrome
  • 最新版Firefox
  • 最新版Safari
  • 最新版Opera
  • IE 8+


标签: kube框架, 响应式框架, css, framework, 框架

阅读更多

【简报】Metro UI CSS:Window8界面CSS框架

多年之后,Metro UI给Windows操作系统带来了翻天覆地的变化,并且这种变化也波及到了Web应用。Metro UI CSS是一套创建界面的样式,它是一个独立解决方案,也可以与其它框架联合使用。

Metro UICSS

包含了一些非常流行的风格,比如图像,提示,表格,按钮和印刷字体等。这个框架仍在努力完善中,以后将涉及到更多丰富的布局选项和功能。

via webresourcesdepot

标签: metro, ui, css, windows8, 界面框架

阅读更多

分享10个实用的超绚CSS3按钮设计

CSS3在web开发技术中绝对是超棒的!随着梯度,阴影,文字阴影和边界半径属性的添加,我们现在还可以使用简单的HTML标记和CSS3代码来创建非常漂亮的按钮。我们使用CSS3的好处在于简化了代码开发量。因为使用CSS3生成漂亮的按钮只需要几行代码,这意味着支持完全可编辑和可定制,你不必使用PS来开发图片了。

但是我们需要注意一件事,就是IE浏览器对于CSS3的支持,目前CSS3的是只有IE9支持,也支持浏览器特定的样式前缀(-moz,-webkit和-o)。所以,如果你需要支持IE7和IE8,你可能会为它创建一个fallback功能。

无论如何,你可以选择自己创建,也可以通过我们下面文章中精心编码设计的CSS3按钮之中选择一个,他们都可以直接使用。

基本上呢,你只需复制粘贴到你需要的CSS文件中,然后使用正确的HTML标记来使用这些CSS3生成的更灵活,可扩展的按钮!

希望大家喜欢这些设计!

Pretty…

标签: CSS3, CSS3按钮, css3 button

阅读更多

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

?ü?à

今日推荐