css
文章平均质量分 63
普通网友
这个作者很懒,什么都没留下…
展开
-
做一个略调皮的个人主页--相册与随笔篇
相册是有三种展开模式,分别是相册模式,照片墙模式以及手风琴模式。具体的形成就不说了,只说一下相册的hover事件还有展开效果。原创 2014-10-15 17:16:52 · 1167 阅读 · 0 评论 -
前端性能优化:使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用Data URI代替图片的src属性:当然页面大小会增加(如果你的服务器使用适当的gzip内容,这个增加会很小),但是你减少了潜在的请求,同时也在原创 2013-07-07 18:58:33 · 980 阅读 · 0 评论 -
帮助自动生成页面任何元素的Label的CSS类库 - Label.css
日期:2013-6-8 来源:GBin1.com在线演示 如果你需要针对页面任何元素生成说明性文字的话,Label.css是个不错的选择,它是用纯CSS的代码帮助你添加页面元素的说明性文字或者打一个标识。支持选项包括,显示文字的位置,包括上,下,左,右,中。 并且支持2种显示的动画效果: 淡入淡出和浮动。如果大家需要快速添加类似的效果,这个css是个不错的选择!原创 2013-06-09 09:29:02 · 648 阅读 · 0 评论 -
纯CSS的响应式图标字体 - Cikonss
日期:2013-6-15 来源:GBin1.com使用图标字体的最大好处就是,不用再使用图标了。在今天这篇文章中,我们介绍一个更酷的图标字体 Cikonss,和一般的图标字体不一样的地方在于,它使用CSS来创建图标项目,而不是字体。包含了40多个不同的图标类型,并且支持响应式的布局,并且兼容浏览器,因为不使用CSS3。网站地址:http://cikonss.zzapw原创 2013-06-15 22:38:32 · 563 阅读 · 0 评论 -
CSS渲染器:将Photoshop Filters效果带入网络
日期:2013-5-24 来源:GBin1.comChrome的Canary频道和Sarafi的WebKit nightly build,这两者现在都已经支持CSS渲染器的Photoshop风格混合模式,Adobe将Photoshop样式的过滤工具带入了网络。要应用最新的混合模式,你需要获取最新的Chrome Canary版本或者是WebKit nightly builds,在a原创 2013-05-24 16:52:59 · 615 阅读 · 0 评论 -
开源javascript/html/css的在线运行和调试 - editr
日期:2013-5-6 来源:GBin1.com大家肯定熟悉极客社区的gbdebug,jsfiddle和jsbin等在线调试和运行服务,今天这里我们介绍一个开源的在线运行服务,你可以非常方便的整合到自己的网站中。主要特性依赖jQuery和ACE Eidtor配置简单a支持单页面多个实例可以通过JS对象或者HTML属性来配置如何使用导入js:导入css:原创 2013-05-06 19:25:39 · 916 阅读 · 0 评论 -
CSS的未来:游戏的变革Flexbox
日期:2013-4-26 来源:GBin1.com相关阅读:使用Flexbox布局方式的简单演示HTML5和CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便是最有前途的CSS3现在也仍旧是在地平线上。虽然它可以创造出令人惊讶的复杂布局,例如CSS悬浮,定位规原创 2013-05-02 18:11:42 · 1677 阅读 · 0 评论 -
“一个网络”,两种口味:响应性对适应性
日期:2013-5-16 来源:GBin1.com编者的话:这是Mobify的CEO,Igor Faletski发表的一篇博文,Mobify,电子商务优化平台,为智能手机和平板电脑提供了适应网站的工具。你可能听人说过,“我们生活在后电脑时代”。这对网络开发者而言意味什么?它意味着你的网站,有30%到50%的流量来自于移动电子设备。它同时意味着,不久之后,桌面用户或者笔记本电脑用户将会原创 2013-05-16 12:50:25 · 1230 阅读 · 0 评论 -
超棒的CSS开源UI界面元素类库 - TopCat
日期:2013-4-25 来源:GBin1.comTopCoat是一套免费的开源UI元素类库,整套类库不使用任何javascript,而是使用CSS和HTML来生成。整套UI元素非常丰富,使用标准兼容的HTML/CSS来开发,并且支持响应式的布局,支持两套样式:移动和桌面,你可以直接在网站上查看所有的UI元素样式,当然,还有些元素依然在开发状态中,目前版本0.2。TopCat的使原创 2013-05-02 10:34:38 · 1839 阅读 · 0 评论 -
将CSS CLIP属性应用在:扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡。这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面。点击其中一个元素将创建一个切断图片的效果,展示将被宽展开的另一层。更多相关前端技术内容,请关注极客标签怎样做?首先,我们要创建一个原创 2013-03-19 13:58:09 · 757 阅读 · 0 评论 -
SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程
日期:2013-2-18 来源:GBin1.com什么是SASS?SASS英文意思是Syntactically Awesome Stylesheets Sass,最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式,帮助你更容易的维和和开发CSS内容。如果你不明白为什么用SASS,你可以先看看这篇文章 为什么需要将SASS和Compass原创 2013-02-18 11:16:46 · 661 阅读 · 0 评论 -
CSS3实现的图片加载动画效果
日期:2013-7-16 来源:GBin1.com在线演示 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!HTML CSS3 /* Effect 4: fall perspective */ .grid.effect-4 {原创 2013-07-17 07:11:09 · 2282 阅读 · 1 评论 -
创建CSS3警示框渐变动画
日期:2013-8-23 来源:GBin1.com在线演示 在线下载现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让原创 2013-08-23 21:56:30 · 1093 阅读 · 0 评论 -
web页面内容优化管理与性能技巧
日期:2013-8-14 来源:GBin1.com回想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片。然而,随着移动开发的兴起,我们又回到了过去的窘状。网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速。图片:控制在合适的尺寸大原创 2013-08-15 07:16:59 · 1540 阅读 · 0 评论 -
设计好玩的3D文字效果
在线演示本地下载好玩的3D文字效果,可以替换汉字。快来试试吧!原创 2014-10-15 16:50:51 · 621 阅读 · 0 评论 -
css选择器顺序的小技巧
在线演示本地下载css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了。这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧。首先是li标签的样式,这里就不说了,主要说一下hover的操作原创 2014-10-28 16:55:09 · 619 阅读 · 0 评论 -
即将来到: CSS Feature Queries (CSS特性查询)
Feature Queries 是CSS3 Conditional Rules specification中 的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否支持CSS属性和值对。CSS本身有降级机制,比如忽视 不支持的属性或值,但当很重要的属性直接被忽视也是很严重的,这个时候你可以用Feature Queries 测试是否支持所有的CSS规则,还可以优化你的页面。Queries在各个浏览器中已经有很多稳定的实现了,比如Chrome,Firefox和 Opera。原创 2014-09-12 15:38:09 · 842 阅读 · 0 评论 -
11个实用的CSS学习工具
不管你的CSS水平如何,我可以保证这些东西肯定能帮到你,如果你手上有正在进行的相关项目,或是其它不错的资源可以拿出来和大家一起分享。原创 2014-09-12 16:49:24 · 814 阅读 · 0 评论 -
CSS中:before和:after选择器的用法
在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧。阅读原文:CSS中:before和:after选择器的用法原创 2014-09-10 15:43:17 · 1199 阅读 · 0 评论 -
开发自己的One Page Scroll插件(二)
开发自己的One Page Scroll插件(一)5. 在其他浏览器中的特性我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈。我的开发模式是不断的迭代。在开始的时候,我不会太关注它在手机上的效果,其实到目前我也没有关注这个问题。但其实我使用了一个简单的解决方案。通过检测和转换数据,从而在手机上同样能执行init_scroll方法。但是这样做不总能达到效果,比如And原创 2014-09-10 14:40:00 · 856 阅读 · 0 评论 -
扁平风格手风琴式菜单效果
在线演示在这个课程中我们将使用jQuery,CSS和知名的font awesome图标字体来开发一个简单的扁平风格的手风琴菜单效果立刻访问课程:http://www.gbtags.com/gb/gbliblist/12.htm阅读原文:扁平风格手风琴式菜单效果原创 2014-08-05 17:49:46 · 746 阅读 · 0 评论 -
用Sass创建MetaFizzy效果
来源:GBin1.comHugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处,它比原版本的css多出了许多重复代码,我们找到了一种方法使其更加效率。重点:这是一个实验,如果你想要实验,请使用Ja原创 2013-09-04 23:39:01 · 817 阅读 · 0 评论 -
帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com的样式">的样式" width="550">在线演示 在线下载当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框莫属了。我们可以使用CSS来给定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。在这篇文章中,原创 2013-08-30 14:41:28 · 798 阅读 · 0 评论 -
如何构建下拉滑动式响应导航菜单
日期:2013-8-27 来源:GBin1.com在线演示 在线下载经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在原创 2013-08-27 22:45:37 · 1193 阅读 · 0 评论 -
你在视网膜技术上太逊了,快来补充知识吧!
日期:2013-2-7 来源:GBin1.com自从视网膜屏幕的MacBook Pro发行到现在已经过了很久了,但很多web开发者们还在抓着胸前的键盘,忽视进步,将自己推入一种黑暗的“像素恐惧症”的深渊。像素就是未来,它会不断出现在iPad、MacBook、iPhone或Android手机上。大量照片会向你扑过来,图标会浸透你的灵魂,字体通过屏幕像波尔卡舞的舞者一样给你滴迷魂药。原创 2013-02-07 13:51:47 · 503 阅读 · 0 评论 -
HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性
日期:2013-2-4 来源:GBin1.com不管你以前在web页面布局中如何称呼它们 - “区域”还是“块”,我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头,页面主题,页尾等等区域来实现所谓的页面布局。在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域,而为此我们定义了很多class来原创 2013-02-04 14:24:50 · 737 阅读 · 0 评论 -
【简报】Wirefy-响应式构架的框架工具
日期:2012-8-17 来源:GBin1.com如果你是一个web网站设计人员或者开发工程师的话,那么使用Wirefy将会对你开发一个网站原型非常的有帮助。它是一个帮助你开发响应式并且跨浏览器的CSS-JS框架。Wirefy创建的界面简单直观,不会让你的客户被颜色或其它样式给干扰,因为它让你更加专注于网站的布局和功能。这个框架包括所有的网站开发和设计需要的元素,例如布局、网格、原创 2012-08-17 10:48:01 · 696 阅读 · 0 评论 -
超棒的跨浏览器纯CSS动画实现 - Animate.css
日期:2012-8-12 来源:GBin1.com在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使用一些类库或者jQuery的animate方法,那么有什么方便的方法来快速实现动画效果呢?在今天的这篇文章中,我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester, UK的设计师Dan E原创 2012-08-13 13:31:47 · 1756 阅读 · 0 评论 -
帮助你生成纯CSS3动画开关效果的在线工具 - On/Off FlipSwitch
日期:2012-8-7 来源:GBin1.com在线演示以前我们介绍过在线生成纯CSS3的气泡提示的在线工具,今天我们这里介绍一个帮助你在线生成纯CSS实现的动画开关界面UI的工具 -On/Off FlipSwitch。这个工具可以帮助你自定义这个动画开关的UI,并且完全使用CSS3实现。同时它也拥有预定义的iOS4,iOS5和Android样式可供选择。如果你需原创 2012-08-09 13:02:46 · 757 阅读 · 0 评论 -
纯CSS实现的3D简洁按钮设计
日期:2012-6-22 来源:GBin1.com 在线演示 本地下载 今天我们介绍一篇来自Brandon Pierce的3D按钮设计。希望大家喜欢!基本HTML 图标字体CSS......来源:纯CSS实现的3D简洁按钮设计原创 2012-06-25 14:25:47 · 598 阅读 · 0 评论 -
最新的Javascript和CSS应用技巧荟萃
日期:2012-7-6 来源:GBin1.com随着前端技术的发展,javascript和css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢!CSS动画和过渡效果随着CSS3原创 2012-07-06 17:50:38 · 743 阅读 · 0 评论 -
推荐20款最新的超棒CSS技术教程
日期:2012-5-15 来源:GBin1.com设计行业是当前发展最快的行业之一,设计师需要了解最新的视觉设计趋势,及其类似jQuery,HTML5,CSS3的互动技术。在今天这篇文章中,我想与大家分享这20个最新的CSS教程,大家可以参考里面的网页设计元素,从中找到适合自己的内容。希望对大家都有所帮助!Quickly Build a Swish Teaser Page With CS原创 2012-05-22 17:16:36 · 1432 阅读 · 0 评论 -
CSS3浏览器在线兼容查询工具 - Browser Support
日期:2012-5-12 来源:GBin1.com今天我们介绍一个非常不错的用来查看不同浏览器下CSS属性兼容性的在线工具 - Browser Support,如果你需要查看不同浏览器下CSS的兼容性的话,这个工具肯定能帮你大忙,特别如果你想在你的项目中使用CSS3的话,这个工具肯定也是你不错的选择。使用这个工具,你可以输入需要查询的属性,当然这个工具拥有自动补齐功能,使你可以更原创 2012-05-14 15:48:26 · 892 阅读 · 0 评论 -
推荐16款每周设计灵感
日期:2012-4-19 来源:GBin1.com网页设计是一个快节奏的工作,每天都需要有新的设计诞生,下面我们推荐16款每周设计灵感,希望大家能从其中找到适合自己且对自己最有用的网页设计,也同样希望它们可以激发出你潜在的创造力!希望大家喜欢!God Is LoveModal Window InterfaceNotebookiPhone UI WIPC原创 2012-04-19 16:17:58 · 531 阅读 · 0 评论 -
CSS伪类(pseudo class)简明介绍之:before和:after
日期:2012-4-26 来源:GBin1.com在线演示 本地下载 在线调试如果大家经常关注互联网新网站和应用的话,或者你喜欢收集不同的网站模板,你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助!如果你喜欢我们的文章,或者有任何问原创 2012-04-27 19:49:14 · 1196 阅读 · 0 评论 -
免费素材下载:超酷的简单按钮UI
日期:2012-4-23 来源:GBin1.com今天分享一套来自alessioatzeni的超棒简单按钮UI,包含了2个主题的5个类型的按钮。提供了PSD格式的下载,所有的元素都是矢量格式,你可以自由的修改图片大小。希望大家喜欢!主题颜色:黑色和蓝色本地下载来源:免费素材下载:超酷的简单按钮UI原创 2012-04-25 13:02:19 · 930 阅读 · 0 评论 -
【简报】创建线框结构的PDF格式草图表
日期:2012-9-2 来源:GBin1.com任何设计师开始设计网站时要做的第一件事就是创建线框图,使用它们可以帮助你创建大家可以接受的行为和样式。Sneakpeetit是一个可以提供高质量PDF格式草稿图的网站。这套表格与当前最流行的网格系统相兼容,当然也少不了LESS Framework 4,978网格系统,1140CSS grid,语义网格系统和来自Twitter的Boots原创 2012-09-03 11:33:16 · 905 阅读 · 0 评论 -
【简报】Metro UI CSS:Window8界面CSS框架
日期:2012-9-6 来源:GBin1.com多年之后,Metro UI给Windows操作系统带来了翻天覆地的变化,并且这种变化也波及到了Web应用。Metro UI CSS是一套创建界面的样式,它是一个独立解决方案,也可以与其它框架联合使用。包含了一些非常流行的风格,比如图像,提示,表格,按钮和印刷字体等。这个框架仍在努力完善中,以后将涉及到更多丰富的布局选项和功能。来原创 2012-09-06 13:40:14 · 644 阅读 · 0 评论 -
【简报】帮助开发人员在线了解CSS Filter特性的工具 - CSS FilterLab
日期:2012-10-1 来源:GBin1.com 如果你对于CSS Filter不是很熟悉的话,今天介绍的在线工具CSS FIlterLab肯定可以有效的帮助你理解和实践CSS Filter,这个在线工具由Adobe开发,主要帮助大家在线实现CSS Filter和CSS自定义Filter的一些属性和操作。在这个工具中,你可以设置不同的CSS Filter属性,例如,模糊, 亮度原创 2012-10-08 14:55:28 · 462 阅读 · 0 评论 -
避免CSS初学者常犯的那些错误
日期:2013-2-3 来源:GBin1.com1.不要忘记引号!font family: "Times New Roman", "Times Roman", Roman, serif;2.正确的注视样式表。 /* This is a CSS Comment */3.不要忘记了标点符号.class {margin: 0;padding: 0 3px 0 3px;原创 2013-02-04 14:22:26 · 502 阅读 · 0 评论