2013年05月_whqet

05月

原创紧跟大牛，不做“out”man

网页技术飞速发展，前端从业者一个很重要、也是很有挑战性的工作就是紧跟时代，及时了解那些新技术、新工具、新趋势。每天要发表成千上万的blog或者技术文章，你能每一篇都看过吗？你能及时关注每一个牛人的新动向吗？

2013-05-26 14:08:24 4118 2

翻译 18佳使滚动技术更上层楼的网站

本文由whqet翻译自WDL，18 Websites that Take Scrolling to t

2013-05-20 16:21:03 5307 3

原创前端业者的双面人生-coder&designer

前几天偶然间看到了Adham Dannaway的网站，首页的效果狠感人，让人耐不住冲动想研究研究，这不

2013-05-18 12:18:01 12239 11

原创响应式布局的相册效果

响应式布局的相册效果，效果如下图所示，或者看看demo，记得调整浏览器宽度哟，或者直接下载。开始制

2013-05-17 14:42:18 3514

翻译扁平设计时代-The Flat Design Era

本文由前端开发whqet翻译自WDL， Claude Meri 2013年5月1日发表的文章，The Flat Design Era。扁平设计扁平设计的设计风格，力图避免任何形式的

2013-05-16 10:46:41 3728 1

翻译 Modernizr & YepNope Tips

本文由前端开发whqet翻译自WDL，Rochester Oliveira2013年5月2日写的文章Modernizr & YepNope Tips。每天都有新的更好的浏览器版本产生，

2013-05-15 21:46:23 3957

原创 CSS3 工具推荐（不断更）

收集一些实用的CSS工具，不断更新中，请持续关注。一、代码生成工具1.CSS MaticCSSmatic是一个非营利性的 CSS 工具，目前包含4个很有用的工具，分别是：支持各种颜色和透明度的渐变工具，使用渐变工具，您可以创建渐变平滑的色彩

2013-05-14 14:05:23 4881 5

翻译 21佳网页白色应用

本文由whqet翻译自WDL，21 Beautiful Examples of Using White in Web Design。前端开发whqet，关注前端开发技术分享网页相关资源。White is certainly an elegant color, and when properly used in web design, it can deliver really beaut

2013-05-14 09:42:56 2900 1

翻译成功的UI是无形的-A GREAT UI IS INVISIBLE

本文翻译自A GREAT UI IS INVISIBLE，codrops.前端开发whqet，关注前端开发技术分享网页相关资源。一个可以向用户提供无缝交互体验的无形界面，可以帮助用户专注于自己的目标，逐步引导他们达成所需。一个真正设计精良的UI应该让用户察觉不到它的存在，差的用户界面则往往喧宾夺主，强迫用户关注花哨的界面，从而忽略内容。用户登录某个网站

2013-05-14 06:07:17 3022 1

原创纯CSS3打造精美按钮

利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术分享网页相关资源。实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。html结构非常简单，详细代码如下。 Number One Number Two Number Three Number Four Nu

2013-05-13 22:32:42 3418

原创 Font Icon 的资源推荐

关于Font Icon的教程How to Use Icon Font?@font-face@font-face制作Web Icon Icon font 实践如何把你的图标转换成web字体Font Icon的资源30 Free Icon Font SetsAbsolutely Free Icon Fonts20 @fontface Icon S

2013-05-12 20:46:03 2316

原创详解CSS3渐变

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、re

2013-05-11 17:44:34 3154 3

原创纯CSS3时钟

一、效果欣赏纯css3打造精美时钟效果，效果如下图所示，也可看看----demo-----二、难点解析单独位数数字动画动画状态的控制三、实现步骤1.html架构 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 : 0 1 2 3 4 5 6

2013-05-07 13:44:33 2535 3

原创纯CSS3进度条制作-Pure CSS3 Progress Bar

1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----2.难点分析圆角边框，内阴影，渐变填充实现斜纹效果斜纹动画3.实现步骤a.html架构 b.进度条母条.progressBar的实现.progressBar{ margin: 50px auto; padding: 5px;

2013-05-06 22:01:27 5403

原创响应式网页设计学习笔记

一、why随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。图1.当前流行的网页浏览设备图2.网页运行于不同的操作系统图3.当前主流的屏幕尺寸对比

2013-05-06 12:27:19 3935 3

原创 CSS3实现动画相册

1.效果解析CSS3实现的动画相册，很棒的鼠标hover效果，效果如下图所示，参见--------demo---------2.难点分析难点1，圆形遮罩难点2，:after实现提示文本难点3，css3实现动画3.实现步骤a.html架构使用无序列表来布局图像，图像的提示文本使用:after读取a的title属性。

2013-05-05 22:23:59 3059

原创 CSS3实现的单div图标

最近研究纯css3实现绘图，无意中找到one-div.com,利用一个div去实现一个图标，如下图所示。牛，研究研究。利用css实现的icon可以方便的进行缩放而不失真，同时添加动画效果也变得轻而易举。下面来实现下礼品的这个，--demo--1.难点分析一个div实现这个效果，刚开始会不够用，尤其是礼品盒下面的四个盒子。div做一个矩形，剩下的几个用box-sh

2013-05-05 09:54:38 3457 2

原创 CSS3实现类mac风格的文件夹打开效果

1.效果分析纯css实现的类mac风格的文件夹打开效果，效果下图所示，具体效果参见demo。代码解析简单起见，仅仅支持firefox浏览器，感兴趣的读者可以自行支持其他浏览器。主要使用linear-gradient、border-radius、box-shadows实现绘图，使用transform、transition实现动画。2.技术难点难点1在于利用before和aft

2013-05-04 20:29:32 3792 2

原创纯CSS3实现的标签效果

1.效果分析纯CSS3实现的标签效果，如图1所示，看看demo。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面圆点的实现。2.技术难点三角形利用宽和高为零的元素的边框实现。将边框设置为12px solid transparent，然后将右侧边框颜色设置为#0089e0即可。border:12px solid transpar

2013-05-03 21:42:19 3808

原创记录、反思

利用blog做一个记录、反思的平台，为自己加油！

2013-05-03 19:49:41 2473 3

纯CSS3实现图像鼠标悬停效果

主要利用css3transition、transform实现鼠标悬停效果，很不错的效果，定然不让你失望，可以到http://blog.csdn.net/whqet/article/details/22891391了解详情。

2014-04-13

图像多维展示效果

在Awwwards上欣赏牛人大作时，看到了一个网站newtonrunning，狠喜欢他的菜单切换效果和球鞋多维展示效果，然后禁不住手痒仿制了一个多维图像展示效果，大家可以到我的博客http://blog.csdn.net/whqet查看详情。

2014-04-13

纯css实现的3d翻转效果

纯css实现的3d翻转效果，可以用来学习理解css的3d动画实现，思路借鉴。

2013-04-30

AS3焦点图 Flash ActionScript 3.0 焦点图经典网络应用程序

AS3写的焦点图。AS3焦点图 Flash ActionScript 3.0 焦点图经典网络应用程序。XMl文件读取。/* 用到了知识点： Timer XML URLLoader pic Loader 按钮按钮单击事件 */ /** 思路：不进行缩放 1.初始化，控制面板背景，表示标题的动态文本，控制的按钮，生成提示当前图片的按钮。 2.读取XML，把里面的图片信息（图片地址和图片标题）获取进来，生成按钮 3.自动播放，Timer 4.鼠标控制 */ //控制控制面板的位置，0代表上方，1代表下方

2011-01-18

空空如也

TA创建的收藏夹 TA关注的收藏夹