TAT.Minren CSS3 Transform的perspective属性
In CSS3,HTML5,Web开发 on 2012年10月29日 by view: 23,316
17

以下两行语句有什么区别?

如果大家不清楚,请听我娓娓道来。

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。

CSS3绘制腾讯QQ的企鹅Logo效果

今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。

 

一、如何使用CSS3来绘制图形?

网络上经常能够看到一些用CSS3绘制的精致图形,它们通常由矩形,圆形,椭圆,三角形,梯形等组合而成。要想绘制我们自己的图形,就要先了解下基本图形的绘制方法了。

TAT.Minren 使用Javascript动态管理CSS
In CSS3,HTML5,JavaScript on 2012年10月23日 by view: 26,926
6

 添加CSS

通常情况CSS不论是内嵌还是外联,都是预先定义好的。其实利用JavaScript,我们也可以动态在页面中插入或删除CSS。

比较常见的场景是:CSS动画。由于我们在设计网页时不能预知动画的具体细节,所以需要在运行时进行定制。比如,我们想让一个元素从右侧飞出屏幕,如果用keyframe动画实现,我们必须知道屏幕的宽度,这个信息只有在运行才知道。
例如下面的1026px,是运行时浏览器窗口的宽度。

TAT.iAzrael 使用CSS3绘制网格线
In CSS3 on 2012年07月19日 by view: 12,886
13

话说昨天在写在线素描的时候,想着给画布加上些网格,就跟PS里面的一样。但是用canvas画是不行的(注:不是它不行……),图片又让我不齿,就作罢了。

这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代码如下,很简单,自行修改调试即可:

We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with thesimulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.

Like in the previous article, you’ll find a video as well as the source code to download at the end of the article.

This article is the second part of this one: Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by usingExpression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article.

你是否遇到过这样的情景:

1、用gif格式的loading菊花会有背景颜色,与页面背景格格不入
2、于是,设计师给你一帧一帧变化的透明png合图,你能想到的就是用JS来控制
3、最终,你会发现用JS控制的loading菊花,对网页性能有一定的影响

        好在现在,这个HTML5到来的时代,如果你不用考虑浏览器兼容问题,你就可以用CSS3轻轻松松实现透明loading菊花的加载效果,下面的Step By Step 会让你茅塞顿开:

TAT.iAzrael CSS3模拟Checkbox
In CSS3,Web开发 on 2012年03月27日 by view: 4,333
4

话说, 很久很久以前, 一直到不久前, 浏览器原生的checkbox(复选框)的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.

而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让checkbox外观一统江湖, 苦不堪言.

在那个时代, css2和dom level2风行, 却对checkbox束手无策, 苦逼的攻城师们只能用JS来模拟checkbox的行为, 无辜的checkbox只能灰溜溜的束之高阁~.~


首先说这是一个神奇的播放器,为什么神奇呢,先直接看最终成果:



点击我查看demo