标签归档：Front-end Tech

CSS3 Essentials Notes from Day7

发表于 由
回复

1.Repeating gradients and shuffled paper

 

QQ截图20120219111227

Major elements:

z-index:-1;   To place other papers unde the main paper.

-webkit-transform:rotate(4deg);

-webkit-transform:rotate(-4deg);   decorate the paper's style.

-webkit-linear-gradient(top,#81cbbc,#fcf59b 2%);        Setting the form of lines of the paper.

 

2. CSS-Only slider

 

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

body{
	width:360px;
	margin:auto;
	font-family:sans-serif;
	text-align:center;
}
 
h2{
	font-size:23px;
}
 
.slider-wrap{
	width:360px;	
	overflow: hidden;
 
}
 
.slider-wrap ul{
}
 
.slider-wrap ul{
	width:10000px;
	position: relative;
	padding:0;
	margin:0;
	-webkit-animation:slide 20s ease-out infinite;
}
 
.slider-wrap li{
	float: left;
	list-style:none;
	position: relative;
}
 
.slider-wrap h5{
	position:absolute;
	width:100%;
	bottom:4px;
	background:rgba(0,0,0,.3);
	color:white;
	padding: 10px 0;
	margin-bottom:0;
	overflow: hidden;
	-webkit-animation:headings 20s ease-out infinite;
}
 
.slider-wrap ul:hover,
.slider-wrap ul:hover h5{
	-webkit-animation-play-state:paused;
}
 
.slider-wrap a{
	text-decoration:none;
}
 
@-webkit-keyframes 'slide' {
	25%{
		left:0;
	}
	35%,50%{
		left:-360px;
	}
	60%,75%{
		left:-720px;
	}
	85%,95%{
		left:-1080px;
	}
}
 
@-webkit-keyframes 'headings' {
	25%,35%,50%,60%,75%,85%,95%{
		bottom:4px;
	}
	28%,53%,78%,98%{
		bottom:-200px;
	}
}

6种编写HTML和CSS的最有效的方法

发表于 由
回复

 

　　写HTML5和CSS3，以及JavaScript，前端开发者有了大大的用武之地。大家都在用很多的工具和技术来武装自己，以加快前段的开发。

　　本文分享了6中最有效的方法，希望能提供你的效率，为你节约时间。

　　1. Dynamic CSS（动态 CSS）

　　如果你想加速你的CSS代码编写，那么你需要学习并掌握动态CSS。大部分的动态CSS增加了nested riles,variables, mixins, selector inheritance功能，这里提高代码的利用率。

　　2. HTML snippets（HTML 片段）

　　使用代码片段是个编写HTML代码的一个很快的方法。推荐Zen Coding和HAML。首先，它会让你提速很快，其次，可以规避一些人为错误，因为所有的代码都是被测试和正确生成的。

　　3. CSS reset（CSS 重设）

　　CSS reset的优势是避免了浏览器的不兼容。推荐：Eric Meyer's CSS reset 和YUI.

　　4. CSS Grid layout（网格布局）

　　不少的开发者，都没有使用CSS 网格布局。网格布局的理念来自于传统的印刷出版，在web上，网格布局在杂志类型模板/网站中非常重要。该方法已经被大量的开发者证明是提升产品设计速度的有效途径。

　　CSS 网格布局具有很好的跨平台支持等特性，下面再介绍一些相关的资源：

　　5. HTML/CSS 编辑器

　　你需要一个好的代码编辑器，除了notepad之外，还有很多，它们各具特色。比如coda的ftp引擎十分的稳定。

　　6. 其他在线工具

　　下面的一些工具，还是可以帮助你省下那么一点的时间的。

　　如果你刚刚学习HTML和CSS，那么还是建议扎扎实实地来手写代码。如果你已经有了坚实的基础，那么就尝试上述的方法吧。

　　Enjoy coding :)

　　原文：http://www.queness.com/post/8004/6-most-effective-methods-to-code-html-and-css

网页开发的6种在线调试环境

发表于 由
回复

 

如今的网页代码，一般由三个部分组成：

　　* HTML，语义层，提供网页的内容。

　　* CSS，表现层，规定网页的外观。

　　* Javascript，动作层，定义用户与网页的互动。

理想的开发环境，应该既可以分别调试这三种代码，又可以轻松查看它们合并在一起的整体效果。

浏览器是最合适的效果查看工具，所以很多人想到，代码调试环境也可以直接部署在浏览器中，以网站的形式提供服务。

下面，我根据Design Shack的文章，总结一下目前最常见的6种网页开发在线调试环境。它们大大方便了网页设计师的工作，极大地提供了工作效率。

一、CSSDesk

网址：http://cssdesk.com/ （需翻墙）

这个网站是最早出现的在线调试环境之一，主要用于调试CSS。

左侧两个面板，可以分别输入html和css代码，但不支持Javascript调试。

你可以改变"预览区"的背景颜色，可以保存或下载调试完成的代码。

二、Dabblet

网址：http://dabblet.com/

Dabblet也是一个CSS调试环境，不支持Javascript调试。

它将网页效果分成"CSS效果"、"HTML效果"和"整体效果"三个面板，方便单独调试。

它最大的特点有两个，一是动态显示代码效果，代码一输入，效果就自动显示出来；二是显示CSS提示，比如上图的字体效果和长度效果。

三、JS Bin

网址：http://jsbin.com

这是一个较早出现的Javascript在线调试环境。

它分成Javascript、html和"效果预览"三个区域，你可以自行勾选显示哪些区域。它没有独立的CSS代码区，CSS代码必须嵌入html代码，这点很不方便。

它支持加载常用的Javascript库。除此以外，其他特色不多。

四、jsFiddle

网址：http://jsfiddle.net/

jsFiddle是目前最受欢迎的在线调试环境。

它的默认界面分成5个区域，左边是参数设置，右边依次是HTML、Javascript、CSS和"效果预览区"。

除了加载常见的Javascript库，它还支持SCSS代码和CoffeeScript代码。你甚至可以把它的窗口嵌入自己的网页。

五、Tinkerbin

网址：http://tinkerbin.com/

Tinkerbin很像jsFiddle，也是分成HTML、Javascript、CSS和"效果预览区"。

它的特点在于，你可以选择某种代码独占整个编辑区，这样就增大了代码编辑的可视空间。另外，它可以实时显示代码运行结果，这是jsFiddle不支持的。

它支持的代码种类相当多，比如 HAML、SCSS、LESS和CoffeeScript。

六、Rendur

网址：http://rendur.com/

Rendur是一个轻量级在线调试环境，功能不多，但是加载和运行都很快。

用户可以在HTML、CSS、Javascript三个面板中切换，输入相应代码。代码的运行结果，会自动显示在背景网页上。最后一个面板，显示的是整个网页的源码。

 

From:http://www.ruanyifeng.com/blog/2012/02/6_online_playgrounds_for_web_developing.html