Intermediate Articles
Styling Texty Inputs Only
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 …
Perfect Full Page Background Image
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 …
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, …
Ordering CSS3 Properties
When writing CSS3 properties, the modern wisdom is to list the “real” property last and the vendor prefixes first:…
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 …
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.…
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 …
RGBa Browser Support
RGBa is a way to declare a color in CSS that includes alpha transparency support. …