Custom Scrollbars in WebKitYou can customize scrollbars in WebKit browsers. Here’s the CSS you need to know about to get it done, with examples. | May 2, 2011 | 54 comments |
Twitter Account(s)The point: on Twitter I’m @chriscoyier. If you prefer a stream of links from CSS-Tricks only, you can follow @real_css_tricks. | April 29, 2011 | 24 comments |
Responsive Data TablesTables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We’ll explore a CSS-based possible-solution to this issue. | April 27, 2011 | 41 comments |
New Poll: Working EnvironmentThe new poll (in the sidebar) asks: In what environment do you primarily work? I’ve worked from home for a lot of years but that will soon be changing. I’m interested to know the environment readers of this site work … | April 25, 2011 | 67 comments |
→ CSS Gradients from ImageNicole Sullivan thinks “wouldn’t it be a nice if there was a tool to convert an image of a gradient into CSS code?” The community responds with some newly-created tools to do just that. I couldn’t get either of the … | April 25, 2011 | |
→ CSS Stress TestingBookmarklet from Andy Edinborough which analyzes your page by removing class names one by one from all elements and testing the pages scroll performance. In other words, if you are having trouble scrolling a page and suspect it’s fancy CSS3 … | April 24, 2011 | |
Poll Results for Conditional CommentsHow did people respond when asked if they wanted the power to serve content conditionally to any browser? The results are pretty interesting… | April 22, 2011 | 27 comments |
Fun With Blurred TextWe’ll cover how to blur text with CSS3 and do it safely by feature-detecting first. Then we’ll do a bunch of experiments with individual letter blurring and also some clever jQuery which gives us deeper access into specific values of a text-shadow. | April 21, 2011 | 34 comments |
→ CSS vs CSS3Trent Walton designs a website then codes it up two ways: new school CSS3, and old school image slicing with no CSS3. Going new school meant 1) he could do it faster 2) the page size was smaller 3) less … | April 21, 2011 | |
→ Micro ClearfixNicolas Gallagher challenges some old assumptions about what’s needed to make the pseudo element style “clearfix” work. … | April 21, 2011 | |
→ 39 Box Shadows, No Good ReasonExcept it’s the best reason of all: HOT CSS NERD ACTION.… | April 21, 2011 | |
The Difference Between :nth-child and :nth-of-typeThese are different pseudo class selectors that do slightly different things. In my opinion, :nth-child is more common but :nth-of-type is more useful. | April 20, 2011 | 20 comments |
Faking ‘float: center’ with Pseudo ElementsUsing a couple of floated pseudo elements on the elements containing columns of text, we can knock out a part in the middle making it look like text is wrapping around an image both directions. | April 18, 2011 | 59 comments |
→ CSS Gradient Patterns GalleryGradient wizard Lea Verou compiles all her crazy I-didn’t-know-that-was-possible patterns into one library with easy to snag code samples. Make sure to click the patterns for full screen view.… | April 15, 2011 | |
Value Bubbles for Range InputsHTML5 range inputs, in supported browsers and by design, don’t show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you’ll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input. | April 13, 2011 | 14 comments |
→ IE 10Right on the heels of IE 9′s release, there is already a platform preview for IE 10 (video). Awesome: Flexbox, Grid, Multi-column, Gradients, (and soon), Transitions and 3D Transforms Not awesome: No text shadow, No HTML5 Forms support… | April 12, 2011 | |
→ Front End Design ConferenceJuly 22, 2011 – St. Petersburg, Florida. This is the third year going. Two years ago, I spoke at the first one which was my first “real” speaking gig ever. This year I’ll be talking CSS, which, strangely enough, I’ve … | April 12, 2011 | |
→ :any()Marco Kuiper with some real world examples of how the :any() selector (already live in Firefox 4 and WebKit nightlies) can clean up otherwise clunky selectors. … | April 11, 2011 | |
Play Sound on :hoverUse JavaScript to trigger the playing of a sound (an HTML5 audio element). A couple of ways to do it are presented here, along with a few gotchas to watch for. | April 11, 2011 | 37 comments |
→ WhatFont Bookmarklet
… | April 9, 2011 | |
→ The Cicada PrincipleSo there is this bug… also prime numbers… and… just read it it’s really neat and has practical web design implications. … | April 7, 2011 | |
What if there was no position: static;?A fun thinking exercise for CSS nerds! What if all elements defaulted to relative positioning instead? What are the advantages, disadvantages, and caveats to consider… | April 5, 2011 | 35 comments |
Reveal a Background Image upon Text SelectionHighlight text, reveal an actual image beneath! Not possible with the text selection pseudo class, but is possible by wrapping selected text in spans via an open source JavaScript library and adding the background image to that. | April 4, 2011 | 25 comments |
→ GlowformSuper hot color gradient glowing action by Kayla Rose.… | April 2, 2011 | |
→ Absolutely Positioned TextareasSnook reminds us we can set the top/left (or bottom/right) when absolutely positioning textareas, but not all four values (which cannot out-force the width/height). … | April 1, 2011 | |
→ GriddleGet a gridded up background-image on-the-fly. | April 1, 2011 | |
Speed Up with CSS3 GradientsThis article was originally published on March 2, 2010. It is now updated to include the latest browser support and syntaxes. July 20, 2011: Updating again for syntaxes… Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now … | April 1, 2011 | 94 comments |
Slide In Image CaptionsReader Jason Lucchesi send me in a neat demo of image captions sliding in overtop an image on rollover. The effect used a bunch of nested divs to get it done, so I thought I’d do my own version of … | March 29, 2011 | 57 comments |
→ New text-align ValueYou can align text to the left, right, or centaur.… | March 28, 2011 | |
CSS PivotCSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of … | March 27, 2011 | 41 comments |
Hover on “Everything But”Hover states are easy, but what if you want to apply a hover state to every element besides the one you are hovering over? We can do it with a little trickery. | March 23, 2011 | 55 comments |
→ Converge SE 2011June 24-25, 2011 in Columbia, South Carolina. It was awesome last year and this year should be ever better as it’s at a nicer venue and I’ll be speaking at it! $150 bucks for both days = super affordable as … | March 22, 2011 | |
→ How to Avoid Common CSS3 MistakesArticle I wrote for the new online version of .net magazine.… | March 22, 2011 | |
Comma Separated WebKit Animation KeyframesAnother little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let’s say you wanted to create a pulsing effect as … | March 22, 2011 | 6 comments |
→ ZEN Audio PlayerReally cool audio player by simurai using HTML5 <audio, jPlayer (jQuery plugin), and CSS3 for the fancy animations. This made the rounds a few months back but I decided to wait until it was on GitHub, which then happened … | March 21, 2011 | |
→ Get Your CSS Easing Code HereA code generation and visualization tool by Matthew Lein for CSS3 transition timing functions. Biggest triumph? Making cubic bezier understandable. … | March 21, 2011 | |
→ The Current State of HTML5 FormsBy me! If you see any mistakes or missing info, please report it. We want to make this as accurate and comprehensive as possible.… | March 21, 2011 | |
IEMobile Conditional CommentHeads up: there is a conditional comment for targeting Internet Explorer on Windows Phone 7 mobile devices. Plus, other random thoughts. | March 21, 2011 | 30 comments |
CrivestivusThis has almost nothing to do with web design, but I want to help promote an event going on in Northern Wisconsin put on by some friends of mine: Crivestivus. They used to hold it just for friends and … | March 19, 2011 | 7 comments |
New Poll: Conditional Tags for All BrowsersThere is a very low chance this would ever happen, and as far as I know nobody is talking about it seriously. I think it might make for an interesting discussion and poll though: Do you wish there was conditional … | March 18, 2011 | 94 comments |
currentColorCSS variables are always a hot topic when “the future of CSS” is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that … | March 17, 2011 | 17 comments |
→ Google Map as a BackgroundCool idea and execution by Wade Hammess.… | March 15, 2011 | |
Progressively Enhancing HTML5 FormsThis is what I’m thinking is the best current way to progressively enhance forms. That is, use HTML5 features when they are available and fall back to JavaScript alternatives when they are not. Load up Yepnope.js Yepnope is … | March 13, 2011 | 48 comments |
→ SXSW + HTML5 FormsIf you are at SXSW, Kevin Hale and I are talking about HTML5 forms and using them to improve lead generation (and generally how to make your forms better). It’s a 2.5 hour workshop which we intend to be fun, … | March 11, 2011 | |
Wolf in Sheep’s ClothingRoger Johansson has a neat quick-tip style article on centering page content both vertically and horizontally by making the html element | March 10, 2011 | 41 comments |
Styling Texty Inputs OnlyA CSS3 technique for selecting only texty inputs, without the burdon of listing every single attribute selector for every single new HTML5 input type. Plus alternates. | March 8, 2011 | 55 comments |
→ What We Learned Publishing Digging Into WordPressLong writeup about the experience Jeff Starr and I had self publishing our book.… | March 8, 2011 | |
→ Method & CraftNew must-subscribe-to site. Under the hood: curiously not HTML5. Almost feels rare these days. … | March 7, 2011 | |
→ Open Source AmpersandsLittle download packages by Mark Pilgrim that contain @font-face files that are super tiny because they contain just a single character: the ampersand. They come with an HTML demo so using them is an easy copy-and-paste job.… | March 7, 2011 | |
→ It’s The Final CountdownMicrosoft themselves is tracking and promoting the demise of IE 6. China? 34.5%? Seriously? And I can’t help but hum a little Europe: We’re leaving together | March 4, 2011 |