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.
Jun 20, 2012 @ 5:06 am
That’s very nice idea of creating circle by utilizing radius feature.
I like it.
Jul 1, 2012 @ 9:11 am
is very good, creative things to do in html and css3, excellent
Feb 7, 2017 @ 3:22 am
Nice post about html and css3, its very excellent. And thanks for sharing this..,,.
Jul 19, 2012 @ 1:02 am
asd
Jul 19, 2012 @ 6:52 am
asdasdasd
Jul 19, 2012 @ 6:53 am
what
Jul 26, 2012 @ 3:05 am
Really cool, although the button needs a hover state, active state and ideally a spinner on click, I’m just adding this now :)
Sep 19, 2012 @ 10:42 pm
Great write up. Our website is getting a bit large and unfortunately its time for a search box…..just not sure how its going to fit into the design. Thx again.
Nov 23, 2012 @ 9:21 pm
nice and attractive design code.
May 24, 2013 @ 4:51 am
tks for sharing!!!
May 27, 2013 @ 8:42 pm
Thanks, awesome tutorial.
May 29, 2013 @ 10:44 am
hey
Your post is just awesome :)
It is so informative :)
Thanks for sharing :)
Dec 25, 2016 @ 11:40 pm
Hiya very nice web site!! Man .. Beautiful ..
Wonderful .. I will bookmark your website and take
the feeds also?I am satisfied to seek out a lot of useful info here in the put up,
we want develop extra strategies in this regard, thanks for sharing.