w3cTrain

Keep Moving

众所周知,浏览器会为我们创建基本的样式。比如<h2>,我们不需要为它写任何css样式,在浏览器上展示出来,一眼就只知道它是大标题。问题是,不同浏览器之间的默认效果不尽相同,于是乎,在Chrome下很漂亮的样式,去到Firefox下可能整个页面都变得一团糟(当然也有可能是其他原因)。

举个栗子,IE浏览器下的<ul>标签的margin-left值为30pt,但是在Firefox,Chrome,Safari<ul>默认属性是padding-left:40px。所以我们需要考虑下浏览器兼容性。

###IE盒子模型
https://dn-w3ctrain.qbox.me/ie_box_model.jpg

Read More...

在这篇教程中,我将为你介绍如何在页面滚动时触发css动画。这种效果使用JavaScript&CSS就能做到。

Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS transform animation就被触发了。

想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。

##The markup

那么我们开始了,首先是写好html标签,revealOnScroll类必须家在需要在滚动时触发的元素上面。

1
<div data-animation="flipInX" data-timeout="400">...some content here...

Read More...

我在前端开发过程中经常遇到两个Inline-Block元素中间出现空格的问题,特别是横向导航栏,于是打算写一篇文章记录一下。

问题大概是这样的:
我写了HTML,CSS代码如下

1
2
3
4
5
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Read More...

https://dn-w3ctrain.qbox.me/wwdc15.jpg

每年,苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。

每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。

##WWDC 15 invitation

苹果的图标通常都会使用颜色和形状的叠加,比如iOS 7 Photos图标。今年WWDC邀请函用了上面这货。

它由一些列层叠和半透明的形状构成,非常适合用HTML和CSS来实现。

##Planning: HTML

设计这样一块负责的东西需要稍微分析一下。首先,我把它分解成各个部分。
大方向看它是由三种形状构成的,主要图形为8个大圆,我先把它们列出来:

1
2
3
4
5
6
7
8
<div class="large circle one"></div>
<div class="large circle two"></div>
<div class="large circle three"></div>
<div class="large circle four"></div>
<div class="large circle five"></div>
<div class="large circle six"></div>
<div class="large circle seven"></div>
<div class="large circle eight"></div>
Read More...

有天,我坐在电脑前。
你走过来问我,你的电脑里面有没有AV。
我说,我没有,但是我可以随便黑了别人的电脑看看他们有没有。
不要问为什么,因为我是程序猿啊!

我旋转座椅,手速超快,瞬间代码满天飞。

片刻,我copy了一份小泽玛利亚的全集,拿给你,从你求鸡若渴的眼神里我能看出你很仰慕我的h4ck3r sk1llz。

;-),想学啊你,我教你啊!

点击这里

DIY?

Github地址在这里修改kernel.txt文件即可。

我用了CSS和一点JavaScript来演示如何生成”汉堡包”动画。

http://w3bits.com/wp-content/uploads/animated-hamburger-icons.jpg

前面的文章中,我把我对导航栏菜单(也被成为”汉堡包图标”)的动画灵感发布出来。结果收到了不少粉丝的称赞,我先谢谢你们了。

我决定在这方面下多点功夫,于是我写了一系列不同的动画实现方式。在这片文章中,你将会看到6个不同”汉堡包”动画的增强版。

我使用了一点JavaScript来触发动画,在继续研究下去之前,你可以先看看Demo (译者:如果打不开,请点击文章最下面的Demo)

Read More...