CSS (Cascading Style Sheets) is a style sheet language that illustrates presentation semantics and is commonly used to provide a design framework for web pages written in HTML and XHTML.

Wednesday, May 27th, 2009

CSS Gradients in Action

Category: CSS

Chris Williams has been having some fun with CSS gradients on a quest to create nice looking elements without images. He uses CSS like this: < View plain text > css .albumInfo {     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));     height: 8em;     padding: 1em; Read the rest…

Posted by Dion Almaer at 7:50 am

4 rating from 79 votes

Tuesday, May 26th, 2009

CleverCSS: Rich Python-like DSL for CSS

Category: CSS, Python

We have mentioned Sass and other CSS abstraction libraries before, but somehow CleverCSS slipped by. The nesting DSL looks similar to other solutions: < View plain text > css ul#comments, ol#comments:   margin: 0   padding: 0     li:     padding: 0.4em     margin: 0.8em 0 0.8em       h3:   Read the rest…

Posted by Dion Almaer at 7:19 am

3 rating from 46 votes

Friday, May 8th, 2009

3D Cube using new CSS transformations

Category: CSS

Paul Hayes has been playing with CSS transformations and making 3D cubes: The impression of a three dimensional cube can be created 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 Read the rest…

Posted by Dion Almaer at 7:52 am

4.1 rating from 58 votes

Thursday, April 30th, 2009

960 Gridder: Easy to use layout design tool

Category: CSS, Design, Utility

Andrée Hansson has created 960 Gridder, a grid layout tool for web developers that you can either use as an integrated component to layout your websites or use it as a bookmarklet. The grid is fully customizable but it defaults to the “960px grid standard”. 960 Gridder will automatically identify if jQuery is present at Read the rest…

Posted by Dion Almaer at 8:16 am

3.9 rating from 47 votes

Tuesday, April 28th, 2009

CSS3 Template Layout through jQuery

Category: CSS, jQuery

Alexis Deveria of “When Can I Use…” fame recently told us about his latest project: A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the Read the rest…

Posted by Ben Galbraith at 8:30 am

3.4 rating from 51 votes

Even designers are using CSS3? :)

Category: CSS, Design

Sean Martell is my hero. He did the Bespin logos and a bunch of the Mozilla works in general. When Ben and I were in Toronto we got to see him at work at his WACOM tablet, and it is a sight to behold. I wish I could do that kind of design work, but Read the rest…

Posted by Dion Almaer at 5:26 am

4.3 rating from 26 votes

Friday, April 24th, 2009

CSS Browser Hacks

Category: CSS, Tip

Paul Irish tries not to use CSS browser hacks anymore and instead “uses IE’s conditional comments to apply classes to the body tag, but he put up a concise list of browser specific hacks he has used: < View plain text > css /***** Selector Hacks ******/   /* IE 6 and below */ * Read the rest…

Posted by Dion Almaer at 10:35 am

3.5 rating from 35 votes

Wednesday, April 15th, 2009

FluidLayout; Having fun with ’em

Category: CSS

Yusuf Akyol has created a simple fluid design library inspired by emastic that puts power into the em. Check out the test page and resize the browser to see the layout and font size change before your eyes. You use the framework via a little CSS and: < View plain text > HTML <script type="text/javascript"> Read the rest…

Posted by Dion Almaer at 4:08 am

2.3 rating from 41 votes

Thursday, April 9th, 2009

Souders: Don’t Use @import

Category: CSS, IE, Performance

Web performance guru Steve Souders noted some time ago in his book that @import is harmful to web page rendering times, but today he elaborated on this claim in a longish blog post: There are two ways to include a stylesheet in your web page. You can use the LINK tag: <link rel=’stylesheet’ href=’a.css’> Or Read the rest…

Posted by Ben Galbraith at 9:00 am

4 rating from 136 votes

Wednesday, April 8th, 2009

CSS Sprite Creator

Category: CSS, Utility

Chris Brainard wrote in to tell us about his new CSS Sprite Creator: Cool!

Posted by Ben Galbraith at 8:29 am

3 rating from 40 votes

Tuesday, April 7th, 2009

CSS is Awesome, so what about JavaScript?

Category: CSS, Fun

That is a great mug, but the question is….. what can we do for JavaScript or HTML?

Posted by Dion Almaer at 1:13 am

3.9 rating from 31 votes

Friday, April 3rd, 2009

Auto Scrolling Parallax Effect in CSS

Category: CSS, Examples

Paul Hayes is off doing more fun things, this time creating an auto scrolling parallax effect with CSS, specifically using multiple background images on a single element and the -webkit-transition property to provide the auto-scrolling. All with a bit o’ CSS: < View plain text > css #background {         background: url(’../images/foreground.png’) Read the rest…

Posted by Dion Almaer at 1:01 am

1.5 rating from 260 votes

Monday, March 30th, 2009

Browser Reflows & Repaints; How do they affect performance?

Category: Browsers, CSS, Performance

Nicole Sullivan has a very detailed post on reflow and repaints and how they affect performance (and also how to potentially avoid them). What are they again? A repaint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background Read the rest…

Posted by Dion Almaer at 5:38 am
1 Comment

4.1 rating from 38 votes

Thursday, March 26th, 2009

Querying the DOM on the Sly

Category: CSS, JavaScript, Library

Remember when we thought there may be less CSS selector engines? :) Instead we have renewed performance-based competition among them. Sly is the latest selector engine created by Harald Kirschner. To use, it looks like this: < View plain text > javascript // Finds all odd rows in all tables var rows = Sly.search(‘table td:odd’); Read the rest…

Posted by Dion Almaer at 11:37 am

4.2 rating from 57 votes

Creating a clock in CSS

Category: CSS, Examples

If you ever go to the BBC website you will see the working clock in the top right: It thus seems appropriate that Paul Hayes of London has created an interesting experiment that shows how you can create an analogue clock using just CSS and JavaScript is only used to get the current time. The Read the rest…

Posted by Dion Almaer at 7:11 am

3.7 rating from 37 votes

Wednesday, March 25th, 2009

Fuzzy CSS Grammar

Category: CSS, Security

Jesse Ruderman, security extraordinaire, has created many fuzzers in his time including a JavaScript one, and this time he has created a CSS gramar fuzzer: I wrote a CSS grammar fuzzer to test Gecko’s CSS parser. This fuzzer’s tricks: Declarative context-free grammar. This makes it easy to add new CSS features to the fuzzer, or Read the rest…

Posted by Dion Almaer at 6:39 am
Comment here

3.9 rating from 14 votes