[译]148个资源让你成为CSS专家

迄今为止,我已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。

CSS3 资源

参考资源与备忘录

  • CSS属性指引 —— 一份清单,按字母表顺序列出了每个CSS属性。

  • 使用CSS简写 — 一些CSS缩写的参考指南。

  • 网页开发者手册 — This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的资源,如示例、工具等。

  • 100个免费的CSS资源 — 大量CSS资源,包括相关的文章、教程、布局等等。

教程与技巧

  • 从零开始学CSS — 这是一个非常基础的教程,让你从零开始学习CSS并用它创建第一个基础网页。该教程对于那些对网页构建不了解的初学者来说,是很好的资源。

  • CSS Swag: 多栏列表 — A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns一份关于创建语义化的、有序的多栏列表指南。

  • 改善打印版的链接展示 — 示范了打印输出时如何在超链接文本中如何包含链接地址.

  • 高级CSS菜单技巧 — 用CSS创建一个真正酷炫的、高级的、带有模糊效果的菜单。

  • CSS 菜单 — 一个关于用纯CSS2(不包含JS)嵌套列表创建菜单面板的教程。

  • CSS Tab菜单带下拉效果 — 一个关于创建带有下拉效果的CSS菜单教程。

模板与框架

  • 1Kb大的CSS栅格 — 这也许是最简单最紧凑的栅格系统了,但包含了自定义栅格的工具。

  • CSS Zen Garden — CSS Zen Garden 是一个 HTML 和 CSS 框架,用于展示大量能用CSS创建的设计。除了框架之外,还有大量可用的模板和主题。

  • 完美的多栏CSS流式布局 — 收集了兼容iPhone的流式布局。

  • 960栅格系统 — 一个基于960像素宽构建的CSS栅格布局。

  • 免费CSS模板 — 该网站提供了200多个CSS模板,都遵循知识共享署名许可协议。

  • 漂亮免费的CSS模板 — 几十个模板让你着手CSS设计,包括动态居中盒子、4栏不定宽布局、宽度固定的盒子上下左右完全居中等。

  • 小型盒子 — 收藏了各种布局的CSS文件。

画廊与陈列

  • CSS Stars — 画廊提供了一些基于CSS的设计,让你熟读掌握。

  • CSS Based — 上千个不同设计的CSS画廊。

  • CSS Drive — 一个分类的CSS画廊。

  • CSS Mania — 一个已经有5年历史的CSS画廊。

  • CSSelite.com — 一个分类的CSS画廊。

  • CSS Creme — 大量可以根据颜色、分类或者设计师划分的画廊,也包括相关的教程和信息。

  • csswebsite — 一个可以通过类型、日期或者颜色帅选的画廊。

  • 40 漂亮的深色CSS网页设计 — 该画廊提供了一些漂亮的深颜色网页设计。

  • 2008年最好的CSS设计 — 又一个画廊展示了2008年最好的CSS设计。

  • CSS美丽画廊 — 该CSS画廊的条目是从2004年至今的,按年代顺序排列。

工具

  • Firebug — 火狐浏览器的一个插件,你可以在该调试器里面看到你的CSS代码,并且可以在里面编辑。

  • Aardvark — 火狐浏览器的扩展,可以看到每段HTML及它的类或者id。

  • CSSViewer 1.0.3 — 也是火狐浏览器的扩展工具,你可以看到任何页面的CSS属性。

  • GridFox — 火狐浏览器的另一个扩展,通过在任何网页覆盖一层栅格来辅助栅格设计。

  • CodeBurner — 开发的一款插件,可以在浏览器中看到HTML和CSS的参考资料。

  • IzzyMenu — 一个免费的CSS菜单创建器,支持创建下拉二级菜单。

  • Spanky Corners — 一个圆角盒子生成器。

  • CleanCSS — 一款CSS美化工具。

  • CSS浏览器选择器 — A useful tool for empowering CSS selectors based on the visitor’s browser.一款有用的工具,可以基于访问者的浏览器来使用CSS选择器。

  • CSS 压缩器 — 一款CSS文件压缩器。

  • CSS 布局生成器 — 一个简单、在线的CSS生成器,可以创建一个基础的布局框架。

  • CSSTidy — 一款开源的、可供下载的CSS分析器和优化器。

  • CSS驱动CSS压缩器 — 一款CSS压缩工具,根据你的需求,可以有基础和高级的压缩模式。

  • Tabifier — 缩进你的代码。

  • CSSFly — 基于浏览器的CSS和XHTML编辑器,可以实时编辑。

  • List-O-Matic — 一款可以创建基于列表的导航菜单。

  • Markup Maker — 根据你输入的页面ID来创建一个有效的XHTML/HTML框架。

  • CSSMate — 一款在线CSS编辑器。

  • CSS Type Set — 一个CSS排版生成器。

  • Construct 0.5 — 一款可视的,可以基于蓝图框架创建的布局工具。

特殊的CSS博客和网站

  • CSS技巧 — 来自Chris Coyier的博客。

  • CSS Help Pile — 不断收集CSS相关的教程和资源。

祝你愉快!


Stay foolish, stay hungry
前端路上,不断拼搏不断积累,感谢所有给过我帮助的大牛,也希望从现在开始,把自己的经验分享出来,和...

博观而约取,厚积而薄发

1.4k 声望
132 粉丝
0 条评论
推荐阅读
PWA,你需要知道的那些事
PWA,英文全称是 Progressive Web App,2015年 由 Google 提出。PWA是提升 Web App的体验的一种新方法,能给用户原生应用的体验,兼具了 Web App 和 Native App 的优点。

grace_xhw13阅读 4k评论 1

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.3k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
万能的CSS 渐变!单标签绘制一个足球场
一眼望去,这里的形状只有圆形和矩形,在不借助其他标签的情况下(包括伪元素),其实很容易联想到渐变,一起看看如何绘制的吧,有非常多的渐变小技巧~

XboxYan18阅读 1.9k评论 8

封面图

博观而约取,厚积而薄发

1.4k 声望
132 粉丝
宣传栏