优大网

标签存档： HTML

加速编码的17款最棒的CSS工具

2013年6月25日 / / 暂无评论

摘要：文章中收集了加速编码的17款最好的CSS工具；以帮助开发人员和设计人员简化工作。利用它们可以生成CSS菜单、动画影像、按钮、滑块、动画文本、CSS形状代码、图层还有很多其他的。

不用介绍，软件开发界的“地球人”都知道CSS，因为它是最流行的一种样式设计语言。学习和使用CSS已经不再是一件棘手的事，因为在网上可以获得很多信息教程和CSS工具。这些工具有助于你创造出有用的、有创新的Web应用程序，同时节省更多开发步骤和时间。

文章中收集了加速编码的17款最好的CSS工具；以帮助开发人员和设计人员简化工作。利用它们可以生成CSS菜单、动画影像、按钮、滑块、动画文本、CSS形状代码、图层还有很多其他的。希望这个列表对你的开发工作有用。

1. Topcoat : CSS for Clean and Fast Web Apps

Topcoat是一个程序库，包含CSS类用于创建表格元素、按钮、复选框、滑块等。这个轻量级的工具可以让你设计的网页或者App看起来相当不错。

2. PCSS : Shortcut Oriented Server Side CSS3 Preprocessor

PCSS是一款由PHP驱动的CSS预处理器，它可以帮助开发者通过定义变量、类测试、默认单元和服务端浏览器细节，以达到快速编写CSS代码的目的。PCSS使用PHP5来实现服务端处理，因此正在运行的网站服务器上需要具备这个PCSS版本。

3. Skeleton

Skeleton是一款较小的CSS文件集合体，它可以帮助开发者快速创建适配任何尺寸的网站，无论是在17寸笔记本屏幕或iPhone上。Skeleton的构建基于三大规律：快速响应到手机，迅速启动和独一无二的风格。

4. CSS Menu Maker

这个工具帮助用户轻松创建CSS下移菜单。CSS菜单编辑器提供网络专业人员和工具，帮助开发人员构建个性化的、跨浏览器相兼容的CSS菜单，同时还为所有的CSS菜单和设备用户提供源代码，以便下载和调整代码。

5. Sencha Animator

这是一个桌面应用程序，允许用户创建专门用在触摸屏移动设备和Webkit浏览器上的CSS3动画。 Sencha Animator还可以协助用户创建动画文本、图片、倾斜按钮和内嵌分析。

6. CSS Form Code Generator

CSS Form Code Generator可以制作布局好看的表格，也可以制作出布局简单的色彩表。这个“Code Maker”生成的CSS布局代码也可以为这些表格添枝加叶。

7. PrefixmyCSS

PrefixmyCss可以简简单单的为CSS3代码添加前缀。用户必须复制CSS代码到窗口才能添加前缀，供应商已提前在代码上添加了前缀，用户可安全放心的替换旧的代码。

8. Sky CSS Tool

Sky CSS Tool允许你创建CSS类时几乎不需要使用手写代码。用户可能需要与JavaScript相兼容的浏览器来确保正常运行。

9. Spritemapper

Spritemapper是一款可以合并多个图片的应用程序，为相应的片段生成CSS精确位置。此款工具可以帮助开发者优化可用空间和加载时间。

10. CSS Compressor

CSS Compressor通过压缩CSS来提高加载速度，还可以节约带宽。依据你对CSS的压缩程度和代码的易读性，它提供了三个级别的压缩。

11. Patternify

Patternify可以帮助你生成漂亮的CSS模板。

12. CSS Text Shadow

CSS Text Shadow帮助使用者生成漂亮的文字阴影。

13. CSS3 Pie

CSS3 Pie在IE 6-9下可以渲染出最有用的CSS装饰功能。

14. The Web Font Combinator

该工具旨在浏览器下快速预览字体，无需一遍遍的刷新。近些年出版的书也都让标题字体紧挨着正文字体，这也是一种网络再创作的尝试。

15. 3D Transforms

CSS 3D变换器是一款在线工具，用户使用它可以执行多种级别的3D转换。目前此工具还处在实验模式下，在使用的时候，需要在浏览器下制定浏览器前缀。

16.  Quick Form Builder

Quick Form Builder有助于便捷地创建CSS表单。

17.  Layer Style

这是一款HTML5 App，用一种直观的方式创建CSS3。其内置的Colorpicker允许用户选择各种颜色，还便于用户拖放图片到页面，使用它们作为背景或挑选他们喜欢的颜色。（编则/张红月）

原文：codegeekz

http://www.csdn.net/article/2013-06-24/2815973-17-Best-CSS-Tools-to-Speed-Up-Your-Coding

Web开发者不容错过的20段CSS代码

2013年5月28日 / / 暂无评论

摘要：共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

 

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

 

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
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

 

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

 

1
2
3
4
5
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 <font></font> 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

 

 

3.升级版的Clearfix

在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。

1
2
3
4
.clearfix:before, .container:after { content: ""; display: table; }<font></font> 
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

 

 

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

1
2
3
4
5
6
.transparent {
    filter: alpha(opacity=50);/* internet explorer */
    -khtml-opacity: 0.5;     /* khtml, old safari */
    -moz-opacity: 0.5;      /* mozilla, netscape */
    opacity: 0.5;          /* fx, safari, opera */
}

源码地址： http://perishablepress.com/cross-browser-transparency-via-css/ 

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
blockquote {
    background: #f9f9f9;<
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote; 
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}

查看源码： http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ 

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px; 
    border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-rightright-radius: 3px;
    -webkit-border-bottom-rightright-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}

 

7. 一般媒体查询

这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

 

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
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) { 
  /* Styles */
} 
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
} 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
<font></font> 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}  
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

源码地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 
  
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 
  
/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
  
/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
  
/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 
  
/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 
  
/*The heavier “Impact” sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 
  
/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

 

源码地址： http://www.sitepoint.com/eight-definitive-font-stacks/ 

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

 

1
2
3
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

 

 

10.隐藏Logo上的H1文本

 

1
2
3
4
5
6
7
h1 {
    text-indent: -9999px; 
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url("images/logo.png") no-repeat scroll;
}

 

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

 

1
2
3
4
5
6
7
8
9
10
img.polaroid {
    background:#000;/*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;/* Standard blur at 5px. Increase for more depth *
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; /*Set to height of your image or desired div*/
    width:200px;/*Set to width of your image or desired div*/
}

源码地址： http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3

 

12. 锚链接伪类选择器

1
2
3
4
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

源码地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

 

 

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。

 

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
.has-pullquote:before {
    /* Reset metrics. */
    padding: 0;
    border: none; 
    /* Content */
    content: attr(data-pullquote);
    /* Pull out to the right, modular scale based margins. */
    float: rightright;
    width: 320px;
    margin: 12px -140px 24px 36px;
    /* Baseline correction */
    position: relative;
    top: 5px;
    /* Typography (30px line-height equals 25% incremental leading) */
    font-size: 23px;
    line-height: 30px;
}
.pullquote-adelle:before {
    font-family: "adelle-1", "adelle-2";
    font-weight: 100;
    top: 10px !important;
}
.pullquote-helvetica:before {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}
.pullquote-facit:before {
    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}

源码地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/

 

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。

1
2
3
4
5
6
7
html {
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

源码： http://css-tricks.com/perfect-full-page-background-image/

 

15. 内容垂直集中

相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

 

1
2
3
4
5
.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

源码地址： http://www.w3.org/Style/Examples/007/center

 

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

 

1
html { height: 101% }

 

 

17. CSS3 Gradients模板

 

1
2
3
4
5
6
7
8
9
#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);
}

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。

 

1
2
3
4
5
6
7
8
9
10
11
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');/* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('webfont.woff') format('woff'),/* Modern Browsers */
    url('webfont.ttf')  format('truetype'),/* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg');/* Legacy iOS */
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

源码地址： http://css-tricks.com/snippets/css/using-font-face/

 

19.创建缝合效果

 

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
p {
    position:relative;
    z-index:1; 
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border: 2px dashed #fff;
}   
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}

 

 

20. CSS3 斑马线效果

当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。

1
2
3
tbody tr:nth-child(odd) {
    background-color: #ccc;
}

源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

来自： HONGKIAT.COM

 

http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have

其他操作

近期文章

分类目录

归档

Copyright © 2026 优大网 浙ICP备13002865号

回到顶部 ↑