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

Xícara de café flat em puro CSS

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

1 Xícara de café flat em puro CSS em Seg Set 15, 2014 3:20 pm

waghcwb

avatar
Membro elite

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 Very Happy

Resultado:


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>



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

2 Re: Xícara de café flat em puro CSS em Seg Set 15, 2014 4:56 pm

Je4n

avatar
Membro ativo

O Resultado ficou bem interessante. Porém, faltou alguns suportes de marcações e propriedades (box-shadow e border-radius por exemplo) para diferentes versões dos diferentes navegadores, assim seria suportado visualmente sem erros em quase todos os navegadores mais utilizados. Parabéns. Very Happy



{WASD}
Ver perfil do usuário

3 Re: Xícara de café flat em puro CSS em Seg Set 15, 2014 5:12 pm

waghcwb

avatar
Membro elite

Na verdade não coloquei os prefixos devido ao fato que eles já são amplamente aceitos nos navegadores mais modernos. Não é mais necessário o uso dos prefixos para essas propriedades xD

Mas concordo que para algumas propriedades não coloquei o prefixo como -moz- por exemplo..

Mas mesmo assim, fazendo o teste no Firefox ele funcionou hehehe

Obrigado.



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário

4 Re: Xícara de café flat em puro CSS em Seg Set 15, 2014 5:15 pm

xMooPx

avatar
Membro

O.o, primeira vez que vejo alguém viciado em café igual a eu.
Ficou excelente ^^.

Ver perfil do usuário

5 Re: Xícara de café flat em puro CSS em Seg Fev 16, 2015 6:56 pm

TiagoDJ7

avatar
Membro ativo

Quem precisar de photoshop quando ser tem css...



Ver perfil do usuário http://wsbrasil.net

Conteúdo patrocinado


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