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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.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
14
15
16
17
18
19
20
21
22
23
24
25

.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.

Hate writing vendor prefixes for all browsers ? Hate organizing your CSS files ? Hate hard coding the same values every time in the properties field?

Here comes the solution for you guys.

Just by typing this,

1
2
3
4
5
6
7

.banner{
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px;
}

You can get this,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.banner {
-moz-border-radius: 2em;
-moz-box-shadow: #f2f2f2 0 0 5px;
-webkit-box-shadow: #f2f2f2 0 0 5px;
-webkit-border-radius: 2em;
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px
}

But HOW ? CSSPrefixer does it for you!

CSS Prefixer turns your ‘Simple code’ into ‘Cross browser supported’ code. This Python Framework will include all the vendor prefixes for all browsers. See an example below,

Want to create a Dynamic Stylesheet with reusable values?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less is a well known CSS Preprocessor application created in PHP. LESS will allow you to specify widely used values in a single place. It’s cool isn’t it ! Lets see some examples below.,

{Courtesy LESSCSS.Org}

You can check the Less code in the above Screen shot. It declares a new reusable color variable, so that, whenever we need to change the color, we can go ahead and change the color value in single place. It makes life easy Lets see another example.,

You can find the list of CSS Preprocessors @ Speed up development time.

Stay tuned for more “Make your life easy” kind of posts

Adding multiple backgrounds is made simple using the multiple background image enhancement in CSS3. As for the CSS2, we specify a Div above another Div in order to get multiple backgrounds. But with the new rules in CSS3, we can easily add multiple backgrounds to a single division in HTML.

We can have any number of layers in CSS3. The number of layers is determined by the number of comma separated values in the  Background property.

For example.,

1
2
3
4
5
6
7
8
9
10
11
12
13

#Multiple
{
border: 2px solid #cccccc;
<strong>background:<span style="color: #993366;">url(image1.gif) center</span>, <span style="color: #000080;">url(image2.gif) center no-repeat</span>;</strong>
height: inherit;
width: inherit;
}

or we can also write like this,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#Multiple
{
border: 2px solid #cccccc;
<strong>background-image: url(image1.gif), url(image2.gif);
background-position: center , center;
background-origin: border-box, content-box;
background-repeat: no-repeat,no-repeat;</strong>
height: inherit;
width: inherit;
}

Refer to the Output below.,

If you look through the code, you can see several background images placed on top of each other.The first image is the one which is closest to the user. The second image is placed behind the first and so on.,

Browsers that support CSS3 multiple backgrounds are Firefox 3.6, Opera 10.5 and Google Chrome 3.5 version. IE uses filters to add multiple backgrounds!

]]> http://rockstartemplate.com/tutorial/multiple-backgrounds-in-css3/feed/ 1 http://rockstartemplate.com/tutorial/border-shadow-effect-css30/ http://rockstartemplate.com/tutorial/border-shadow-effect-css30/#comments Sun, 28 Feb 2010 12:08:26 +0000 Rockstar http://rockstartemplate.com/?p=852 Are you still using Photoshop to create a Shadow Effect for your DIV tags and setting the image in CSS ? Or Still using JavaScript to get Shadow effect for your  images ? Yes ?  It means you are not aware of CSS 3.0 !

Stop using Photoshop  !!   Use CSS 3.0  !!

One of the most coolest feature in CSS 3.0 is the Box shadow property. This gives you an awesome look for all the borders you design. Let us see the syntax first.

Syntax :
{
box-shadow: <horizontal> <vertical> <blur> <color>
}

It looks simple but powerful. The first field in the property specifies the horizontal shadow, continued by the vertical shadow. The third field in the property specifies the blur ratio, followed by the color of the shadow.

Cross Browser Compatibility :

• Firefox 3.5 implements the feature as -moz-box-shadow.
• Safari Browser implementing the feature as -webkit-box-shadow.
• Microsoft Internet Explorer have DropShadow filter.
• Opera Browser users are unlucky to view this shadow property.

Let us see some of the examples of Box-Shadow property.

Sample 1: Without Blur Effect

Sample 2: With Blur Effect

Sample 3: With Heavy Blur Effect

Sample 4: With Inner Shadow Effect

Sample 5: With Rounded Border shadow Effect

You can see this feature working only in Safari 3+ and Firefox 3.1 Alpha. Other browser users wont see this feature.

So no more Jpeg/Gif/Png for Border Shadows from now. Start using CSS3.0.