→ humans.txtI kinda like this idea: It’s a TXT file [at the root of your site] that contains information about the different people who have contributed to building the website. A lot of websites should just have an about page where … | January 25, 2011 | |
→ Native CSS Variables Closer To RealityTab Atkins Jr: …the time until this starts showing up in nightly builds of Webkit is measurable in months. and …this is one of those things that you’ll have to wait a decade for before you can reliably use in … | January 25, 2011 | |
Animated Knockout LettersI was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it reminded me how WebKit has that … | January 24, 2011 | 34 comments |
→ The Shadow DOMYou know the little blue knobby on WebKit range inputs? And all those fancy | January 20, 2011 | |
Five Questions with Trent WaltonTrent is an easy guy to admire. He works at a cool design agency (they have a triforce for a logo and pull it off). He’s got a cool blog that shows off his clean design style with art directed … | January 18, 2011 | 11 comments |
Rotating Feature BoxesThree boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte). | January 17, 2011 | 52 comments |
→ The Dark Side of UsabilityThere is some actual data supporting a counter-intuitive idea I postulated about a while back: People using the more difficult interfaces tended to perform better, were less fazed by distractions and were found more likely to transfer their skills to … | January 15, 2011 | |
→ WebKit Gradient Syntax… is now the same as the Mozilla / Official spec version, which is great because 1) it’s easier to write and technically more powerful and 2) yay standards! It’s only in the WebKit nightlies, but I’m sure will be … | January 15, 2011 | |
Five Questions with Nicolas GallagherNicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future … | January 12, 2011 | 14 comments |
→ Google Dropping H.264Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google. For HTML5 video, this is how it … | January 11, 2011 | |
What’s the Difference?Reader Paul writes in: What’s the difference between It’s great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very … | January 10, 2011 | 26 comments |
Moving HighlightI recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. … | January 9, 2011 | 44 comments |
→ Mother Effing HSLFrom the source code: this site is by Paul Irish HSL is better than RGB. The reason it isn’t used as much (according to me) is … | January 5, 2011 | |
Absolutely Position Element Within a Table CellHave you ever wanted to absolutely or relatively position a table cell? Well, I can’t help you there. Table cell elements just won’t take those position values. And thus, you also can’t absolutely position elements within the context of those … | January 4, 2011 | 16 comments |
LinksGot a couple of slightly-oldie-but-goodies for you:
… | January 3, 2011 | 19 comments |
Why use Classes or IDs on the HTML element?Reader Nicolas writes in: I’m frequently seeing ID and class specifications to | January 2, 2011 | 49 comments |
The MoveUp MenuI got an email quite a while back from Dirk Tucholski who showed me a site called FLOWmarket. He was wondering about how the menu system worked. I thought it looked neat and so set out to build it … | December 30, 2010 | 37 comments |
Thank You (2010 Edition) | December 25, 2010 | 72 comments |
→ Striped and Checkerboard Backgrounds Without ImagesLea Verou with a clever idea on using CSS3 gradients that repeat (by setting background size) to create striped and checkboard backgrounds with no images.… | December 22, 2010 | |
Poll Results: HTML5 on New ProjectsSeveral folks pointed out that this last poll question was worded a bit strangely: Would you start a new web project today and not use HTML5? I worded it that way to elicit comments on why a person or organization … | December 22, 2010 | 68 comments |
→ Body Borders without MarkupHarry Roberts with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions. … | December 21, 2010 | |
Load More Sidebar Content When There Is RoomOne classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be … | December 21, 2010 | 44 comments |
WebKit Image WipesIt’s not “spec,” but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, … | December 18, 2010 | 37 comments |
→ The Hacktastic Zoom FixNicole Sullivan on forcing elements to create new formatting contexts with | December 16, 2010 | |
→ The lean, mean, CSS-reset machine.There are all kinds of CSS resets, from the ever-popular Meyer reset, to the newfangled HTML5 reset. Do you know what the difference between the different ones are? It’s a bit hard to picture, even when looking at and comparing … | December 14, 2010 | |
Using CSS without HTMLBig thanks to Mathias Bynens for the guest post today! I’d call this a bonafide CSS trick! A few days ago, Chris tweeted: If we could stack pseudo elements (e.g. | December 14, 2010 | 80 comments |
The Kick Awesome ShowNate Croft and Jon Longnecker (remember Jon?) from FortySeven Media have a new video podcast they are producing called The Kick Awesome Show. CSS-Tricks was happy to sponsor Episode 13. These guys sure look like they … | December 12, 2010 | 28 comments |
→ CSS Transition TimingNice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the … | December 9, 2010 | |
New Poll: Would you start a new web project today and not use HTML5?What do you think folks? I’ll hold off on any opinions until we wrap it up. Poll is over in the sidebar.… | December 8, 2010 | 190 comments |
→ The Fifth Position ValuePeter-Paul Koch: If mobile browsers were to implement position: fixed exactly as the desktop browsers do, many sites with fixed elements would become unusable on mobile. … I believe it’s time for position: device-fixed.… | December 7, 2010 | |
Text Fade Out / Read More LinkA section of text that fades into the nothingness. But wait, a beacon. A “read more” link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal. | December 7, 2010 | 31 comments |
Three-Sided BorderThere are many ways to skin a cat. Also, there are many ways to accomplish the same thing in CSS. The three sided border is one of those things, so we’ll look at four different examples that all do it. I would think this kind of thing is a bit confusing as a beginner, so hopefully seeing these different bits of code isolated will make it clearer. | December 6, 2010 | 34 comments |
Poll Results: Does Your Degree Relate To Your Job?There is a bit of an idea in our little web design world that “nobody who works on the web went to school for it.” At least, I get that feeling. Especially from little stories like these: I have … | December 2, 2010 | 39 comments |
→ You Must Learn JavaScriptIt’s really unavoidable these days, and that’s good because it’s awesome. Here are some choice quotes from Kenny Meyers: Not every company is a Ruby shop. Not every company is a .NET shop. It’s my belief that 99% of the … | December 2, 2010 | |
→ CSS3 Walking ManThe illustrated backgrounds that slide by with faded edges are the best part.… | December 2, 2010 | |
Design v8I had some extra time over Thanksgiving so I decided to spend it doing some recreational designing of this site. Here’s a few quick notes (I need to get back to content!):
… | December 2, 2010 | 276 comments |
→ Formatting CSS3With all the vendor prefixes and all the new complex properties like animations and gradients, it’s nice to format them so they are nicely readable. I agree with David DeSandro here that lining up the values makes for nice lookin’ … | December 1, 2010 | |
→ 24 Ways 2010Twenty four great blog posts by top industry peeps in twenty four days. This year it’s going print as well.… | December 1, 2010 | |
→ ImageOptimMaybe you’ve heard of things like Pngcrush before which supposedly does an amazing job at optimizing png files, but then when you go check it out it turns out it’s this nerdy command line tool with crappy documentation and it … | November 30, 2010 | |
Keep Margins Out of Link ListsWhen building a menu or other list of links, it’s generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier … | November 29, 2010 | 55 comments |
Google CDN Naming Conventions (and You)You’ve seen this before:
This is a way you can load a JavaScript library like jQuery directly from Google’s CDN (Content Delivery Network). You can get quick copy/paste access to these from ScriptSrc.net. See in that above … | November 26, 2010 | 25 comments |
→ Photoshop-Like CSS3 Gradient GeneratorIf you are a designer who is used to creating gradients with Adobe Creative Suite products, you’ll likely enjoy this. It’s the same interface with the little color pointers that you slide around, click to add, drag to remove, and … | November 25, 2010 | |
→ CSS3 MemoryAll the game logic is JavaScript (very minimal), but all the fancies are CSS3 that get triggered by the application and removal of class names. … | November 25, 2010 | |
A Journey with Vignetting (That Doesn’t Get Very Far)Ol’ Trent posted a quick tip post on using inset Yeah, you could do it in … | November 23, 2010 | 39 comments |
Perfect Full Page Background ImageFour techniques are explored on accomplishing a full page background image that conforms to our exceptions: no white space, scales as needed, retains aspect ratio, centered, and more. | November 20, 2010 | 184 comments |
What is Cross Site Scripting or XSS?I think the name “cross site” is confusing. It’s easy to hear that and think it involves code on one website attacking code on another website. That’s not what it is. Not to mention its unfortunate “true” acronym. It simply … | November 19, 2010 | 23 comments |
→ 20 Things I Learned about Browsers and the WebReally neat presentation of a book by the Google Chrome Team. Everyone seems to be calling it an “HTML5″ book There is certainly a bunch of HTML5 going on, but there is also loads of CSS3 and clever JavaScript at … | November 18, 2010 | |
My Slides from the jQuery SummitAt this year’s jQuery Summit I gave a mostly-totally-revised version of my talk “Solving Common Client Requests with jQuery” that I originally gave at the Bay Area jQuery Conference earlier this year. I always think slides are a little weird … | November 18, 2010 | 20 comments |
Hash Tag Links That Don’t Headbutt The Browser WindowUsing hash-tag links with a fixed position header can be problematic, as the element may be hidden underneath the header as the browser will scroll until the element headbutts the top of browser viewport. There are a couple of ways we can fix this… | November 16, 2010 | 20 comments |
Show Image Under Text (with Acceptable Fallback)WebKit supports the cool | November 12, 2010 | 34 comments |