Plenty of websites has input forms containing some text, that disappear when user clicks on it or enters own text.
Here is the code used to create the input on the image above:
<input class="search-input" type="search" name="search" placeholder="Enter your search terms...">
When CSS3 came with the border-radius element, it was like a salvation. The times where creating round corners was made by using graphic files finally come to the end. Damn! What a pain it was when you had to modify something and re-create the graphic file again and again. Today, this torment is over. Take a look how simply you can create beautiful round corners on input boxes, creating interesting effect.
Such a cool effect can be created by applying border-radius on both search input and button elements. One element gets only left borders rounded, the other gets only the right borders rounded, and voila! A few simple lines of the code and we have cool looking search box. No images, no nerves, done in no time.
Here is the code: (more…)