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.


Monday, July 19th, 2010

A Little PIE with that CSS3?

Category: CSS

Everyone’s chomping at the bit to leverage new HTML5 and CSS3 features but with some older browsers not supporting them, hacks are still needed to make things work in a cross-browser fashion. We’ve seen libs that make things easier such as Remy Sharp’s html5shiv and Modernizr and now we can add another one. Jason Johnston’s Read the rest…

Posted by Rey Bango at 10:51 am
12 Comments

+++--
3 rating from 1 votes

Wednesday, June 30th, 2010

jQuery.fn.webkitTransform: bananas on the skew-whiff

Category: CSS, JavaScript, jQuery

Franz Enzenhofer has created a nice new webkitTransform plugin that helps you manage transforms and state. Franz tells us more: With jQuery.css you can’t easily change the webkitTransform CSS because webkitTransform is not your average CSS. If in one step you add .css(‘-webkit-transform’, “rotate(20deg)”) and in the next step .css(‘-webkit-transform’, “scale(2.0)”) the rotate value gets Read the rest…

Posted by Dion Almaer at 7:01 am
10 Comments

++++-
4.2 rating from 6 votes

Tuesday, June 29th, 2010

ChromeKit: Some folk love putting windows in browsers

Category: CSS

The awesome Guillermo Rauch and Nathan White have taken one of the Web code katas and played with it. Before the Web we had [wW]indows. Maybe that is why developers are keen to implement windows within the Web page, mainly to see if it can be done. We had the great Emil and Erik building Read the rest…

Posted by Dion Almaer at 6:10 am
11 Comments

++---
2 rating from 3 votes

Monday, June 28th, 2010

Made In CSS; iOS icons and more

Category: CSS

Do you enjoy the “looks at me build something cool in pure CSS”-meme? It is kinda fun. On the one hand is shows what amazing things people can build, and on the other…. it reminds us that we need some tools to help make life easier. At least the platform is here, and tools can Read the rest…

Posted by Dion Almaer at 6:14 am
8 Comments

+++--
3 rating from 1 votes

Tuesday, June 22nd, 2010

HTML5Rocks.com: Google DevRel shares the love

Category: Browsers, CSS, HTML

The Chrome and HTML DevRel team at Google have released a new portal, HTML5 Rocks, that packages together some of the great resources available on HTML5 and the renaissance of browsers. Whether it be references on what you can do, to readiness to shims to get use features now. Beyond the resources, there is the Read the rest…

Posted by Dion Almaer at 3:14 pm
5 Comments

+++--
3 rating from 3 votes

Sunday, June 20th, 2010

Do LESS with Less.js

Category: CSS, JavaScript

Dmitry Fadeyev has a great writeup of less.js, the implementation of the LESS styling language in JavaScript itself. Traditionally you would write a less file such as: < View plain text > css @brand-color: #3879BD;   .rounded(@radius: 3px) {     -webkit-border-radius: @radius;     -moz-border-radius: @radius;     border-radius: @radius; }   #header { Read the rest…

Posted by Dion Almaer at 7:02 am
17 Comments

+++--
3.8 rating from 4 votes

Monday, June 14th, 2010

animateWithCSS: Aza’s jQuery Plugin

Category: Animation, CSS

< View plain text > javascript // Makes all paragraph elements grow a border and then atrophy away. $("p").animateWithCSS(   {border: "5px solid #555"}, // CSS properties to animate   1000,                       // Duration in ms   "cubic-bezier",        // The timing function Read the rest…

Posted by Dion Almaer at 5:36 pm
11 Comments

+++--
3.4 rating from 9 votes

Craziness with CSS: Animated Twitter Fail Whale

Category: CSS

Developers continue to do crazy things to show us what can be done with CSS3. The latest is a fully animated Twitter fail whale by Steve Dennis: The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I’d been looking for something to stretch my Read the rest…

Posted by Dion Almaer at 7:10 am
6 Comments

++++-
4 rating from 2 votes

Thursday, June 10th, 2010

CSS calc() in the house

Category: CSS, Tip

Finally. Don’t make me jump to JavaScript to tweak the CSS when I want a relative calculation for a value. The effervescent Paul Rouget shows us the CSS calc() goodness that has a bug going for Mozilla. Some good simple use cases: < View plain text > css /* * Two divs aligned, split up Read the rest…

Posted by Dion Almaer at 10:51 am
17 Comments

+++--
3.8 rating from 4 votes

Wednesday, June 9th, 2010

MagnifyMa: A CSS magnifying glass

Category: CSS, Examples

Jack Prosser has fun proof of concept CSS magnifying glass. He told us a little about it: The main concept works on using CSS3 for the radius, making a round circle view point. This contains an iframe which is the exact same content. Using CSS3 again I scale the content in the iframe so that Read the rest…

Posted by Dion Almaer at 5:51 am
3 Comments

++++-
4 rating from 5 votes

Thursday, June 3rd, 2010

Border Image Generator Tool; Using local file APIs

Category: CSS

Kevin Decker has upgraded his border-image generator tool. The major update is the ability to not have to host an image, but also use local ones. The tool itself is useful, but the post is very interesting as we get to listen in to the implementation process of Kevin as he got the feature working Read the rest…

Posted by Dion Almaer at 6:01 am
2 Comments

+----
1 rating from 2 votes

Monday, May 31st, 2010

OS X Leopard-style Stacks in CSS3 only

Category: CSS

Gordon Brander has a fun demo implementing the “Stacks” dock concept from Leopard using CSS3 only, including the following: :target pseudo-class transform transition border-radius border-image CSS gradients rgba colors text-overflow: ellipsis Check out the source to see it at work, with code such as: < View plain text > css .stack:target > ul {   Read the rest…

Posted by Dion Almaer at 6:01 am
8 Comments

++++-
4 rating from 1 votes

Friday, May 21st, 2010

CSS Structural Reset

Category: CSS, Tip

Browsers weren’t given guidance in early HTML specs for default styles on elements. Does the body have a margin or a padding? What colors? etc. The easiest way to deal with multiple browser is so reset the CSS for them all, and built up from there. We then got Eric Meyer’s reset and YUI reset Read the rest…

Posted by Dion Almaer at 6:55 am
14 Comments

+----
1.5 rating from 2 votes

Wednesday, May 19th, 2010

W3C. Hire Ben Schwarz now. Making specs nice to look at!

Category: CSS, Standards

While preparing my HTML WORKSHOP, I’ve been re-reading W3C specs in far further detail than I ever would’ve imagined. The reading experience is far from delightful. Not only is the text the entire browser width in measure, but it’s dense and laborious to read. No wonder browser vendors have traditionally missed subtle details. The paragraph Read the rest…

Posted by Dion Almaer at 12:17 am
12 Comments

++++-
4 rating from 1 votes

Tuesday, May 18th, 2010

IE thinks our universe is flat; The universe in CSS3

Category: CSS, Fun

Alex Girón, of CSS Beauty, has been playing with CSS3 goodness. His current experiment recreates our solar system spinning around using border-radius, transforms, and animations. The experiment runs beeeautifully on WebKit Nightly, but for some reason it lags on Chrome. Alex gives us the deatils: border-radius < View plain text > css ul.solarsystem li.sun { Read the rest…

Posted by Dion Almaer at 5:34 pm
2 Comments

++---
2.5 rating from 2 votes

Friday, May 14th, 2010

CSS3 Modules documented in one place

Category: CSS

CSS3 has a lot of great stuff in it. Transforms, new layout, media query, CSS object model, you name it. How do you keep up with the specs? That is what Šime Vidas thought, so he whipped together a little iframe love:

Posted by Dion Almaer at 5:23 am
3 Comments

+++--
3 rating from 1 votes