Tag Archives: CSS

Web Standards

Adobe Proposes New Standard for 3D Effects on the Web

With Flash falling out of favor, Adobe is focusing more on web standards. The company has already proposed a way to improve web layout tools with “CSS Regions” and now it wants to bring high-quality cinematic effects to the web with CSS Shaders.

‘Donatello’ Library Simplifies CSS 3 Drawings

Most modern browsers support the HTML5 canvas element and SVG for drawing and animating. There are, however, some cases — particularly with mobile browsers — where it might make more sense to use CSS-based drawing tools.
Donatello is a JavaScript library that can do much of what the Raphaël JS drawing library does, but instead of [...]

Tame Your CSS With ‘SMACSS’

Woolly, the CSS sheep.

CSS is notoriously difficult to organize. The complexity of CSS selectors coupled with ever-changing project requirements and redesigns can quickly turn even the simplest of stylesheets into a snarled, tangled mess of code. Ugly code can be perfectly functional code (if it couldn’t the entire web would have collapsed in on itself [...]

Creating Shapes in Pure CSS

One of the best things about CSS 3 is that it reduces the need to use images in your designs. That means fewer HTTP requests, few bytes to download and fewer files to keep track of. Need rounded corners? That’s pure CSS now. How about drop shadows? Yes, pure CSS. The infinity symbol? Actually yes, [...]

HTML5

Popular HTML5 Boilerplate Releases v2.0

The developers behind HTML5 Boilerplate have released version 2.0 of their boilerplate HTML, CSS and JavaScript templates for quickly prototyping HTML5 designs.
You can grab a copy of HTML5 Boilerplate v2.0 from the HTML5 Boilerplate website.
Version 2.0 of HTML5 Boilerplate has several significant changes, including ditching the traditional reset stylesheet for normalize.css. Normalize is a [...]

HTML5

Review: Adobe’s Edge Offers Web Animation Sans Flash

While Edge is a long way from a finished product, this early release shows considerable promise. If you’re a Flash developer looking to expand your repertoire to include HTML, CSS and JavaScript animations, Edge just might help.

HTML5

Screenfly: The Easy Way to Test Responsive Web Designs

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll quickly find that testing your site is much more complex. Not only do you [...]

Visual Design

Take Responsive Design Beyond the (Fluid) Grid

We’ve given you a look at some best practices for responsive design, but beyond the nuts and bolts of @media queries and flexible grids, there is something more subtle, and more important, at work behind the moniker responsive design.
Good design has always been about not just putting content first, but making it easy to read [...]

JavaScript

Tips, Tricks and Best Practices for Responsive Design

Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size. If you’ve never heard of responsive [...]

Web Basics

Create Image Sprites the Easy Way

If you’ve ever used Google’s Page Speed or Yahoo’s YSlow to optimize your website chances are you’ve seen a suggestion to “use CSS sprites.” CSS sprites reduce HTTP requests by combining multiple images into a single file which you can then display throughout your page, positioning it as need with the CSS background-position property.
Typically sprites [...]

Page 1 of 212»