December 2011
2 posts
2 tags
CSS Filters Test Page →
Test page showing the new filters available in webkit using -webkit-filter. Works in Webkit nightly’s and Chrome 18.
http://subtlepatterns.com/ →
November 2011
2 posts
2 tags
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...
4 tags
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...
June 2011
1 post
2 tags
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...
April 2011
3 posts
1 tag
CSS3 Generator →
1 tag
CSS Processesor - Cleans Your CSS →
March 2011
3 posts
2 tags
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....
2 tags
CSS Typography Resources →
2 tags
CSS3 Text Warping →
February 2011
11 posts
2 tags
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.
2 tags
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 →
January 2011
13 posts
3 tags
CSS3 Animated Drop Down Menu
View the demo HERE.
I just finished Dan Cederholm’s CSS3 For Web Designers (go buy it!) the other day and finally felt like I had a proper understanding of how to work with the new tools available in CSS3. So I thought I’d take a stab at creating a drop down menu using CSS3 transitions. This animated menu does not require JavaScript.
I started with plain old nested lists with...
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
2 tags
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...
2 tags
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...
1 tag
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
Watchgonzolized:
Synchronize. Discodeine featuring Jarvis Cocker. Debut album released Feb. 14th.
3 tags
gonzolized:
Gonzo feat. the sweetest Peaches you...
3 tags
3 tags
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...
WWIC →
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.
