Diagrama com CSS 3

Galera hoje vou postar um diagrama de porcentagem que tenho no meu Portfólio, à pedido da galera do chat. Eu uso para porcentagem dos meus conhecimentos em linguagens da web, mas vocês podem usar para outras coisas, para sites de animes como por exemplo: animes upadas para o site ou para diversas coisas que vocês acham que esse código se encaixe. Confira a demo abaixo na área de "Conhecimentos":

Demonstração

Primeiramente vá em Layout >> Editar HTML >> procure por:

]]></b:skin>

Acima da tag citada adicione o seguinte CSS

#box-up {
width: 400px; /* Edite aqui o tamanho do box com o diagrama */
height: 142px; /* Edite aqui a altura */
float:right; /* Edite a flotagem */
margin: 10px 10px 0px 0px; /* Edite a margin correspondente a float */
}
.lista {margin-top:45px; background:#ccc left top no-repeat;} /* Edite aqui a margin e o bg dos links da lista */
.lista ul {list-style:none;position:relative; height:200px; border-bottom:0px dotted #333;}
.lista li {list-style:none;padding-top:80px; font:bold .7em "Myriad Pro", Arial, Helvetica, sans-serif; text-transform:uppercase; text-shadow:1px 1px 3px #666;}
.lista li+li {padding-top:10px;list-style:none;}
.lista strong {cursor:pointer;}
.lista li:hover strong {text-decoration:underline;}
.lista li span {position:absolute; bottom:0; display:block; border-width:1px 1px 0 1px; border-style:solid;
border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0;
opacity:0.4; -moz-opacity: 0.4; filter: alpha(opacity=40);}
.lista li:hover span {z-index:99; opacity:.8; -moz-opacity:.8; filter: alpha(opacity=80);}
.lista li.Photoshop span {left:130px; width:120px; height:120px; background:#39c; border-color:#069;
background:-webkit-gradient(radial, -70 10%, 0, -70 10%, 200, from(#69cc), to(#39c));
background:-moz-radial-gradient(-70px -70px, circle, #9cc 1px, #39c 90%);}
.lista li.dreamweaver span {right:5px; width:110px; height:110px; background:#036; border-color:#003;
background:-webkit-gradient(radial, -70 10%, 0, -70 10%, 200, from(#39c), to(#036));
background:-moz-radial-gradient(-70px -70px, circle, #39c 1px, #036 90%);}
.lista li.php span {left:200px; width:95px; height:95px; background:#c06; border-color:#906;
background:-webkit-gradient(radial, -70 10%, 0, -70 10%, 200, from(#f6c), to(#c06));
background:-moz-radial-gradient(-70px -70px, circle, #f6c 1px, #c06 90%);}
.lista li.CSS span {left:315px; width:110px; height:150px; background:#360; border-color:#030;
background:-webkit-gradient(radial, -70 10%, 0, -70 10%, 200, from(#6c3), to(#360));
background:-moz-radial-gradient(-70px -70px, circle, #6c3 1px, #360 90%);}
.lista li.blogger span {left:230px; width:110px; height:140px; background:#f90; border-color:#c60;
background:-webkit-gradient(radial, -70 10%, 0, -70 10%, 200, from(#ff6), to(#f90));
background:-moz-radial-gradient(-70px -70px, circle, #ff6 1px, #f90 90%);} Eu espero ajudar disponibilizando este código, caso você não tenha um conhecimento básico de CSS e HTML não vai conseguir editar as cores e as div's da lista.

Agora adicione o código abaixo seja em uma área de postagem ou em um gadget do blogger:

<div id="box-up">
<div class="lista">
<ul>
<li class="Photoshop"><strong>Photoshop</strong><span></span></li>
<li class="dreamweaver"><strong>Dreamweaver</strong><span></span></li>
<li class="php"><strong>PHP</strong><span></span></li>
<li class="CSS"><strong>HTML/CSS</strong><span></span></li>
<li class="blogger"><strong>Blogger</strong><span></span></li>
</ul>
</div>
Agora edite os nomes das div's de acordo com a edição do css, por exemplo: se lá na .lista li.Photoshop você mudar para por exemplo: .lista li.Naruto ... Você terá que editar o nome dessa class: <li class="Photoshop"> para: <li class="Naruto">.

Bom, espero que vocês tenham entendido como funciona esse diagrama todo com as atualizações do CSS.

Espero que tenham gostado, só peço que curtam nossa página no facebook.... até a próxima postagem!