Best Web

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


    [TUTORIAL] Xicara de Café flat em css puro

    Compartilhe
    avatar
    While
    Administrador
    Administrador

    Mensagens : 380
    Reputação : 8

    [TUTORIAL] Xicara de Café flat em css puro

    Mensagem por While em Ter Maio 24, 2016 6:04 pm

    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:

      Data/hora atual: Ter Out 17, 2017 2:46 am