CSS


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.


Friday, May 7th, 2010

Spiderman Intro in CSS

Category: CSS, Examples

It’s Friday. How about some Spiderman. In CSS using animation.

Posted by Dion Almaer at 5:00 am
6 Comments

++++-
4.7 rating from 3 votes

Wednesday, April 28th, 2010

Get some box-shadow going!

Category: CSS

The following features are at-risk and may be dropped at the end of the CR period if there has not been enough interest from implementers: ‘box-decoration-break’, ‘box-shadow’. box-shadow is back in the W3C CSS3 spec. Not only is is back, but you can now get insets: Thanks to the CSS Ninja for the tip.

Posted by Dion Almaer at 10:10 am
15 Comments

+----
1 rating from 1 votes

Wednesday, April 21st, 2010

Implementing 3d video navigation carousel a la iAds

Category: CSS

The video above isn’t from Steve Jobs’ keynote, but is by Ted Littledale. He created a 3d navigation carousel that mimics the iAds demo that Steve gave: I used the webkit team’s morphing cube example as my starting point as that showed how to get a bunch of flat elements arranged as a 3d ring. Read the rest…

Posted by Dion Almaer at 6:27 am
3 Comments

++++-
4.5 rating from 13 votes

Monday, April 19th, 2010

HTML5 and CSS3 Readiness Visualization

Category: CSS, HTML, Showcase, Standards

Paul Irish and Divya Manian have created a fun visualization on readiness of HTML5 and CSS3 standards in various browsers. It uses a bunch of the usual CSS cool-suspects: -webkit-gradient, -webkit-transition, -webkit-border-radius, and the like (and -moz/-o too). The added feature is…. do a mouse scroll on the page: < View plain text > javascript Read the rest…

Posted by Dion Almaer at 6:57 am
7 Comments

++++-
4.2 rating from 26 votes

Saturday, April 17th, 2010

The Best HTML5 Slides Ever

Category: CSS, HTML, JavaScript, Presentation

@edr is the man. He did amazing things at Yahoo! and now at his new role at Google he continues in the same vein. This time he has created the coolest set of HTML5 slides ever, using the technology inline. Take a walk through the woods and learn about all things HTML5. Starting with the Read the rest…

Posted by Dion Almaer at 8:38 am
8 Comments

++++-
4.3 rating from 51 votes

Thursday, April 15th, 2010

CSSDesk: A playground for CSS

Category: CSS, Showcase

We have seen a lot of playgrounds out there with JS Fiddle being the most recent. The latest is CSS Desk. It is an incredibly simple playground where you put in HTML and CSS, and see a live preview. That is it. However, Pixel Matrix Design… the folks behind it… show that they design very Read the rest…

Posted by Dion Almaer at 6:14 am
8 Comments

+++--
3.5 rating from 36 votes

Friday, April 9th, 2010

The Man from Hollywood says yes!

Category: CSS

Tyler Gaw has built a fun kinetic video demo that uses a bunch of advanced CSS (gradients, transforms, transitions). View source to see the scenes: < View plain text > HTML <dt>Chester <!– Quentin Tarantino –></dt>     <dd id="scene-2">         <p class="act-1">Ok, Ted</p>         <p class="act-2">pay attention here. Read the rest…

Posted by Dion Almaer at 6:55 am
14 Comments

++++-
4.8 rating from 20 votes

Monday, April 5th, 2010

Border Image Generator Tool

Category: CSS, Utility

Working on mobile Web apps such as the Facebook app on webOS offers one huge advantage over standard desktop development. You can code to a single runtime (in our case, WebKit). This means that crazy hacks can go away as you use functionality such as border-image. Kevin Decker is an engineer on my team, and Read the rest…

Posted by Dion Almaer at 6:11 am
3 Comments

+++--
3.1 rating from 14 votes

Thursday, April 1st, 2010

Stop sniffing my breadcrumbs!

Category: CSS, JavaScript, Mozilla, Security

Chris Blizzard has done a nice roundup of David Baron’s post, the bug and the post on the security blog which discusses the :visited issue. We have seen :visited sniffing for good as well as ill (Aza wrote about using it to detect what networks you are on which can help you put up the Read the rest…

Posted by Dion Almaer at 12:01 am
5 Comments

++++-
4.1 rating from 14 votes

Wednesday, March 31st, 2010

CSS gets more Sassy with version 3

Category: CSS

Nathan Weizenbaum promised that Sass will become a superset of CSS back in June 17, 2009. And we now have version 3 of Sass and Haml available that brings life to the promise: The new syntax is known as “SCSS”, for “Sassy CSS” SCSS was built from the ground up based on the CSS3 spec, Read the rest…

Posted by Dion Almaer at 11:53 am
3 Comments

+++--
3 rating from 36 votes

Monday, March 29th, 2010

CSS: Designers are doing AOP? No way!

Category: CSS

AOP? that is for whiz kids and Enterprise Java folk (or Lisp hackers have been doing it for years and years). Jonny Tran thinks that every time you use CSS, you’re doing Aspect-Oriented Programming”. He brings up the core parts and pieces behind AOP: But what deeper AOP fun like the wormhole effect which has Read the rest…

Posted by Dion Almaer at 6:10 pm
4 Comments

+++--
3 rating from 21 votes

Friday, March 26th, 2010

CSS Raindrops; Sean Martell whizzes into the CSS logo game

Category: CSS

Sean is awesome, and his latest magic is in the Raindrop logo that he has “ported” to CSS (inspired by the Opera logo by David Desandro.) The fun is in this CSS where you will see a whole lot of gradients, and in seeing Sean’s cheat sheet on the various layers: < View plain text Read the rest…

Posted by Dion Almaer at 10:46 am
1 Comment

+----
1.7 rating from 52 votes

Thursday, March 25th, 2010

FireSass: Debug in a Sass-y way

Category: CSS, Debugging

Nathan Weizenbaum got fed up debugging Sass, and scratched his itch with FireSass, a Firebug extension for Sass (the “Syntactically Awesome Stylesheets” DSL that makes CSS more fun). WIth the extension you will see the filename and line number of the .sass file rather than the generated CSS file…. Much nicer!

Posted by Dion Almaer at 2:53 am
Comment here

+++--
3 rating from 26 votes

Monday, March 22nd, 2010

Should CSS vendor prefixes be nuked? Or just tweaked?

Category: CSS

PPK has gone off on CSS vendor prefixes. A lot of people have done this. He points to the lack of DRY that frustrates us all: < View plain text > css div.borderbox {     box-sizing: border-box;     /* one */     -moz-box-sizing: border-box;    /* two */     -webkit-box-sizing: border-box; Read the rest…

Posted by Dion Almaer at 10:31 am
34 Comments

+++--
3.5 rating from 20 votes

Wednesday, March 10th, 2010

CSS3 Please! Instant results… Thank You

Category: CSS, Examples

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly. CSS3, Please! lets you play with fancy new rules such as: border-radius box shadow gradients rgba support in backgrounds transforms font-face Really nice way to make tweaks inline in the page….. nicely Read the rest…

Posted by Dion Almaer at 8:39 am
5 Comments

+++--
3.5 rating from 37 votes

Wednesday, February 24th, 2010

Custom checkbox and radio buttons using CSS

Category: CSS

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting Read the rest…

Posted by Dion Almaer at 6:32 am
8 Comments

+++--
3.9 rating from 78 votes