3D Cube using CSS transformations

Paul Hayes show us how to create three dimensional cube using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

» » »

Grid 960 CSS Framework

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

grid960

The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

demo: http://960.gs/demo.html

download: http://960.gs/files/960_download.zip

url: http://960.gs/

tutorial: http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

create the illusion of shapes by using 100% CSS, nettuts

Jeffrey Way show us how to create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. They figure out a way to create speech-bubbles without resorting to background images.The result is an awesome speech buble by using 100% css.

speech-buble

demo:http://nettuts.s3.amazonaws.com/273_cssShapes/shapes.html

source:http://nettuts.s3.amazonaws.com/273_cssShapes/shapes.html

url:http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/

“Yet Another Multicolumn Layout” (YAML) , Layout Builder

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  • Based on web standards
  • Designed for accessibility
  • Robust, flexible layout concept
  • Modular construction, user-oriented functionality
  • Complete multilingual documentation

url: http://builder.yaml.de/

License: Creative Commons Attribution 2.0 Germany License.