Lately I've been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I've created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.
Round Circle Trick
You can create a round circle by specifying a very large value with the border-radius property. The following example uses 100px border-radius to make a round circle.
.circle {
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
Inner Shadow Effect
Specifying inset values with the box-shadow property to create a inner shadow effect. As of now, this feature is only supported by Chrome 4+ and Firefox 3.5+.
.inset {
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}
Search Form Example
The following search form demo is created with CSS gradient, border-radius, and box-shadow with inset values (view the demo with Chrome 4+ or Firefox 3.5+). It degrades nicely in non-CSS3 browsers. View source code to learn the CSS code. If you are not familiar with CSS3, read my previous article The Basics of CSS3.
That’s very nice idea of creating circle by utilizing radius feature.
I like it.
Yep, it’s looking nice, but i hate to write two times the border (mozilla, and webkit), and IE, as usually, doesn’t work. I hope we can use css3 features in real world soon.
That’s very nice idea of creating circle
I like it.
Wow. What a great tutorial.Css3 is really taking over!
So simple and looks lovely. Really making it easier to make websites look stunning without an overload of images for backgrounds and the like!
love it ;)
but I think we can use it only in 1-2 years
That’s not displaying well for me (On Chrome). The ‘Go’ is not centred and the text box has a square outline…
This actually doesn’t look half bad in IE 8, everything is just squared. Looks horrible in Chrome, and a little off in Safari, though. It’s not too effective of a technique if it only works properly in one browser – that’s exactly what we’re trying to get away from!
Actually, the inset-version of the box-shadow only works in Firefox. Unfortunatey no other browser displays it properly.
I noticed in Opera (latest snapshot) that the button wasn’t round, you should add border-radius there too.
.searchform .searchbutton {
...
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
...
}
Hi Nick,
This is a wonderful trick :) Btw, I have some thoughts on why it doesn’t work very well on Chrome win, but don’t kill me if I’m wrong hahaha! Wanted to DM this actually but couldn’t
Firstly, this is how it looks like on Chrome windows (http://bit.ly/bzfjFc)
I did my own test on a box without rounded-corners, and no problems with -webkit-box-shadow, so I’m assuming the grey-box appears around the rounded input because -webkit-box-shadow thinks its a rectangular box so the offset area is displayed in grey
Yeah, there are similar problems to Chrome displaying in Iron unsurprisingly:
Well, the preview showed an image displaying, guess it lied. See http://img94.imageshack.us/i/boxux.jpg/ for the effect.
Ok, so this dosesn’t degrade that nicely. It does in IE6&7, which is cool and all. But i have this question – would you leave this peace of code like that when developing a real site, for a real client, with real money and needs/expectations.
I guess, no.
… but that’s only a guess …
Nice tutorial.
Very nice post, in my firefox that’s look’s perfect!
But hey! Is possible optimize your code using new technics of HTML5 for inputs.
The “Placeholder” attribute will kick of our “onclick” functions.
- input class=”searchfield” type=”text” placeholder=”Type Here”
I tested that with your code and worked well on Chrome. Try! I think that’s a nice “plus” for this post.
See more of “new features for inputs”, here: http://307.to/jLi
The future of web will be great, I’m very happy with that!
Hugs! :)
It does look great, however, in Chrome Mac.
On Google Chrome the problem seems to be the “inset” instruction on
” -webkit-box-shadow “.
If you remove ” -webkit-box-shadow “, grey corners are no longer displayed.
@Mr.Reku – if you remove that, it’ll beat the purpose of this tutorial. We need the shadow.. but what’s strange is that, it works on Chrome mac but not on win lol
Btw Nick, another bug I discovered. On Safari win, -webkit-box-shadow is ignored completely – check the screen http://bit.ly/bM21bo
Beautiful – when it works!
Nice. If you add “border-radius: 2em;” to “.searchform .searchbutton”, the button will be round in Opera as well (though currently there’s no CSS gradient support, but at least it’ll look nicer than the big square you get at the moment).