You can position a pseudo element such that it’s either behind the element, and larger, making a border effect with it’s own background, or smaller and inside (but make sure the content gets positioned on top).
The …
Browsers that support multiple backgrounds (WebKit from the very early days, Firefox 3+) use a syntax like this:
#box {
background:
url(icon.png) top left no-repeat,
url(texture.jpg),
url(top-edge.png) top left repeat-y;
}They are comma separated values and there can be …
When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.…
We’re giving away a friggin’ Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of …
With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, …
As in, the game PICROSS3D.
.btn {
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration: none;
text-shadow: -1px -1px 1px #616161;
position: relative;
padding: 15px 30px;
-webkit-box-shadow: 5px 5px 0 #666;
The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID’s, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little …
MediaElement.js is a jQuery-based package for allowing us to:
I’ll be using it in …
Way back when I used to do “Links of Interest” style posts. I’m happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I’m …
a[href^="http://"] {
/* fully valid URL, likely external link */
}
a[href="http://google.com"] {
/* link to specific website */
}
a[href^="/"], a[href^=".."] {
/* internal relative link */
}
a[href^="mailto:"] {
/* email link */
}
a[href$=".pdf"] {
/* PDF HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form …