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.


Tuesday, February 9th, 2010

Rotating maps with CSS3 and jQuery

Category: CSS, Geo, jQuery

One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too. Read the rest…

Posted by Chris Heilmann at 10:07 am
2 Comments

+++--
3.6 rating from 19 votes

Monday, February 8th, 2010

Román Cortés and Ajaxian make up with amazing CSS demos

Category: Announcements, CSS

We have been long term fans of Román and the fantastic demos and samples that he puts together, usually involving CSS goodness. We messed up the other week though when we linked to his work on a scrolling coke can. I do these postings as a labor of love, and since Ajaxian isn’t my day Read the rest…

Posted by Dion Almaer at 6:52 am
9 Comments

++++-
4.3 rating from 45 votes

Friday, February 5th, 2010

AT AT Walking with CSS

Category: CSS, Examples

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS. He goes over the different areas and how he uses animation and transforms. For example, the head of the beast: < View plain text > css @-webkit-keyframes rotate-head{   0% {-webkit-transform:rotate(0deg) translate(0px,0px);}   Read the rest…

Posted by Dion Almaer at 6:17 am
12 Comments

+++--
3.3 rating from 27 votes

Wednesday, January 27th, 2010

Rolling a coke can around with pure CSS

Category: CSS, Showcase

Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here! The key pieces used: < View plain text > css p {     background-image: Read the rest…

Posted by Dion Almaer at 6:33 am
20 Comments

++++-
4.7 rating from 160 votes

Monday, January 18th, 2010

Helium CSS: JavaScript Library to test your CSS usage

Category: CSS, JavaScript, Library, Testing

Geuis Teses has released an enjoyable library called Helium that has the goal of testing your stylesheets for unused style. You inject helium into your site (e.g. put it in an included footer) and then when you hit the first page you will have a popup asking for the pages you want to test. Helium Read the rest…

Posted by Dion Almaer at 6:29 am
3 Comments

++++-
4.1 rating from 24 votes

Friday, January 15th, 2010

Pure CSS bar charts as a simple API

Category: CSS, JavaScript, Performance, PHP

I am right now working on a high-traffic project that will run in a sandbox that doesn’t allow me to pull third party JavaScript or use canvas/Flash. Yet I need to generate bar charts from a set of data. The solution to me was to create the charts from HTML using CSS. There have been Read the rest…

Posted by Chris Heilmann at 8:19 am
6 Comments

++---
2.8 rating from 48 votes

Thursday, December 31st, 2009

Web 2.Snow

Category: CSS, Examples, Fun, JavaScript

When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari. And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I Read the rest…

Posted by webreflection at 8:13 am
8 Comments

+++--
3.2 rating from 30 votes

Tuesday, December 15th, 2009

3D CSS Parallax Effect

Category: CSS, Showcase

Roman Cortes has a fun parallax effect using just CSS and HTML. Scroll over the bad boy above and see it at work. Then view the source and have your eyes bleed :) < View plain text > HTML <style type="text/css">         a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover Read the rest…

Posted by Dion Almaer at 6:40 am
19 Comments

++++-
4.5 rating from 80 votes

Tuesday, December 1st, 2009

Star Wars HTML and CSS: A NEW HOPE

Category: CSS, Examples, WebKit

There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away“, compared with my simple CSS gallery. Guillermo Esteves presented a piece of history translated for tomorrows browsers:  the Star Wars Episode IV opening crawl in HTML and CSS: Unfortunately, the Read the rest…

Posted by webreflection at 7:00 am
12 Comments

+++--
3.9 rating from 67 votes

Thursday, November 26th, 2009

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Category: CSS, Examples

Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles. I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment. The post is complete with examples and explanation over PHP, CSS, jQuery, and Read the rest…

Posted by webreflection at 6:00 am
27 Comments

++---
2.1 rating from 126 votes

Tuesday, November 3rd, 2009

Fast by Default and Web Performances

Category: CSS, JavaScript, Performance

It does not matter if we have the latest CPU able to devour every single bit of a web page, round trip and network delay is still the real bottleneck of whatever website and Steve Souder knows it so well that he summarize best practices in 66 slides. Fast by Default View more presentations from Read the rest…

Posted by webreflection at 8:00 am
6 Comments

++---
2.2 rating from 65 votes

Wednesday, October 14th, 2009

@font-face Is Cool… But Does It Scale?

Category: CSS, Performance

Our favorite ex-Yahoo at-Google web performance fast-driving all-around guru Steve Souders took a look at @font-face performance recently: There have been a number of great posts about @font-face performance issues: * Paul Irish: Fighting the @font-face FOUT * Stoyan Stefanov: Gzip your @font-face files * Zoltan Hawryluk (again): More @font-face fun This blog post summarizes Read the rest…

Posted by Ben Galbraith at 6:00 am
7 Comments

++---
2.5 rating from 42 votes

Tuesday, October 6th, 2009

Interactive CSS 3 Generator

Category: CSS

Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge. Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show Read the rest…

Posted by Brad Neuberg at 7:15 am
6 Comments

++---
2.9 rating from 35 votes

Monday, October 5th, 2009

QueryLoader, a full page preloader

Category: CSS, JavaScript, jQuery

The classic animated gif, or the “loading…” text, could be now easily replaced thanks to this new jQuery plug-in. Specially suited for a page loads of images, the final result showed in this demo looks really nice and flashy. Features: Preload a whole web page. Preload a part of the page. Gets all images, <img> Read the rest…

Posted by webreflection at 12:30 pm
11 Comments

+++--
3.3 rating from 11 votes

Tuesday, September 15th, 2009

Sprite Me! How to do CSS sprites without having to do CSS sprites

Category: CSS, Performance

Steve Souders is on a tare. First, Browserscope, and now Sprite Me. There are a lot of tools that try to take images and sprite them, but this goes a lot further, so far that it makes it brain-dead simple to sprite. Check out the demo to see it in action. Look at what it Read the rest…

Posted by Dion Almaer at 12:01 am
12 Comments

++++-
4.6 rating from 48 votes

Tuesday, September 1st, 2009

CSS Minification; Part 72; Alphabetizing

Category: CSS

Ray Cromwell wrote that great piece on JS compression and how the GWT compiler does smart things. Barry van Oudtshoorn has written a CSS minifier that uses some of the same concepts that Ray talked about (ordering for best compression). Here is Barry: I recently wrote a small CSS minifier in Java that optimizes your Read the rest…

Posted by Dion Almaer at 6:31 am
7 Comments

+++--
3.2 rating from 25 votes