3D Corner with Gimp and CSS
I wanted to add a 3d corner effect to the posts displayed on the front page of this blog to give it less of a plain flat page. I created a quick drop shadow image with the GIMP and with a quick alteration of my templates CSS had it up.
Step 1-1 Create plain white image
Create a plain white image - the size should depend upon how big of an effect you wish. I ended up using 420 wide by 256 (Drop Shadow will add 30px to both height and width) just because it was the size of a previous image I was working on.
I didn’t want it square and may go back and shorten the height just a bit more later on.
Step 1-2 Apply Drop Shadow
Now I applied a Script-Fu > Shadow > Drop Shadow: which increased the image size by 30 pixels in each direction by adding a transparent bar to the right and bottom of the image with a black (My current foreground color) shadow.
I then flattened the image - getting rid of the transparency to just have a plain white square with the shadow effect in the lower right corner.
Step 1-3 - fading the shadow
I liked what I had but because of the dynamic size of the div I was going to use this for I wanted the shadow to fade when towards the top and left. For this I used the gradient tool and used the FG to transparent.
Clicking on the top and pulling down until meeting with the lower shadow causing the right shadow to fade the higher it went. I then did the same for the bottom shadow clicking on the left of the image and pulling right.
You can mess with this for a while undoing and redoing until the fade looks like what you want.
I then uploaded the final image up and started looking for the proper CSS file and class to edit.
Step 2-1 Editing the CSS
The post class was the class I needed to edit and the css file was homepage.css. If I was still using the default them it would have just been style.css. most themes use different names and multiple CSS files.
My theme had no real styling for the post div but had it joined up with a few others for text-align: center
So I removed it from that list and created an entry just for it.
My first attempt it didn’t look to good and the text of the post over ran the shadow on the right and crowded the bottom so I added some padding to the right and bottom.
.post {
background-image: url('/wp-content/themes/tuned-100/images/drop_shadow_lr.png');
background-position: 100% 100%;
background-repeat: no-repeat;
padding-right: 50px; /*text over-ran the shadow*/
padding-bottom: 50px;/*so added some padding*/
}
I have thought about trying different colors for the drop shadow as it might look better with a color matching up with other parts of the page.
Fairly quick and easy - it took much longer creating the screen shots and writing this entry.