CSS画三角形的动画演示

该Demo来自chris coyierAnimation of How CSS Triangles Work

如果看不到Demo,则是被和谐了。

See the …

[翻译]使用SVG

原文地址

http://css-tricks.com/using-svg/

什么是SVG?

svg是和种矢量图形格式,全拼是:Scalable Vector Graphics (就像AI中的矢量图一样)。在网页上使用SVG很简单,但是有一些东西是你需要知道的。

为什么要用SVG?

  • 很小的文件格式
  • 缩放到任意大小都不会失真(超小的情况除外)

CSS3-含苞待放

花从何来(:before+:after)

Demo,觉得好玩儿,照葫芦画瓢了一下:

最终的效果:Demo

在这个效果里面,有很多的“花瓣”,我们需要考虑的就是这些“花瓣”从哪里来,如何分散到四周等等。

在HTML中,最基本的只需要一个元素就好了,这里我放一个div.flower(~~为了好看,还是在里面放一个笑脸吧~~)。

<div class="flower">
	<h1>\^_^/</h1>

盒子含图片-高度多出几个像素的问题

li里有图片的情况

有如下这样一段HTML:

<ul>
	<li><img src="demo.jpg" alt="" /></li>
	<li><img src="demo.jpg" alt="" /></li>
	<li><img src="demo.jpg" alt="" 

[翻译]CSS3制作一个立方体

原文地址

http://css-tricks.com/creating-a-3d-cube-image-gallery/

先看一下最终完成的效果,以冲淡一下译文的乏味与枯燥:点击Demo进行查看效果。

拆解立方体

一个立方体很明显是由六个面组成的,而这六个面将分别是六个HTML元素组成的,在这个案例中,这六个HTML元素分别是六个div。因为它们将要被旋转变形成一个立方体,所以它们需要被一个容器包含起来,如果我们按照这个思路的话,可以写出这样的HTML:

<div class="cube">
    <div class="cube-face"></div>
    <div 

16.FlexBox弹性盒子详解

RUNTIME: 50:50

详细介绍 CSS3 中的FlexBox 布局。
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。