Css cool stuff + code

Facebook Twitter

Create a Swish CSS3 Folded Ribbon in Five Minutes. Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

Create a Swish CSS3 Folded Ribbon in Five Minutes

Let's see how.. Step 1: Markup We'll begin with an empty HTML document; doctype, charset declaration, head, body, the usual suspects. You'll also notice we're linking to the Google Web Fonts API so we can make use of the pleasantly decorative Montez typeface. Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com. Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text.

Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com

Using the Title Attribute Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag. Since it's good practice to use proper title text, and it's really freaking cool to do stuff with just CSS. Subtle CSS3 Typography that you’d Swear was Made in Photoshop.

Text shadow box. Getting to Work with CSS3 Power Tools. CSS3 is one of the coolest new web technologies available to web developers right now.

Getting to Work with CSS3 Power Tools

Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects. CSS3 has many features, but some of them are imperative to learn if you are going to be reproducing Photoshop-like effects. CSS (Cascading Style Sheets) in one page : CSS.SU. Perfect Full Page Background Image. This post was originally published on August 21, 2009 and is now being being republished as it has been entirely revised.

Perfect Full Page Background Image

Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Essential cross-browser code, information and discussion. Introduction to CSS3 Animations. <title>Introduction to CSS3 Animations</title> pre { white-space: pre-wrap;

Introduction to CSS3 Animations

CSS Tucked Corner Effect.