CSS Filters Test Page →
Test page showing the new filters available in webkit using -webkit-filter. Works in Webkit nightly’s and Chrome 18.
Element Filtering Using CSS3 Negation Pseudo-Class
I was going to title this post, “I was bored at work today so here’s some CSS” but that didn’t seem very descriptive. And for those that don’t want to scroll down to find the link to the demo: Here you go. Essentially, I was trying to filter content based on data attribute and the negation pseudo-class. And it works well using a combination of :not(s) pseudo-class...
CSS Selectors Level 3 Reference
Just over a month ago the CSS WG Blog announced the recommendation of the Selectors Level 3 spec so I made this page as my personal reference for the spec. The page is a repsonsive/fluid design and uses the isotope.js jQuery plugin for layout and filtering. Each selector includes: The short description from W3C spec Code with a link to live examples on jsFiddle A link to the full description on...
Magento - Creating Custom Tabs with Attribute Data
Magento’s Modern theme has a nice Product Info tab on Product View pages for additional information on the selected product. It’s fairly common to want to add additional custom tabs that display data from custom attributes fields. It took me a while to figure out how to accomplish this so I’m writing it down so I don’t have to waste much time next time I need to do...
CSS3 Generator →
CSS Processesor - Cleans Your CSS →
Create a Horizontal Navigation with HTML5 & CSS3...
Creating a horizontal navigation bar using floats isn’t particularly difficult but there’s usually a few hiccups if you want it to be 100% width of the viewport with each link taking an equal amount of the width. The CSS3 Flexbox model makes creating the nav a lot easier and also gives you a lot more flexibility in changing the layout of the navigation bar. The HTML is dead simple....
CSS Typography Resources →
CSS3 Text Warping →
CSS3 Image Gallery →
I made yet another CSS3 based image gallery that I’ll probably use on my soon to be revamped website. Still some irritating IE bugs and generally tinkering. I’m going to do a quick write up so I don’t forget how I did it. But not today.
Clearfix Reloaded Overflow:hidden Demystified →
This short article is about enhancing the first method and shedding some light on the real meaning of the second.
CSS Media Queries Boilerplate →
Is IE9 a modern browser? NO! →
Fonts based on 8-bit/16-bit Video Games →
CSS3 Animated Drop Down Menu
CSS Tricks - January 27, 2011
Font Weighting Fix How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together CSS Properties That Affect Type Rendering Case-Study Getting Hardboiled with CSS3 2d Transforms Styling Full Width Tabs with CSS3
CSS border-image Confusion
A few days ago, Eric Meyer wrote a post on the CSS3 border-image property. Specifically, he wanted to know how you repeat a single image throughout the entire border. To put it simply, the border-image property doesn’t seem to be designed to use a single image, rather it’s designed to use a grid of images. So if you want a border of repeating diamonds instead of creating a single...
Simplifying CSS Gradients
A few days ago, a post went up on the Surfin’ Safari blog announcing changes to the CSS3 Gradient syntax. The two important points in the post are: The syntax is being simplified Both WebKit and Mozilla are implementing the changes This is great news because not only was the WebKit syntax a bit knotty but WebKit and Mozilla used different syntax for gradients (and you thought using...
Chrome Dropping H.264 Support
Google announced today that it will be changing it’s HTML5 <video> support by dropping the H.264 codec in favour of the WebM (VP8) and Theora codecs. This just guarantees that web developers will have to include support for at least H.264 and Theora to support most browsers. This doesn’t really change much as developers already had to include support for H.264 and one of...
CSS3 Tricks - January 10, 2011
A few little CSS tricks: Page Wrap Folded Corner Effect Persistent Nav + Rocket Bar Clickable Accordion Pure CSS Tags Another CSS3 Accordion Trick CSS Arrows and Shapes
gonzolized: Synchronize. Discodeine featuring Jarvis Cocker. Debut album released Feb. 14th.
gonzolized: Gonzo feat. the sweetest Peaches you...
Google Maps Added Bike Routes in T.O.
Glory be! I don’t know how long ago this happened but Google is providing cycling directions in Toronto. Bike lanes are marked in green and do a great job of showing how fractured Toronto’s cycling infrastructure is today. You can’t embed cycling maps yet but here’s a link showing a route along the Martin Goodman Trail. Afterthought: I was wondering what the average...
Why wan’t I consulted? Why weren’t you? You should be angry that you weren’t.
The Walrus - Uncivilizing Influences (what makes a... →
From your friends at The Walrus, an essay on the addictive nature of viddies. Choice quote: If you have ever drooled, or held your bladder to the point of peril, in anticipation of a game-born reward (guilty on both counts), you can appreciate that video games exert a powerful effect on the human body.
Some Mac App Store Apps Are Easily Hacked
From Daring Fireball. It seems that copying and pasting a few files form an apps package contents will let you run any app form the app store. I can’t imagine Apple will let this slide for too long.