Font Awesome 3.0 has been released

Posted About 11 years ago by Henning Koch.
fortawesome.github.com

40 new icons, spinner-style rotation with CSS animations, smaller file size, possibility to sub-set the font to only...

The Shapes of CSS

Posted Over 11 years ago by Henning Koch.
css-tricks.com

Examples how to create dozens of shapes using pure CSS and a single HTML element.

Responsive & Touch-Friendly Audio Player | Codrops

Posted Over 11 years ago by Henning Koch.
tympanus.net

A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.

CSS that lets your alarm bells ring

Posted Over 11 years ago by Dominik Schöler.
csswizardry.com

Harry Roberts, a youngster from the UK, wrote a comprehensive article telling you how to smell CSS rot early.

Hack: Detect DOM node insertions using plain CSS

Posted Over 11 years ago by Dominik Schöler.
davidwalsh.name

David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM...

navy gem: Hide empty navigation bars

Posted Over 11 years ago by Henning Koch.

navy 0.5.1+ gives empty navigation containers a CSS class .navy-empty which you can hide via .navy-navigation &.navy-empty...

Xfce: Classic panel layout in the style of Gnome 2 or Windows XP

Posted Over 11 years ago by Henning Koch.

Xfce gives you a million options to configure your panels. Together with Xfce's sometimes arcane configuration UI, this can...

CSS: Vertically center with display: table-cell

Posted Over 11 years ago by Dominik Schöler.

The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside...

Subtle Patterns Preview

Posted Over 11 years ago by Thomas Eisenbarth.
chrome.google.com

Ever wanted to preview a pattern from Subtle Patterns on your site without the hassle of swapping out images and...

Taming icon fonts for use in Rails views

Posted Over 11 years ago by Henning Koch.

Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a...

Internet Explorer will download CSS files twice, if referenced via scheme-less URLs

Posted Over 11 years ago by Arne Hartherz.
stevesouders.com

You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS...

CSS3 Animated Loading Bar

Posted Over 11 years ago by Henning Koch.
leemunroe.com

Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.

Large CSS box shadows can bring browsers to a crawl

Posted Over 11 years ago by Henning Koch.

Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with...

CSS: Emulate linear gradients with inset box shadows

Posted Over 11 years ago by Henning Koch.

Why is this useful? You can have a background image on the same element, overlaying it with a transparent gradient...

CSS: Emulate borders with inset box shadows

Posted Over 11 years ago by Henning Koch.

When is this useful? When both parent and child elements have borders, with this technique you don't get two...

CSS-Style

Posted Over 11 years ago by Dominik Schöler.
github.com

Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're...

rails/turbolinks

Posted Over 11 years ago by Henning Koch.
github.com

Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between...

CSS Animations Media Queries

Posted Over 11 years ago by Dominik Schöler.
davidwalsh.name

CSS transitions make your responsive websites smoother and more professional. It's easy and already there. Use it!

How to make your application assets cachable in Rails

Posted Over 11 years ago by Henning Koch.

Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both...

How to test print stylesheets with Cucumber and Capybara

Posted Over 11 years ago by Henning Koch.

A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets...

Be careful when using Unicode symbols for graphical elements

Posted Over 11 years ago by Henning Koch.

There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu...

Flat Icons & Icon Fonts | CSS-Tricks

Posted Over 11 years ago by Henning Koch.
css-tricks.com

Nice list of icon sets that come in the form of fonts. I recommend Font Awesome.

How to fix: Firefox uses incorrect fonts on all webpages, regardless of their CSS

Posted Over 11 years ago by Arne Hartherz.

If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can...

Limitations you should be aware of when Internet Explorer 9 parses CSS files

Posted Over 11 years ago by Ulrich Berkmueller.
github.com

Internet Explorer until version 9 has some limitations when parsing CSS files Summarized, these are: Up to 31 CSS files...