May 12
Beautiful CSS3 Search Form
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.
Voices That Matter: Conference 2010 Word of Mouth Marketing
Comments
Pages: 14 13 12 11 10 9 8 7 6 5 4 … 1 » Show All
There are 138 comments (+Add)
Pages: 14 13 12 11 10 9 8 7 6 5 4 … 1 » Show All
Loading ...
138 hellonearthis http://accessibility
August 20th, 2010 at 9:29 am
Nice one.
To add accessibility, after the form is defines add a label statement.
[label style=”visibility: hidden; font-size:0%” for=”search”>Search this site[/label>
[ brackets added to for blog post. and should be <’s
note visibility is hidded, and font size is 0%. That makes it look no different from the norm but blind people can read it using jaws.
137 Madhyam Technology http://madhyamtech.com/
August 17th, 2010 at 4:21 am
oasam designs.
Madyam Technologies, India based web company offering affordable web
design services to its clients, serves an eye-catching and crispy layouts. Also offer
flash animation and logo designing and SEO,Shopping Cart Development,ERP,CMS,CRM
Services etc.
136 azman http://azman-sinoby.blogspot.com
August 13th, 2010 at 2:00 am
great, i like it
135 Freelance Portal http://freelanceportal.8rf.org
August 8th, 2010 at 10:43 am
http://www.freelanceportal.8rf.org
Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.
Cheatsheets and online tutorial.
http://www.freelanceportal.vze.com
134 Adriaan Fenwick http://www.creativepaste.com
July 23rd, 2010 at 3:34 am
Very cool technique, thanks for sharing it.
I get the same issue as @Dave on Google Chrome (5.0.375.99)
133 GuKe
July 22nd, 2010 at 10:47 pm
very cool,i love it !
132 Ian
July 21st, 2010 at 1:16 pm
I tried using the inset shadow and it comes out flawless in FireFox but for some reason in Chrome it does something very odd. The borders render round because of border-radius, but the shadow doesn’t. It renders with 4 sharp corners around the round corners of the field anyone have any insight on if this can be fixed?
131 kai http://oki.maulana08.student.ipb.ac.id
July 19th, 2010 at 8:18 pm
wowh… i wanna try it… it’s nice trick
130 Web Dizajn Design21th http://www.design21th.com
July 19th, 2010 at 12:02 am
very cool!
129 doris http://dorismanp06.student.ipb.ac.id
July 16th, 2010 at 7:40 am
so beautifful