Square Search Boxes in WebKit
The new INPUT type of search is a nice semantic addition given to us under the HTML5 label. Unfortunately this element isn't ultra-stylable within WebKit. Here's a quick trick I've found to make input[type=search] elements look like their basic text counterparts:
input[type=search] {
-webkit-appearance: textfield;
}
Using -webkit-appearance: textfield allows developers to use input[type=search] elements that appear as a standard square INPUT. This is especially useful when looking to add a border to your INPUT element!
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![CSS Sprites]()
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are:
Fewer images for the browser to download, which means...
![Chris Coyier’s Favorite CodePen Demos IV]()
Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...
