Posted by s5s5 on 2010年03月31日
最近研究CSS3的动画，还是相当的强大啊，做了一个小皮球跳跳的动画 DEMO，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
< !doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 animation</title>
<style>
.animation {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
-webkit-border-radius:100px;
position: relative;
left: 0;
top:100px;
width:100px;
height:100px;
text-align:center;
line-height:100px;
background:#F00;
}
@-webkit-keyframes bounce {
from {
top: 0;
-webkit-animation-timing-function: ease-out;
}
25% {
top: 110px;
-webkit-animation-timing-function: ease-out;
}
50% {
top: 50px;
-webkit-animation-timing-function: ease-out;
}
75% {
top: 90px;
-webkit-animation-timing-function: ease-out;
}
to {
top: 100px;
}
}
</style>
</head>
<body>
<div class="animation">皮球</div>
</body>
</html>
|
[......]
继续阅读
Posted by s5s5 on 2010年03月31日
YSlow计算公式
F = 8×{100-[4×(JS文件数-3)+4×(CSS文件数-2)+3×(CSS背景图连接数-6) ] } +6×(100-10×未使用CDN的连接个数) +10×[100-11×(Expire时间小于172800秒的连接个…
HTML5 – 新旧语法简介
米：把DIV标签淘汰，晕，我认为这是不可能的。语义化标签不可能覆盖所有的东东吧，总要有一个万能的、中性的标签来表现哪些灰色地带吧~
CSS3变换入门
我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。
[......]
继续阅读
Posted by s5s5 on 2010年03月28日
昨天参加了第六期WEB标准化交流会(深圳站)的活动，因为之前在公司里做过一个关于“协作沟通”的分享PPT，所以在交流会上也丢了这个砖下去希望引起大家的一起金玉良言出来，呵呵。辛苦组织的同学早早的准备了一切，大家聊的比较开心。特别是来了很多深圳同行业的专家，以前这种会还是太少了，以后还是要多多有这样的一些交流会大家互相学习研究才好~
在会上大家主要围绕着工作当中经常遇到的“沟通”、“项目工作量与进度”、“紧急需求插入”、“项目周期安排”、“上流设计稿交付延期”、“流程建设”、“并行开发”、“模块化”、“版本更新的影响”等问题深入的交换了意见，现在好象主要记录如下一些关键点：
[......]
继续阅读
Posted by s5s5 on 2010年03月23日
“有一种失败叫占领，有一种胜利叫撤退”。在《潜伏》中有这么一句话非常经典，当时是老将围剿延安，而老毛战略撤退让出延安，然后运动了几圈消灭老将的部队。当时延安坚壁清野，找不到任何食物，老乡们也不给任何关于老毛的情报。而且民兵也多，老将的部队经常受到袭击，分不清哪是主力；并且遍地都是地雷，老将部队伤亡惨[......]
继续阅读
Posted by s5s5 on 2010年03月14日
原文地址：http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
作者：Nicolas Gallagher
译者：米随随
聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的HTML哦。
在CSS文件中有大量对代码的注释，可以让你方便的看懂这些代码。（译者：在翻译时作者要求DEMO页面要用原先的网址，所以这些注释没有翻译，当然当你看完本文，了解清楚实现方式，哪么不看注释也是可以看懂代码。）
查看DEMO：纯CSS聊天泡泡
[......]
继续阅读
Posted by 米随随 on 2010年03月11日
Progressive enhancement: pure CSS speech bubbles
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.
The FWA
FWA stands for Favourite Website Awards, an industry recognised internet award program and inspirational portal, established in May 2000.
Webkit内核探究【2】——Webkit CSS实现
关于CSS的介绍网上已经有很多了，在这里将主要从Webkit实现的角度对其进行介绍。
[......]
继续阅读
