Multiple Backgrounds

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 as many as you want with different URL’s, positioning, and repeat values. You can even […]

Read More

Flip an Image

img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: “FlipH”; }

Read More

“Stitched” Look

.stitched { padding: 20px; margin: 10px; background: #ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px dashed #fff; border-radius: 10px; box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); text-shadow: -1px -1px #aa3030; font-weight: normal; }

Read More