CSS for Fading Corners
Due to the responses to “Free Fading Corner Images”, I will cover how to use a fading corner with CSS.
Simple Method:
I’ve found that the simplest way to do this by using a single div with the fading corner as a background image that doesn’t repeat. Make sure in your css that you set the background image to no-repeat, and place it in the top left. I also put a 20px left padding on the content in the div.
The HTML:
CSS for Fading Corners
Method 1: A single div with 1 background image.
The CSS:
Important: If you copy and paste this code, you have to make sure your image URL is correct.
h1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
color: #7C8D37;
padding-bottom: 5px;
padding-left: 20px;
padding-top: 15px;
}
.wrapper {
height: 400px;
width: 440px;
background-image: url(images/fading_corner_2.jpg);
background-position: left top;
background-repeat: no-repeat;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: small;
color: #616161;
width: 390px;
padding-left: 20px;
}
View the Result (Live Example)
More complex, but flexible width and height:
1. Slice Your Image into 5 Parts.
In order to keep your file size to a minimum, you can slice your fading corner into 5 pieces and also give yourself a lot more flexibility with your layout. It gives you the ability to use very small background images and repeat them, instead of loading one large image behind the entire column. It’s not quite as simple, but it is a much better approach if you are at all interested in slimming down your load times.
I know it sucks to have to deal with 5 images instead of 1, but lets take a look at file sizes. The original .jpg I provided in the previous post has a file size of approximately 40K. The total file size of all 5 images after they are sliced is 2.4K.
The Reason for Slicing:
By slicing your fading corner into parts, you give yourself unlimited flexibility for any layout. You can repeat the darkest part of the shadow (simple CSS background repeat) to adjust for any width or height in your layout. Here’s a visualization.
2. The HTML:
This is the HTML I used for the example (the download). Once again, let me note that this is only one example of how to do this. There are probably at least a dozen different approaches. Don’t be afraid of trying your own HTML/CSS combination.
CSS for Fading Corners
Keep your file size down by slicing up your image. This method also gives you flexibility with your width and height because you can repeat the darkest part of the shadow as far as you need to.
3. The CSS:
Important: If you copy and paste this code, you have to make sure your image URL’s are correct.
#wrapper {
height: 400px;
width: 465px;
}
.corner {
padding: 0px;
float: left;
height: 12px;
width: 16px;
background-image: url(../images/fading_corner_2_01.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px;
}
.leftShdwRepeat {
background-image: url(../images/fading_corner_2_04.gif);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
float: left;
height: 90px;
width: 16px;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
color: #7C8D37;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999999;
padding-bottom: 5px;
width: 400px;
}
.contentWrapper {
float: right;
height: 400px;
width: 440px;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: small;
color: #616161;
width: 390px;
}
.leftShdwFade {
background-image: url(../images/fading_corner_2_07.gif);
background-repeat: no-repeat;
background-position: right top;
float: left;
height: 171px;
width: 16px;
margin: 0px;
padding: 0px;
}
.topShdwRepeat {
margin: 0px;
padding: 0px;
float: left;
height: 12px;
width: 90px;
background-image: url(../images/fading_corner_2_02.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
.topShdwFade {
background-image: url(../images/fading_corner_2_03.gif);
background-repeat: no-repeat;
background-position: left bottom;
margin: 0px;
padding: 0px;
float: left;
height: 12px;
width: 356px;
}
View the Result: (Live Example:)
Thanks for all the feedback on my previous post. I hope this answers some of your questions. And let me say again that this is by no means the only way to achieve a fading corner. There are many more ways to do this. Does this example work for your layout?
Related Posts: Free Fading Corner Images
Related Posts:
- Fading Corners using a Background Gradient
- Web Design Trend: Fading Corners
- 30 Free Fading Background Images
- How to use Vector Files in Web Design
- Free Vector Fading Corner
- Free Fading Corner Images
too complicated..
so many html divs..
absolutely,
and repeating 1px wide background images eat both CPU and memory
Updated. Simple method added.
thanks very neat
good work! many ThankS!! ;-p
Very nice metod…
What about this JavaScript based unobtrusive solution? (try with or without JS)
It’s based on code showed in this post, however it seems to have some problem with more than one “wrapper” container, could You chek them?
Thank You ( for this post too :-) )
why 5 images?
could be better if you should use only 1? (Even if it’s more kb to load each time)
IMHO: too complicated!
:|
[...] http://www.bittbox.com/general-web-design/css-for-fading-corners/ Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover [...]
This is a little off topic, but for the h1 underline, you could use
border-bottom: 1px dotted #999;to shorten the code. ( also, if the rgb components in the hex code are repeated, it can be shortened to 3 numbers. example: #778899 is the same as #789)
Sorry, I forgot to close my code tag. But I am only a kid so I have an excuse.
Hey Im a web designer and I dont know if you have said this or not but why dont you just get the one image and use the CSS for the one div. So say you have in your HTML / PHP doc:
hello this is just using one image and css
and then in your css:
#home {
width:300px;
height:150px;
background:url(images/corner_image.jpg) top left no-repeat #FFFFFF;
}
and that should pretty much do it. No need for 6 million lines of code and 3million images. :)
sorry the text: “hello this is just using one image and css” is suppose to be wrapped in a div with the id “home”. The tags didn’t show
To Ian:
Wouldn’t one image take longer to download, not look good for different sized wrappers, and not allow for a changable background?
[...] kleines Tutorial für Hintergrundbilder mit auslaufendem Schlagschatten präsentiert Bitbox: CSS for Fading Corners. Der Artikel beinhaltet eine einfache aber fixe Lösung und eine für flexible Darstellung. Tags: [...]
This is great example. I have a question what if i want to extend the top shadow repeat to the right side and fade around the right corner? I am new at this and need help on the website i m creating. Hope you can help
This is very inspirational work so that we pick it up when it works for us. This does require us to necessarily use it for everyone’s “corner”.
nice
Nice.. Thansk..!
good file….
I have a good content, please my website visit.
atrociousness heartwise hydroeconomics pseudonychium frizzle polyphemic alveolate telesterion
Aboriginal fury over topless ban
http://www.watfordfencingclub.co.uk/
atrociousness heartwise hydroeconomics pseudonychium frizzle polyphemic alveolate telesterion
Yeongdeok County
http://www.geocities.com/tsunami81411/CEDARCLIFF.html
you can do the same effect of shaded border using css http://www.compwrite.com/index.php/2008/05/04/css-border-shades-without-images/
You dont need any background image to do this, and advantage of this is if you want to increase or decrease the page width so you dont need to change the image
I had to take a moment and thank you for the post you wrote. I have been trying to understand this subject for a while, there is so much information out there, but your post helped me understand the concept. So thank you.
hmmm neat… :) thanks..
the fading corners pkg.zip doesnt work everytime i try to save it it saves at 7.9kb ..and when opening file is corrupted. Please help
Thanks
I get a 404 on the live example link. Can you repair this please?
thanks!