Ahmed El Gabri Web Designer & Front-end developer

CSS3 Gradients Coffee cup

by Ahmed El Gabri on 24 March 2010

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.

<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

Download Demo

55 Responses

  1. Okay, I was starting to like CSS3, but…

    you left me with no choice.

    SPECTACULAR!

  2. Now thats using the noggin. Well done!

  3. Supercool! CSS3, how not love it!

    • This is completely a coincidence , but i like the animation in the Opera example. thanks for the link

  4. Rendicahya 24 May 2010

    Awesome!

  5. This is amazing, such a good use of CSS3! I will have to try and implement this somewhere!!

  6. Wow, this is amazing. The power of css3. I wish all browser will suport css3 ASAP and die you IE6! … :)

  7. memyself 24 May 2010

    Why are you using css do make things like that? It’s weird and I thing it’s not good practice. You should use canvas (+library converting it to VML) or SVG. Of course – it is spectacular when written in CSS. But it isn’t spectacular intrinsically.

    • I`m doing this just for fun and for testing & i know that this isn`t an option in real life . so it doesn`t have anything to do with good practice.

  8. memyself 24 May 2010

    I thinK ;).

  9. That’s awesome…

    I had a sudden fearful thought though, what if images in CSS becomes commonly used? Great, but can you imagine if you had a load of cross browser issues to fix? * Shudder *

    No reason not try it or indeed be a fan of it though. Nice work.

  10. this is very nice! I love CSS3!

  11. Just too see the leaps we’ve made with CSS3 in only the past 2 months is proof that the browsers are what’s holding back the progress of web design and development. This is just another piece of proof to add to this set-back…

  12. rubycando 25 May 2010

    Amazing work :)

    First let me say that I really was speechless when I seen the demo, and I just had to test it a bit for fun.
    In case the geek in you is interested in a bit of extra info about this amazing demo, on linux Mint 8 Helena (it’s a distro based on Ubuntu, and possibly the most user friendly one out there) it works on :

    Chrome 5.0.375.55 beta
    Epiphany 2.28.0 (webkit based)
    Midori (webkit)

    It does not work on :

    Firefox 3.5.9 and 3.6.1 :( (gecko ofc)
    Opera 10.10 build 4742 (Presto ? i think its called)
    Galeon 2.0.7 (Mozilla)
    Konqueror (the “father” of webkit sort of speak – otherwise very similar to Webkit)

    I was under the impression that gecko based browsers should render it ok but for odd reasons the ones I tested did not. I also tried Firefox, opera and Chrome on Ubuntu 10.04 with the same results !
    I used the latest stable releases for the browsers I used except Firefox (I rarely use it) and an Opera.

  13. Tom Livingston 25 May 2010

    Tested on Mac:

    Safari 4.0.5 – Works
    FF 3.6.3 – Works
    Opera 10.53 (Build 8343) – Nope
    Chrome 5.0.375.55 beta – Works

    Didn’t test on any IEs, cause… well… ya know…

  14. You forgot to add the actual css3 commands…. you only used the browser hacks..

    When you do

    -moz-border-radius:185px;
    -webkit-border-radius:185px;

    You need to add

    border-radius:185px;

    So that Opera and IE9 support it. As well as future versions of FF and Chrome.

    • No need for adding those cause it`s an experiment and won`t be used in real world , so supporting future versions of IE or Opera won`t be Important.

      anyway it won`t work in any of those browsers cause the gradients are not supported except in Firefox and Webkit (Safari & Chrome)

      • Sorry, but that attitude is the reason why many developers won’t stop thinking about Opera as a bad guy. Experiment or not – this is not CSS3.

      • I agree with Bert.

      • @Bert & @Michael do you know that opera doesn`t CSS3 Gradients ? so what is the point in supporting it for something it doesn`t support ?

        and this Experiment is all about Gradients .

  15. I can simply say THAT IS AWESOME!!!

  16. First of all nice work and keep it up.

    I think that you should participate in Smashing Magazine’s CSS3 Design Contest here http://www.smashingmagazine.com/2010/06/18/css3-design-contest-join-in-and-win-ssd-hard-drive/
    if you didn’t win at least this wonderful work will be spread through Smashing Magazine for all developers to get inspired.

    • Thanks Ahmad , but actually i don`t have time this days to make something for the competition cause they want only something new not something made before.

      and already smashing magazine tweeted this post before.

  17. Have been looking at doing site optimization and improving the design on my website for a long time, so this post has been very helpful. Clear read also, so thanks!

  18. This is very Nice ! I Love CSS3

  19. Hazel Schaupp 22 June 2011

    I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it is rare to see a nice blog like this one these days..

    • Thanks for the nice words :).

      Regarding the theme it’s my own , i made it.

  20. Tkanks for sharing!!

  21. I have an addiction, where I have to read a feed if there is new article on it

  22. this a great design from css3
    thanks for sharing

  23. nice one creativity
    ty ?

Comments are closed, you can drop me a line here or reach me at @ahmedelgabri