Ahmed El Gabri Portfolio

Last week while i was reading through my RSS feeds i found to great articles wrote by David DeSandro , the 1st one was about making Opera logo purely with CSS and the other one was making a pure CSS font.

In this time i was redesigning my site and adding a blog to it , so i was thinking about a my first post what will it be so after reading David`s articles i remembered a tutorial at PSDTUTS+ using Gradients to make a Coffe cup so i wanted to see if i can replicate this with CSS only so the credit goes to David for giving me the inspiration to do this.

DemoDownload

<div id="wrapper">
	<div id="base_shadow"></div>
	<div id="base" class="base"></div>
	<div id="base_highlight"></div>
	<div id="base_gradient"></div>
	<div id="hand_shadow"></div>
	<div id="cup_shadow"></div>
	<div id="hand"></div>
	<div id="cup_base" class="base"></div>
	<div id="cup_gradient"></div>
	<div id="coffee"></div>
	<div id="smoke"></div>
</div>

So it`s consists of 12 divs think of it as 12 layers , no Z-index used cause once you declare Position property to an element it gets a Z-Index higher than the element before it so the order of the elements are important to write clean CSS code. The Wrapper div is set to position:relative and all inner divs set to position:absolute to be able to position them relative to it`s parent which in this case is the wrapper div.

To center the inner divs easily i have a trick , subtract the width of the inner div from the parent div that it will be position relative to then divide the result by 2 and the same for the height for example: ( #base width – #wrapper width /2 = the top position ) the same for the height. I`m not sure this will work in all situations.

The CSS is very easy , to make complete circles just assign a border-radius which is half the height and width of the element and that`s it check this article for more info about the border-radius.

Then we get to the interesting part gradients i personally like Mozilla`s declaration over the Webkit one cause it`s more easy for me to remember and work with ( BTW , how can you make an ellipse Gradient for webkit ? ). I`ll be glad to hear any feedback .

Update: Today after Opera released it`s latest beta they now supports CSS3 gradients so i`ve updated the demo & the downloaded files