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.

View Demo Search Form

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;
}

circle

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);
}

box shadow inset

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.

search form

240 Comments

1 10 11 12
  1. Taseer uddin
    Jun 20, 2012 @ 5:06 am

    That’s very nice idea of creating circle by utilizing radius feature.
    I like it.

    Reply

  2. johanso
    Jul 1, 2012 @ 9:11 am

    is very good, creative things to do in html and css3, excellent

    Reply

  3. asd
    Jul 19, 2012 @ 1:02 am

    asd

    Reply

  4. asdasd
    Jul 19, 2012 @ 6:52 am

    asdasdasd

    Reply

  5. Dan
    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 :)

    Reply

  6. Tech Support Guy
    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.

    Reply

  7. walif
    Nov 23, 2012 @ 9:21 pm

    nice and attractive design code.

    Reply

  8. ao cuoi
    May 24, 2013 @ 4:51 am

    tks for sharing!!!

    Reply

  9. fauzi
    May 27, 2013 @ 8:42 pm

    Thanks, awesome tutorial.

    Reply

  10. Afzal
    May 29, 2013 @ 10:44 am

    hey
    Your post is just awesome :)
    It is so informative :)
    Thanks for sharing :)

    Reply

1 10 11 12

Leave a Reply