Case Study: jQuery Fixer Upper

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.
(Updated on )

Styling Texty Inputs Only

A 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.

Keep Margins Out of Link Lists

When 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 …

(Updated on )

Perfect Full Page Background Image

Four 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.
(Updated on )

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

You …

(Updated on )

Adding Stroke to Web Text

Fonts on the web are essentially vector-based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, …

(Updated on )

WebKit HTML5 Search Inputs

One of the new types of inputs in HTML5 is search.

<input type=search name=s/>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn’t a problem. The spec doesn’t require it to do …

(Updated on )

Textarea Tricks

Oh, <textarea></textarea>‘s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.…

(Updated on )
Direct link to the article Yay for HSLa

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we’re talking Hue, Saturation, Lightness, and alpha, and it’s a way of declaring color in CSS. It looks like this:

#some-element {
  background-color: hsla(170, 50%, 45%, 1);
}

It is similar …

(Updated on )

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. …

(Updated on )