Mi Camara en CSS3

latitut · 13 Abr 2015

Saludos, anteriormente subi un codigo de un Iphone 5C y gusto bastante. Hoy les muestro otra practica que hise disenando una camara.
he subido el codigo a CodePen para que puedan verlo en vivo aqui coloco link:

CodePen: Camera in CSS3

Preview del resultado final:

para los que quieran solo ver el codigo y no modificar en vivo:

HTML:

<div class="shadow"></div>
       <div class="second-shadow"></div>
        <div class="camara">
           <div class="boton-principal"></div>
           <div class="boton-izquierda"></div>
           <div class="boton-derecha"></div>
            <div class="contenedor-flash">
           <div class="flash">
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
            <div class="linea"></div>
        </div>
            </div>
        <div class="franja"></div>
        <div class="focus">
        <div class="circulo-grande">
        <div class="circulo-mediano">
        <div class="circulo-regular">
        <div class="circulo-pequeno"></div>
                      </div>
                  </div>
              </div>
          <div class="reflejo"></div>
        </div>
        </div>

HTML:

*{
    margin: 0;
    padding: 0;
    background-color: #00acb9;
}
.camara{
    height: 240px;
    width: 400px;
    background-color: #00ccde;
    margin: 0 auto;
    margin-top: 200px;
    border-radius: 3px;  
    position: relative;
}

.franja{
    width: 400px;
    height: 80px;
    background-color: #FF5020;
    margin-top: 80px;  
    position: absolute;
}

.focus{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin: auto;
    margin-top: 20px;
    margin-left: 100px;
    position: absolute;
    background-color: #D7EBED;
    box-shadow: 2px 9px 0px rgba(0,0,0,0.2); 
}

.circulo-grande{
    height: 160px;
    width: 160px;
    border-radius: 50%;
    background-color: #5A6667;
    margin: auto;
    margin-top: 20px;
}

.circulo-mediano{
    height: 140px;
    width: 140px;
    border-radius: 50%;
    background-color: #424B4B;
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    
}

.circulo-regular{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    background-color: #1E2523;
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    
}

.circulo-pequeno{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #080A0B;
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    
}

.reflejo{
    height: 80px;
    width: 95px;
    border-radius: 50%;
    position: relative;
    margin-top: -150px;
    margin-left: 52px;
    opacity: .7;
    background-color: white;
}

.contenedor-flash{
    height: 20px;
    width: 80px;
    border-radius: 20px;
    float: right;
    background-color: #D7EBED;
    margin-top: 15px;
    margin-right: 20px;
}

.flash{
    width: 65px;
    height: 20px;
    margin: auto;
    background-color: #d7ebed;

}

.linea{
    height: 20px;
    width: 2px;
    display: inline-block;
    margin: 0.1px;
    background-color: white;
}
.boton-principal{
    float: left;
    height: 20px;
    width: 60px;
    background-color: #d7ebed;
    margin-top: -20px;
    margin-left: 35px;
}

.boton-izquierda{
    height: 40px;
    width: 11px;
    float: left;
    margin-top: 13px;
    margin-left: -11px;
    background-color: #d7ebed;
    
}

.boton-derecha{
    height: 40px;
    width: 11px;
    float: right;
    margin-top: 13px;
    margin-right: -11px;
    background-color: #d7ebed;
}

Espero les guste. Si tienen codepen me pueden dar follow y yo les devuelvo el request

Chamako · 13 Abr 2015

Esta muy bueno, aunque ese circulo blanco como que algo raro pero por todo lo demás esta excelente.

PD. Este tipo de trabajo no es el mismo codigo que usan para esto por ejemplo LINK no?

jcarlos · 13 Abr 2015

Muy buen trabajo amigo, me gusta, se necesita ánimos para crear lo que nos gusta, sigue adelante.

latitut · 13 Abr 2015

Chamako dijo:
Esta muy bueno, aunque ese circulo blanco como que algo raro pero por todo lo demás esta excelente.

PD. Este tipo de trabajo no es el mismo codigo que usan para esto por ejemplo LINK no?

Primera vez que veo ese codigo muy interesante

else · 13 Abr 2015

wow, esta genial :encouragement:

Matias202 · 13 Abr 2015

Está muy buena amigo, la verdad me gusto bastante.

Sigue asi!

SnakeNet · 13 Abr 2015

No está nada mal el diseño la verdad he visto varios trabajos así.

Peter Sandoval · 13 Abr 2015

Te quedó espectacular, aunque faltó agregarle la sombra y el reflejo del lente que me comentaste.

Dejo el mío aquí 🙄

Carambel · 13 Abr 2015

wow no sabia que se podia hacer eso, sin duda se nota que tienes tanlento.

latitut · 13 Abr 2015

Carambel dijo:
wow no sabia que se podia hacer eso, sin duda se nota que tienes tanlento.

Gracias apenas estoy iniciando

- - - Actualizado - - -

PeterSandovalM dijo:
Te quedó espectacular, aunque faltó agregarle la sombra y el reflejo del lente que me comentaste.

Dejo el mío aquí 🙄

jajja codifique algo mal dn la sobra y no sabia como resulverlo. Luego te enseño el codigo haber si encuentrar el problema

Zentraedi · 13 Abr 2015

Muy bueno gracias por compartir el código, pero la verdad esta genial la cámara que armastes.

"write once, run anywhere”

softwareweb · 23 Abr 2015

gracias primera vez que veo este codigo

gere88 · 24 Abr 2015

[MENTION=26852]latitut[/MENTION] Excelente, igualmente yo creo que el reflejo se veria mejor asi:

PHP:

.reflejo{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: relative;
    margin-top: -140px;
    margin-left: 52px;
    opacity: .4;
    background-color: white;
}

Tecnobag · 24 Abr 2015

muy bueno!!! lo hiciste tu desde cero o lo plagiaste de algun lado?

wolfnick · 24 Abr 2015

Es genial las cosas que se puede hacer con css.. Te quedó bastante bien la cámara, felicidades y gracias por el tutorial! 🙂

latitut · 24 Abr 2015

softwareweb dijo:
gracias primera vez que veo este codigo

Saludos gracias que ves que?

- - - Actualizado - - -

Absyl dijo:
Es genial las cosas que se puede hacer con css.. Te quedó bastante bien la cámara, felicidades y gracias por el tutorial! 🙂

De nada a la ordes luego subo mas

Mi Camara en CSS3

latitut

Chamako

jcarlos

latitut

else

Matias202

SnakeNet

Peter Sandoval

Carambel

latitut

Zentraedi

softwareweb

gere88

Tecnobag

wolfnick

latitut

Temas similares