CSS3 Stylish Search Box with Folded Corner Effect

submit to reddit

This tutorial shows you how to create a Folded corner effect without images. Just like the one mentioned below..,

The below sample is a simple search box without a folded corner. Our tutorial shows you how to make this search box with folded effect.

Step 1] Create a simple Search Box with Gradient and shadow effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.searchbox {
position:relative;
width:400px;
margin:0px auto;
color:#f2f2f2;
background:#97C02F;
overflow:hidden;
border: solid 0px #d2d2d2;
padding:1em 1.5em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#C7FD3F), to(#638903));
background: -moz-linear-gradient(top,  #C7FD3F,  #638903);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7FD3F', endColorstr='#638903');
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7FD3F', endColorstr='#638903');
}

Here i have used a simple gradient effect with Css3. This effect is compatible with all the browsers. Make this div position relative, such that we can place our corner effect. You can modify the color of the gradient by modifying the start and end color string.

Step 2] Add the folded corner effect into the above div element.

1
2
3
4
5
6
7
8
9
10
11
12
13
.searchbox:before {
content:"";
position:absolute;
top:0;right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:#fff #fff #658E15 #658E15;
background:#638903;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
display:block; width:0;
}

This is the best part. We make the Top and Right position to ‘0’ and position to be absolute. You can also change the corner of your box by changing the values to bottom:0; and left:0;

If you want to slope the shape the other way modify the border-width:0 16px 16px 0; to border-width:16px 16px 0 0; By doing this we can change the slope of the folded corner.

Now our final search box looks like,

Check out the demo and create your own stylish buttons.

To know more bout CSS3, Click here.