Xícara de café flat em puro CSS Seg 15 Set 2014 - 15:20
Olá,
Sou mais um viciado em café, e como sempre que estou codando estou aqui tomando (inclusive agora mesmo x.x).. Resolvi tentar fazer uma xícara de café com puro CSS, e consegui um resultado bacana, lembrando que é feita baseada no flat design, por isso é bem simples
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Códigos usados:
Sou mais um viciado em café, e como sempre que estou codando estou aqui tomando (inclusive agora mesmo x.x).. Resolvi tentar fazer uma xícara de café com puro CSS, e consegui um resultado bacana, lembrando que é feita baseada no flat design, por isso é bem simples
Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Códigos usados:
- Código:
<!DOCTYPE html>
<!--
// Cup of coffee with pure CSS
// Author: Wagner ( /waghcwb )
// This is just a simple example, this work is free and not commercial.
// Feel free to share or modify it, but just remember to maintain the credits (:
// Last update: 01/06/2014
-->
<html>
<head>
<title>Xícara de café flat em CSS puro</title>
<meta charset="utf-8">
<style type="text/css">
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
body{
font: 10px Lucida sans;
background: #98bfff;
color: #fff;
}
#cafe{
margin: 0 auto;
width: 20em;
height: 22em;
margin-left: -10em;
left: 50%;
top: 10%;
position: absolute;
}
#circulo{
border-radius: 50%;
width: 20em;
height: 20em;
background: #fff;
position: absolute;
}
#liquido{
background: #581b00;
border-radius: 50%;
width: 15em;
height: 15em;
position: absolute;
left: 50%;
top: 50%;
margin-left: -7.5em;
margin-top: -7.5em;
box-shadow: inset rgba(0,0,0,.2) -2em 2em 0;
}
#cabo{
background: #fff;
width: 3em;
height: 7em;
border-radius: 30%;
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#wrap{
max-width: 800px;
margin: 30em auto 0;
}
</style>
</head>
<body>
<section id="wrap">
<section id="cafe">
<div id="cabo"></div>
<div id="circulo">
<div id="liquido"></div>
</div>
</section>
<section id="tutorial">
<h2>Xícara de café flat em CSS</h2>
</section>
</section>
</body>
</html>
