20个css教程和工具推荐

前端开发正处在高速前进的路上,尤其是开源社区更是如此,每天都有很多的博客和项目诞生。下面将推荐一些我喜欢的前端开发资源,关于前端框架、教程和工具等。

Pure

pure

一组小,响应CSS模块,你可以使用在每个Web项目。

8 Pure CSS Flat Mobile Devices

devices

Minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes you create. Grab the code, remix and enjoy.

How to create a scrollable splash screen with CSS3 and jQuery

splash

A great way to catch the attention of a visitor to your website is a “splash screen” or an “intro screen”. In this tutorial you’ll learn a basic method to achieve this effect, which you can modify easily to make nice-looking intros to web experiences.

Macaw

macaw

Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.

Ratchet

ratchet

Ratchet is a full fledged framework, Ratchet began as a series of HTML/CSS prototypes of the Twitter for iPhone app. These prototypes became invaluable to the process of testing new feature designs that ended up being shipped as part of the native mobile app.

Bourbon Neat

bourbon-neat

A lightweight semantic grid framework for Sass and Bourbon.

A to Z CSS

atozcss

Learn CSS from A to Z. Guy Routledge shares his knowledge and experience in high-quality video series.

Medium-Style Page Transition

medium

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page.

Card

card

Make your credit card form better in one line of code. Beautiful animations for 4 different card types, an intuitive experience for your users and pure CSS, HTML, and Javascript.

Gumby

gumby

Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit.

CSShake

csshake

Useful CSS classes for making shaky animations for your web apps.

Bounce.js

bouncejs1

Bounce.js lets you create tasty CSS3 powered animations in no time. Give it a spin.

Pleeease

pleeease

Pleeease is a CSS post-processor. The main goal of this tool is to perform all treatments that a pre-processor shouldn’t have to do (dealing with prefixes, convert rem to px, support older browsers, etc.).

CSS Colours

csscolours

A handy list of colour names in CSS, hex and rgb values are provided.

extractCSS

exctrctcss

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you.

CSS Vocabulary

css-vocabulary

A small app to browse through which is what in CSS. Has some sample css with a list of CSS terminology. Clicking on anything in one panel highlights the corresponding items in the other.

Project Parfait

projectparfait

Project Parfait allows you to turn Photoshop comps into code-based designs. Right in your browser you can extract color, gradient and font from a PSD, copy text and CSS, get accurate measurements between elements and save web-optimized images.

Jeet Grid System

jeet

Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.

Cody

cody

Cody is a free library of HTML/CSS/JS nuggets to boost your web projects.

Magic Animations CSS3

magic-animations

CSS3 Animations with special effects. Now on beta, more effects coming soon.


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流