[TUTORIAL] Xicara de Café flat em css puro

**While** · **While** Ter maio 24, 2016 6:04 pm

Informações:
Autor: Wagner
Funcionalidade: Todas as versões

Código:: <!DOCTYPE html>  <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>

Resultado:

Create an account or log in to leave a reply