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, August 28th, 2009

Creating a querySelector for IE that runs at “native speed”

Category: Browsers, CSS

Hello Ajaxians, my name is Paul Young and I am the co-founder of Skybound Software. We’re the company behind Stylizer, which is a real-time CSS editing tool. We’re taking a pretty radical approach to CSS editing, and as such, a lot of what I do is “web technology research”, which is looking for better ways Read the rest…

Posted by Dion Almaer at 6:13 am
31 Comments

++++-
4 rating from 53 votes

Sunday, August 23rd, 2009

CSS 3 Flexible Box Model

Category: CSS

Alex Russell has been having a really interesting discussion with some standards folks about what is wrong on the Web right now, and it narrowed down to discuss CSS variables as a case study (it aint perfect, but get DRY and ship it!) Alex tells it how it is, but people forget that he does Read the rest…

Posted by Dion Almaer at 6:22 am
10 Comments

++++-
4 rating from 29 votes

Tuesday, August 18th, 2009

CSS improvements, speed, and more with Firefox 3.6 alpha

Category: Browsers, CSS, Mozilla

Firefox 3.6 alpha releases have already arrived and there are already cool new features on the heals of the 3.5 release, as well as rapid speed improvements. People have focused on the new CSS improvements (Acid3 now gets 94/100) such as the tweaked CSS gradient support: < View plain text > css .heading {   Read the rest…

Posted by Dion Almaer at 6:49 am
8 Comments

++++-
4.3 rating from 36 votes

Wednesday, July 29th, 2009

Chroma Hash: Interesting visualization of your password

Category: CSS, jQuery

Matt Thompson has created a fun little jQuery plugin called Chroma-Hash that “dynamically visualizes secure text-field values using ambient color bars”: Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •’s, so others can’t read it. Unfortunately, neither can you—you can’t tell if you Read the rest…

Posted by Dion Almaer at 5:35 pm
10 Comments

+++--
3.6 rating from 52 votes

Text rotation for all

Category: CSS, Tip

Jonathan Snook has posted a nice nugget on text rotation with CSS that takes a nice bit of markup like this: < View plain text > HTML <div class="example-date">   <span class="day">31</span>   <span class="month">July</span>   <span class="year">2009</span> </div> and converts it to: all via the CSS: < View plain text > css -webkit-transform: rotate(-90deg); Read the rest…

Posted by Dion Almaer at 10:20 am
31 Comments

++++-
4.3 rating from 59 votes

Tuesday, July 28th, 2009

CSS Gradients for All!

Category: CSS

Weston Ruter has created a very cool library that enables CSS gradients on non-WebKit browsers (at least, a subset). Incredibly cool: CSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers that implement the HTML5 canvas element. To use, just include css-gradients-via-canvas.js (12KB) anywhere on the page (see examples below). Unlike Read the rest…

Posted by Dion Almaer at 6:00 am
13 Comments

++---
2.9 rating from 32 votes

Thursday, July 23rd, 2009

Multiple font weights via CSS 3 and more font fun

Category: CSS

Ilia Draznin has been using CSS3 font face to fake font weights: The way @font-face works is that whatever font attributes you specify for a @font-face rule, they don’t determine how the font looks but rather when it’s gonna get used. For example if you have the following two rules < View plain text > Read the rest…

Posted by Dion Almaer at 6:47 am
3 Comments

+++--
3.6 rating from 29 votes

Friday, July 17th, 2009

More on 3D CSS Transforms

Category: Browsers, CSS

Following up on the earlier coverage we are back with more info on 3D transforms. Simon Fraser has posted details on the WebKit blog. He shows off a couple of cool examples: The post goes into detail on the new CSS such as: < View plain text > css translate3d(x, y, z), translateZ(z)   scale3d(sx, Read the rest…

Posted by Dion Almaer at 5:39 am
5 Comments

++++-
4.6 rating from 39 votes

Thursday, July 16th, 2009

A new way to do layout; CSS Scripting Layout

Category: Chrome, CSS

CSS is great for styling, but can be agonizing for laying out applications. There have been attempts to do JavaScript powered layout, but what about adding more semantics to CSS itself? Darrel Karisch has posted on just that, with his CSS Scripting Layout: This document describes a new set of CSS properties and object specifications Read the rest…

Posted by Dion Almaer at 11:46 pm
31 Comments

+----
1.9 rating from 61 votes

Sunday, July 12th, 2009

3D CSS Effects with Safari on Snow Leopard

Category: CSS, Showcase, WebKit

The iPhone has had these wicked cool 3D transforms hardware accelerated for awhile. We haven’t seem them in desktop Safari though, until now. Charles Ying shows us Snow Stack: Oh, was there some Microsoft plugin launched last week? We don’t need no stinkin’ plugin! Charles tells us more: Larger images load in after 2 seconds Read the rest…

Posted by Dion Almaer at 4:43 pm
22 Comments

++++-
4.3 rating from 45 votes

Friday, June 26th, 2009

Fun with text-shadow

Category: CSS, Examples

Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via: < View plain text > javascript document.getElementById(‘text-shadow-box’).onmousemove = function(e) {     var xm = e.clientX – 300;     var ym = e.clientY – 175;     var d = Math.sqrt(xm*xm + ym*ym);   Read the rest…

Posted by Dion Almaer at 11:26 am
14 Comments

+++--
3.8 rating from 41 votes

Tuesday, June 23rd, 2009

Sprite Me! Helping you sprite up, but maybe you shouldn’t?

Category: CSS, Performance

There have been many tools to help make image spriting easier, by packaging up your images into one large image and splitting it up again via CSS. Steve Souders just showed off a new little tool he created, Sprite Me at the Velocity conference that kicked off today. He has made it easier to work Read the rest…

Posted by Dion Almaer at 12:01 am
6 Comments

++++-
4 rating from 28 votes

Monday, June 22nd, 2009

Fun with 3D CSS and video

Category: CSS, Video

How about starting the week with something fun. Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS like this: < View plain text > css .face Read the rest…

Posted by Dion Almaer at 7:14 am
10 Comments

+++--
3.5 rating from 44 votes

Monday, June 15th, 2009

CSS3 breaking in the design community

Category: CSS

CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced Read the rest…

Posted by Dion Almaer at 11:41 am
7 Comments

++++-
4.3 rating from 40 votes

Wednesday, June 10th, 2009

Styling buttons as links allowing you to POST away

Category: CSS, Examples

Have you ever wanted to just <a href=”path” action=”post”>? Remember the hub-ub with the old Google Web Accelerator and how it started to crawl links to delete actions that were mistakenly using GET? Natalie Downe has written up a piece on styling HTML buttons as links which means that you can somewhat get the same Read the rest…

Posted by Dion Almaer at 3:15 am
15 Comments

+++--
3.8 rating from 24 votes

Tuesday, June 2nd, 2009

CSS Gradient Tool; Build the Apple Navigation Bar

Category: CSS, Utility

John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there. You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images. John didn’t stop there, and has Read the rest…

Posted by Dion Almaer at 8:25 am
6 Comments

+++--
3.5 rating from 26 votes