Best Web

Fórum de suporte á códigos e gráfico á Usuários forumeiros.


Você não está conectado. Conecte-se ou registre-se

[TUTORIAL] Xicara de Café flat em css puro

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [TUTORIAL] Xicara de Café flat em css puro em Ter Maio 24, 2016 6:04 pm

While

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




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>

Resultado:

Ver perfil do usuário http://bestweb.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum