Tim Brown from Typekit shares some pretty classy CSS text shadows and drops some painter's terminology.
The Typekit blog exemplifies an idea I've been telling any company I've been involved with for years and years. Publish lots of interesting articles …
|July 19, 2011|
John Allsopp with a comprehensive article and updated tool for creating them. Funny how the vast majority of radial gradient examples are super in-your-face eye-seizure colors. I think it's because the "real world" uses for them are few. Subtle lighting …
|July 19, 2011|
Nobody was born understanding CSS. We all struggled our way through the confusion. Good times, good times. Let's think back on those confusing moments, that are probably confusing people as we speak. I'll list some that I remember and you list yours.
|July 18, 2011||119 comments|
Create a menu that, on smaller screens, changes into a dropdown menu. A dropdown takes up much less screen real estate and can be easier to use. This tutorial shows you how and discusses the ups and downs.
|July 15, 2011||62 comments|
New project from Mozilla team to tackle the long-standing issue of single-signon (not needing a unique login/pass for every single app in the world). I love it when apps have "Sign in with Twitter", but I'm not sure Twitter should …
|July 15, 2011|
There are rules when it comes to leaving your attribute values unquoted in HTML. Then there are the actual problems that are caused by breaking them. Then there are problems that can happen outside of those rules. Yeah it's kinda complicated but I've tried to document it here.
|July 14, 2011||28 comments|
IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it's a bit tough.
|July 12, 2011||33 comments|
The new poll is up (in the sidebar on the actual site, RSS folks) and it reads:
Would you rather host a 200k file on a major CDN or a 20k file self-hosted?
This requires a little explanation. Let's say …
|July 10, 2011||128 comments|
|July 7, 2011|
Nearly a third of CSS-Tricks readers work from home! Isn't that crazy? Well I was surprised, anyway. I know working from home is becoming more and more prevalent at companies. I bet a bunch of you are the freelancer types …
|July 7, 2011||23 comments|
Two of the CSS properties most lamented by mobile website developers is fixed positioning and scrolling overflow. These are absent for a reason. Poorly implemented, they might single-handedly render a website unusable on a small screen. (Imagine a giant fixed …
|July 6, 2011|
|July 6, 2011||21 comments|
CSS sprites are almost always the way to go when it comes to applying background images with CSS efficiently. One hurdle you may come across is when you want to apply an image that's a part of a sprite to an element with an unknown height and width. We can hurdle that hurdle with CSS pseudo elements.
|July 5, 2011||37 comments|
It's CSS-Tricks fourth birthday. Yay! Time for the traditional mid-year mini state of the site.
|July 4, 2011||39 comments|
There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us …
|June 29, 2011||117 comments|
One of the shortfalls of using CSS media queries as the only ingredient of a mobile solution is that the same content gets served to both desktop browsers and mobile devices (which theoretically are slower and have less network speed).…
|June 28, 2011||37 comments|
In this tutorial we'll learn the basics of the
|June 23, 2011||33 comments|
|June 21, 2011|
Tons of examples and information from Joshua Johnson.…
|June 19, 2011|
The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn't open to the full size of your monitor. If you are looking at size analytics for you website, browser size is far more relevant. In this article we figure out how to get that data, and then look at some of the results gathered from css-tricks.com.
|June 17, 2011||59 comments|
My buddies at Sense Labs just released a really cool iPhone app called Dropp. Allows you to leave location-based messages anywhere on Earth that people receive when they visit that location. Leave them privately for your friends, or publicly. Such …
|June 16, 2011|
I get a little giddy when I come across perfect uses for
|June 16, 2011||38 comments|
New tool by Nicholas Zakas and Nicole Sullivan to analyze your CSS and tell you that you are doing a bad job. It's an amazing tool to help you understand how to write better CSS. To nitpick, I'd say that …
|June 15, 2011|
|June 15, 2011||27 comments|
Just because I thought it was interesting, I shared this on Twitter this morning:
95% of traffic to CSS-Tricks has a screen resolution of larger than 1024x768.
And I got all kinds of responses like: That's such a skewed statistic!!!…
|June 14, 2011||35 comments|
Couple of things I wanted to share from Wufoo land.
Developers: We've released the Wufoo Form Embed Kit, which is a way you can build form embedding integration with other apps easily. As in, you don't have to …
|June 14, 2011||4 comments|
It's pretty amazing what you can do with the pseudo elements
|June 13, 2011||56 comments|
My buddy Nick Pettit is writing a book called Art and the Web which is going to cover the fundamentals of art (well some of the big ones anyway: Line, Shape, and Form) and how they relate to the web. …
|June 8, 2011|
|June 8, 2011||56 comments|
Using a graphic where the solid parts match the background of a site and the transparent parts make the shape, we can let a background color bleed through. This allows us to set that color through CSS, and do any fancy thing CSS can do, like say animate that color.
|June 7, 2011||23 comments|
Tuesday/Wednesday July 26/27, 2011 is the CSS Summit, an online conference all about CSS. I'll be talking the second day. Super hot lineup! Use the code 20COYIER to save 20% on any type of ticket.…
|June 7, 2011|
I was out last week getting my bluegrass festival thing on. I'm just catching up with the ol' internet and thought I'd recap the interesting bits:
|June 6, 2011||15 comments|
Just wanted to make sure that this was documented. Here's what I think the most important lesson is:
If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page …
|May 26, 2011||34 comments|
Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in …
|May 25, 2011|
A border that goes all the way around the browser window and stays there when you scroll. In this article we cover a few different techniques to get it done, from the deepest browser support to the most progressive.
|May 25, 2011||82 comments|
One of the ways you can make a triangle with CSS is by using a 45-degree angle gradient on an element that goes from from colored to transparent with an hard split at the half-way point. Then you can use …
|May 24, 2011|
Let's say in a form you need to allow the user to select a single unique choice. That's the territory of either a select dropdown menu or a group of radio buttons. Now let's say there is direct follow-up question …
|May 24, 2011||23 comments|
Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here.
|May 22, 2011||55 comments|
How to prevent an iframe from flashing white while the page is loading. An ugly problem when the background of your site is anything other than white.
|May 17, 2011||34 comments|
Yet another useful thing that pseudo elements can do for us: allow us to create full browser width header bars without using internal non-semantic wrappers.
|May 16, 2011||88 comments|
If you charge for something online, having a dedicated page on your site where you explain what the charge is on a credit card statement is a good idea. You can point people to this page via a short URL right on the credit card statement.
|May 15, 2011||11 comments|
Fix a bug. Get a prize.
|May 11, 2011|
My favorite blogs are personal blogs of one person. I like it when blogs "have a voice" and personal blogs can't help but have that since all the writing is by the same person. I read a bunch of them and I thought I'd share. Below is a big ol' list that are specifically people that blog, generally, about web stuff - be it design, development, entrepreneurship, typography, business, illustration, whatever. You probably know a lot of them. Maybe some of them you don't.
|May 11, 2011||89 comments|
I'm talking at a bunch of events coming up this year. Come to them!
|May 10, 2011||12 comments|
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Super simple, super nice effect, super practical jQuery plugin by Dave Rupert.
You need to …
|May 10, 2011|
Adobe has put together some pretty compelling demos of "CSS Regions." Download the package and run the included "Mini Browser" to see them. You define shapes (kinda like an image map) in which content flows. If needed, you define how …
|May 10, 2011|
Simple and damn clever idea by Radu Chelariu. Use multiple columns and inline-block elements to create that "masonry" / staggered block layout that is hugely difficult to do otherwise. …
|May 9, 2011|
We'll look at some jQuery code that a CSS-Tricks reader posted in the forums. We'll suggest ways to improve the code to make it more efficient and more extensible. We'll also make some guesses about the HTML that it goes with and discuss improvements there.
|May 8, 2011||55 comments|
Using some non-standard pseudo selectors, you can change the styling of things when the browser window is inactive. The only "practical" use right now is text selection colors, which automatically do this unless you override it. But we'll fix that!
|May 6, 2011||13 comments|
Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just
|May 5, 2011|
*May or may not contain any actual "CSS" or "Tricks".