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, September 5th, 2014

Scaling up CSS

Category: CSS

CSS has a habit of creeping up on you. If you’re not careful, your humble stylesheet can go from a few flourishes to a giant maintenance tangle. Before you can say “12-deep nested div”, your in a world of duplication and complexity that prevents you from making timely user-interface updates. [Medium's](https://medium.com) one organisation that’s been Read the rest…

Posted by Michael Mahemoff at 11:05 pm
Comment here

+++--
3.5 rating from 13 votes

Tuesday, August 9th, 2011

A simple random bit on var selector

Category: CSS, jQuery

Isobar’s Rob Larsen suggests that there is often a need to build CSS selectors dynamically when building applications. ”This is typically some existing pattern paired with a loop counter or something pulled from a data attribute,” he writes on his blog. His choice is to create a variable called ”selector” and ”to craft the selector Read the rest…

Posted by jvaughan at 7:26 pm
13 Comments

+++--
3.1 rating from 309 votes

Wednesday, October 6th, 2010

3D Slides Built with HTML5, CSS3, and SVG

Category: 3D, CSS, HTML, Presentation

Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline. For example, I gave Read the rest…

Posted by Brad Neuberg at 1:00 am
3 Comments

+++--
3.4 rating from 21 votes

Thursday, September 16th, 2010

Simulating :hover and Double Clicks With Pure CSS on Mobile Devices

Category: CSS

When creating mobile web apps on devices like the iPhone, iPad, and Android you lose the beloved CSS :hover property which can make things so much easier to create. Chris Coyier has been exploring how to respond to single and double clicks still using pure CSS even when we don’t have :hover. For single clicks, Chris Read the rest…

Posted by Brad Neuberg at 7:00 am
3 Comments

+++--
3.7 rating from 8 votes

The CSS Awards

Category: CSS

CSS has always been a powerful tool in the web programmer’s arsenal, especially today with CSS3, CSS Animations/Transforms/Transitions, CSS FlexBox and Columns, CSS with SVG, etc. If you’re trying to do it all with JavaScript, many times you are probably doing things wrong — a CSS solution will often be more elegant, terse, and performant. Read the rest…

Posted by Brad Neuberg at 6:00 am
3 Comments

+++--
3.3 rating from 3 votes

Tuesday, September 14th, 2010

CSS 3 Live: Progressive Enhancement

Category: CSS, Tutorial, Video

From SitePoint comes a nice series of videos on CSS3, called CSS Live. Here’s one on Progressive Enhancement when using CSS3 features:

Posted by Brad Neuberg at 7:00 am
4 Comments

++---
2.8 rating from 5 votes

Monday, September 13th, 2010

Animated CSS3 cube using 3D transforms

Category: Animation, CSS

I’ve been doing alot of experimenting with HTML5/CSS3 on the iPhone doing animation, and I’ve been surprised with the low frame rate of animating through Canvas or SVG. If you are trying to do animation, especially 3D, on the iPhone it seems like the name of the game is to it through the GPU, and Read the rest…

Posted by Brad Neuberg at 6:00 am
Comment here

+++--
3 rating from 8 votes

Sunday, September 12th, 2010

Adobe Announces HTML5/CSS3/SVG Pack for Illustrator

Category: Adobe, CSS, SVG

Exciting news from Adobe; they’ve announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG: Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps Read the rest…

Posted by Brad Neuberg at 5:15 am
4 Comments

++++-
4.5 rating from 8 votes

Thursday, September 9th, 2010

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Category: CSS, Tutorial

Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5: He breaks it down in five easy steps to produce the final following demo:

Posted by Brad Neuberg at 5:30 am
Comment here

+++--
3.2 rating from 6 votes

Wednesday, August 25th, 2010

Adobe Releases Web Fonts

Category: Adobe, CSS, Font

Last week Adobe announced they are jumping into the Web Fonts game in a partnership with Typekit: For this debut of Adobe Web Fonts, I think we’ve made some great choices. Everyone knows Myriad and Minion — pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the web as they have Read the rest…

Posted by Brad Neuberg at 6:00 am
3 Comments

+----
1.5 rating from 4 votes

Tuesday, August 24th, 2010

CSS Media Queries: Bees Knees Or Spawn of Satan?

Category: CSS

The last month has seen an interesting back and forth over CSS Media Queries. In a nutshell, CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For example, you could have a stylesheet only display for screen devices with a maximum screen width of Read the rest…

Posted by Brad Neuberg at 6:00 am
6 Comments

+++--
3.6 rating from 5 votes

Monday, August 23rd, 2010

The CSS3 Song

Category: CSS, Fun

Don’t be bummed it’s Monday, ‘cuse the CSS3 Song is here to cheer you up: How can you go wrong with lyrics like this: CSS3 Web animation done properly CSS3 Degrading gracefully I had a dream, an awesome dream People surfing in the park On Windows, Linux and Mac And their page load speeds were Read the rest…

Posted by Brad Neuberg at 6:00 am
Comment here

+++--
3.3 rating from 3 votes

Pure Pulsing CSS Map Markers

Category: CSS

Via Zachary Johnson (aka the Zachstronaut) comes a cool experiment using pure CSS to generate pulsing rings/map markers. He’s put together a nice video explaining the concept: He has a cool demo (Chrome or Safari + Snow Leopard only) of the effect: The pulsing effect, for example, is generated by a CSS3 Animation: css < Read the rest…

Posted by Brad Neuberg at 5:00 am
3 Comments

+++--
3 rating from 4 votes

Friday, August 20th, 2010

Auto-Generate CSS3 For Fame and Fortune!

Category: CSS

We’ve seen a number of nice CSS3 generators. I stumbled across another one recently that has a nice set of features for autogenerating the following from a single CSS3 generator web page: Border Radius Gradients CSS Transforms CSS Animations CSS Transitions Text Shadow Box Shadow Text Rotation @Font Face

Posted by Brad Neuberg at 5:00 am
Comment here

+++--
3.8 rating from 5 votes

Wednesday, August 18th, 2010

When does JavaScript trigger reflows and rendering?

Category: CSS, Performance

Thomas Fuchs has some good performance things to say reflows and rendering. A video of wikipedia gives you an idea of how much happens when a basic page is rendered: The advice? The important thing is to always remember that reflowing and rendering HTML is the single most expensive operation browsers do. If your page Read the rest…

Posted by Michael Mahemoff at 6:26 am
9 Comments

++++-
4 rating from 4 votes

Tuesday, July 27th, 2010

YUI 3.2.0 preview release 1 – touch events support, transitions and browser-specific loading

Category: Browsers, CSS, JavaScript, Library, YUI

Over at the the YUI blog the team just announced the preview release of YUI 3.2.0. YUI3 now has some interesting new features that the team wants you to try and tell them if they work out for you. The changes to the already very powerful library are quite ambitious: Touch event support for mobile Read the rest…

Posted by Chris Heilmann at 1:34 pm
7 Comments

+++--
3.6 rating from 7 votes