Putting Shapes drawn in CSS3 On top of each other

team1504 · November 20, 2010, 4:32am

Hi,
I was messing with drawing shapes in CSS3 and I was trying to draw something that looked like my avatar, the penguin.
I came up with this:

<html>
<head>
<title>The desperate penguin in CSS3</title>
<style>
.circle {
 background-color: #000;
 height: 100px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 border-radius: 75px;
 width: 100px;
 display:block;
}
.half_circle {
 background-color:#efefef;
 height: 50px;
 -moz-border-radius:75px 75px 0 0 ;
 -webkit-border-radius: 75px 75px 0 0 ;
 border-radius: 75px 75px 0 0 ;
 border-color:#000;
 width: 100px;
 display:block;
}
.triangle {
  border-color: #ffdd00 transparent transparent transparent ;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}
.triangleB {
  border-color: #000 transparent transparent transparent ;
  border-style:solid;
  border-width:35px;
  width:0;
  height:0;
}
.triangle2 {
  border-color:  transparent  #000 transparent  transparent ;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}
.triangle3 {
  border-color:  transparent transparent  transparent #000;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}


-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
</style>
</head>
<body>
<div class="circle"></div>
<div class="half_circle"></div>
<div class="triangle"></div>
<div class="triangleB"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</body>
</html>

But, I can not seem to figure out how to position the shapes on top of each other like this:http://dl.dropbox.com/u/270523/css3Penguin.png
I know what my sketch above is far from looking like my avatar, but it is a start and I think that if you can help me put the shapes in the code above in those positions or so then I can fine tune the shapes and make it look nice!
I am assuming this is possible because I have seen some very comples things drawn in CSS3.

I would appreciate any help. Please reply if you have any Questions, Comments, Concerns, or Solutions

Thanks in Advance,
Team 1504

system · November 20, 2010, 4:58am

I haven’t played with css3 at all so far (only because it isn’t fully supported yet in the major browsers) but applying css2 techniques, I wrapped all your divs in a “container” div.

The container div has postion: relative and the child divs (your shapes) have position: absolute with top and left styles.

You should be able to adjust the top and left values to put the shapes wherever you like relative to the top left hand corner of the container div.


<html>
<head>
<title>The desperate penguin in CSS3</title>
<style>
#container {
position: relative
}
.circle {
position: absolute;
top: 0px;
left: 0px;
 background-color: #000;
 height: 100px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 border-radius: 75px;
 width: 100px;
 display:block;
}
.half_circle {
position: absolute;
top: 0px;
left: 0px;
 background-color:#efefef;
 height: 50px;
 -moz-border-radius:75px 75px 0 0 ;
 -webkit-border-radius: 75px 75px 0 0 ;
 border-radius: 75px 75px 0 0 ;
 border-color:#000;
 width: 100px;
 display:block;
}
.triangle {
position: absolute;
top: 0px;
left: 50px;
  border-color: #ffdd00 transparent transparent transparent ;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}
.triangleB {
position: absolute;
top: 0px;
left: 100px;
  border-color: #000 transparent transparent transparent ;
  border-style:solid;
  border-width:35px;
  width:0;
  height:0;
}
.triangle2 {
position: absolute;
top: 0px;
left: 0px;
  border-color:  transparent  #000 transparent  transparent ;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}
.triangle3 {
position: absolute;
top: 0px;
left: 0px;
  border-color:  transparent transparent  transparent #000;
  border-style:solid;
  border-width:40px;
  width:0;
  height:0;
}
 
 
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
</style>
</head>
<body>
<div id="container">
 <div class="circle"></div>
 <div class="half_circle"></div>
 <div class="triangle"></div>
 <div class="triangleB"></div>
 <div class="triangle2"></div>
 <div class="triangle3"></div>
</div>
</body>
</html>

Rayzur · November 20, 2010, 5:25am

Here’s my version using two floats for the wings.
Everything else is positioned with margins with the source order stacking the layers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Penguin</title>

<style type="text/css">
h1 {
    font:bold 1.6em/1.3 arial;
    text-align:center;
}
#penguin {
    width:174px;
    height:100px;
    margin:40px auto;
}

/*--- Floats ---*/
.lt-wing {
    border-color:  transparent  #000 transparent  transparent ;
    border-style:solid;
    border-width:40px;
    width:0;
    height:0;
    float:left;
    margin:10px 0 0 -40px;
}
.rt-wing {
    border-color:  transparent transparent  transparent #000;
    border-style:solid;
    border-width:40px;
    width:0;
    height:0;
    float:right;
    margin:10px -40px 0 0;
}

/*--- Blocks with Margins ---*/
.circle {
    background-color: #000;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
}
.half-circle {
    background-color:#efefef;
    width: 100px;
    height: 50px;
    -moz-border-radius:75px 75px 0 0 ;
    -webkit-border-radius: 75px 75px 0 0 ;
    border-radius: 75px 75px 0 0 ;
    border-color:#000;
    margin:-75px auto 0;
}
/*--- black beak (botttom) ---*/
.bot-beak {
    border-color: #000 transparent transparent transparent ;
    border-style:solid;
    border-width:35px;
    width:0;
    height:0;
    margin:-52px 0 0 44px;
}
/*--- yellow beak (top) ---*/
.top-beak {
    border-color: #ffdd00 transparent transparent transparent ;
    border-style:solid;
    border-width:40px;
    width:0;
    height:0;
    margin:-74px auto 0;
}

</style>
</head>
<body>
<h1>CSS Penguin</h1>
<div id="penguin">
    <div class="lt-wing"></div>
    <div class="rt-wing"></div>
    <div class="circle"></div>
    <div class="half-circle"></div>
    <div class="bot-beak"></div>
    <div class="top-beak"></div>
</div>

</body>
</html>

Rayzur · November 20, 2010, 7:18am

Hi,
Here’s another version with the wings tapered into the body.

I other thing I might point out about the border-radius values is that if they are greater than 50% of the box’s total size then they appear to collapse back to 50%.

For example, your box is 100x100 and your radius was set at 75px. It is actually rendering as 50px. I had missed that in the code above but you will see that these changes have no effect on it.


.circle {
    background-color: #000;
    width: [COLOR=Blue]100px;[/COLOR]
    height: [COLOR=Blue]100px;[/COLOR]
    margin: 0 auto;
    -moz-border-radius: [COLOR=Blue]50px;[/COLOR]
    -webkit-border-radius: [COLOR=Blue]50px;[/COLOR]
    border-radius: 50px;
}
.half-circle {
    background-color:#efefef;
    width: [COLOR=Blue]100px;[/COLOR]
    height: [COLOR=Blue]50px;[/COLOR]
    -moz-border-radius: [COLOR=Blue]50px 50px 0 0;[/COLOR]
    -webkit-border-radius: [COLOR=Blue]50px 50px 0 0;[/COLOR]
    border-radius: [COLOR=Blue]50px 50px 0 0;[/COLOR]
    border-color:#000;
    margin:-75px auto 0;
}

system · November 20, 2010, 3:12pm

While interesting as a challenge, this is not the way. CSS it’s about presentation as in related to html elements presentation, not about visual effects.

CSS, nevermind the version, has nothing to do with actual graphics. It’s another dangerous concept. And I’m not talking about shadows or rounded corners. These are just fine. No. I’m talking about the lessons everybody seems to forget: the use of presentational tags. Yes, it’s about a different thing. But it’s the same mistake.

You can have effects with CSS. You can have basic transformations. You can have animations. But it’s just not CSS anymore.

You can use SVG, canvas, flash, silverlight for these. Or just plain old simple images. Each tool with its proper use.

Why I think it’s not an appropriate CSS use and implementation? Think about it: why the need for <video> if all it takes are CSS transitions of all the images/frames that make up the video stream?

While it can prove useful sometimes, for simple tasks, CSS3 demos often look and feel like a bad copy of something else, better.

team1504 · November 20, 2010, 5:52pm

CSS, nevermind the version, has nothing to do with actual graphics. It’s another dangerous concept.

Completely true; however, I, personally, think it is quite cool and innovative. What I am trying to say is that it is fun to mess with and see what you can make.

Think about it: why the need for <video> if all it takes are CSS transitions of all the images/frames that make up the video stream?

I think that would be horrible.

Again, while I may never use this on an actual site, sorry if that bums any one out, at least until there is wide support, I just wanted to see what we could do.

Also, I have not played with HMTL5 canvas yet either.

All in All, I agree CSS is supposed to style tags, which hold and link the content.
When webkit animations come in, this why I consider webkit, sometimes, as it own styling language or shoot-off of one, css, because I can style tags for webkit browsers, but also can make animations.
As a web designer, I believe that the outputted result should be as available to anyone regardless of browser, but I was just seeing what we could accomplish. That is becuase using graphics made in css3 are almost always faster to load than actual images. While the images have much more quality, they take time to load and the can make a user angry.
As attempts to make the image smaller, to load faster, the quality decreases.
So, for simple images where it is possible to use css3, I believe it should be done. But for complex backgrounds and actual Graphic design, definitely not.
Even if CSS evolves to a point where it will completely eradicate Graphic Design software, it will never be able to erase Graphic Design software and my usage thereof from my heart

team1504 · November 20, 2010, 5:57pm

Here’s another version with the wings tapered into the body.

That is wonderful Rayzur, but the quality obviously doesn’t match that of my original image.
I am not saying you id a bad job, thank you very much for the help. I am just extending my discussion in my post above (Post #5).
I am sure with hours of work and many hacks, one could make something that looked quite like my avatar, but the graphic version will always be a graphic while the css will just be code.

Also, thank you for poiting this out:

if they are greater than 50% of the box’s total size then they appear to collapse back to 50%.

I hadn’t realised that and probably would not have on my own, Thank you, all of you, for the helo :)

Rayzur · November 20, 2010, 6:15pm

That is wonderful Rayzur, but the quality obviously doesn’t match that of my original image.
Well of course not, nor can it be expected too.

Completely true; however, I, personally, think it is quite cool and innovative. What I am trying to say is that it is fun to mess with and see what you can make.
That is what your code was all about, having fun with CSS3. Little exercises like this will help you get a better grasp on things so you can see what they are capable of.

The Penguin has a message for noonnope.

system · November 20, 2010, 6:33pm

I bow before the master. I solemnly swear noonnope will be fun from now on.

Before that though Isn’t this in fact more like an area and map kind of thing?

Rayzur · November 20, 2010, 6:53pm

When I think of mapping, I think of the need for defining irregular anchor shapes with coordinates. To be honest I never really delved into maps that much. I’m just shifting everything around at the same time with :hover on the main wrapping div.

system · November 20, 2010, 7:00pm

I’ve seen what you did, code wise. And it looks clean and beautiful.

Oh, I almost forgot. noonnope reports back: “…and fun!”

But it should have a warning: “This is just a drill!”

Rayzur · November 20, 2010, 7:37pm

^ Thanks noonnope!

I’ll heed the warning, but it’s nice to see you having fun with it for now.
We have to play around with CSS every now and then to keep it interesting.

system · November 20, 2010, 7:45pm

Thank you, Rayzur, for keeping it interesting!

team1504 · November 20, 2010, 7:48pm

Again, I completely agree:

I’ll heed the warning, but it’s nice to see you having fun with it for now.
We have to play around with CSS every now and then to keep it interesting.

And it is fun to fine-tune your skills to see what you can accomplish.

Thank you for all your help guys!

I agree with nopenope too, the code is quite elegant and clean and I did not notice the eyes until I read the code.

system · November 20, 2010, 7:49pm

[ot]

[/ot]

team1504 · November 20, 2010, 8:52pm

This post is going to be off topic too, but
Yes that was a waste of a post, but i was being honest.

system · November 20, 2010, 9:15pm

I’m sorry. Did you?

'Cos my nick is noonnope not nopenope. That’s why I was LAO.

So, you were being sincere about it: nopenope ?!

team1504 · November 21, 2010, 1:41am

haha no I was not being insincere, I was and am truly grateful, but i was in a rush that is why that post was a quick-reply as well

I realise that I typed your name, noonnope, and I meant to say that it my last post, but I was in a rush as I mentioned above

kohoutek · November 21, 2010, 1:47am

Off Topic:

Psssssssst… you forgot an “n” this time. I just copy & paste noonnope’s username into the textarea because I always get it wrong otherwise!

team1504 · November 21, 2010, 1:54am

Off Topic:

Psssssssst… you forgot an “n” this time. I just copy & paste noonnope’s username into the textarea because I always get it wrong otherwise!

I’m sorry, I am at work and there is a tenant that is in a huge fight with his wife, things are a little stressed out. Maybe I should get off sitepoint

Topic		Replies	Views
CSS3 Compatibility Check: border-radius and gradient HTML & CSS	3	1977	October 8, 2014
Trapezoid shapes with CSS3? HTML & CSS	8	6317	October 8, 2014
Consistent CSS3 HTML & CSS	3	407	October 8, 2014
CSS3 Rounded Corners w/Border issue HTML & CSS	6	809	October 8, 2014
css3 icons HTML & CSS	4	2722	October 8, 2014

Putting Shapes drawn in CSS3 On top of each other

Related topics