resultado de input file

personalizando la input file

que tal en este post les mostrare como personalizar este tipo de "input" ya que no se le puede dar mucho estilo(a el boton es imposible), podremos darle estilo solo con css y un poco  de js para hacer que funcione.
Bueno este es el codigo HTML:


Codigo Fuente:

<div class="contenedor"><div class="transparente"></div>                                                                     
<div class="boton"><button class="botonexaminar"                                                                                 onclick="document.getElementById('examinar').click();">EXAMINAR</button></div><input type="file" id="examinar" onchange="this.style.color='green';">                                                                                 
</div>                          //el js esta ya esta en el HTML                                                                                       

Codigo Fuente:
.contenedor{                                                                                                                                          
width: 280px; height: 28px; position: relative; overflow: hidden; background: black; border-radius: 5px;                                                                                                                                           
}                                                                                                                                                             
#examinar{                                                                                                                                            
 height: 30px; position: absolute; left:-65px; top: 5px; background: black; color:red;                    
display: block; font-size: 12px; padding-top: 5px;                                                                      
}                                                                                                                                                             
.boton{                                                                                                                                                   
    width: 50px; height: 30px; position: absolute; top: -1px; left: -1px; z-index: 1;                            
}                                                                                                                                                             
.botonexaminar{                                                                                                                                   
width: 63px; height: 30px; font-size: 10px; background: black; border: white solid 1px;        color:gray; font-weight: bold; -webkit-transition:all .7s ease; border-top-left-radius: 5px; border-bottom-left-radius: 5px; cursor: pointer;                                                                                             
}                                                                                                                                                             
.botonexaminar:hover{                                                                                                                          
color: white;                                                                                                                                             
}                                                                                                                                                                  
.transparente{                                                                                                                                           
width: 230px; height: 30px; background: transparent; position: absolute; left: 63px; top: 0px; z-index: 1;                                                                                                                                                 
}                                                                                                                                                                  

y con este codigo ya pueden hacer su input file personalizado
resultado

y listo

Imagenes

imagenes de el sitio

HTML 5, la etiqueta

Este es un breve repaso  de la etiqueta  <video>  

video llega con la aparicion de el html 5, y con esta aparicion llega a la web la posibilidad de insertar un video sin necesidad de "flash" .

los atributos de video son:

controls: define si los controles seran visibles.

autoplay: define si el video se reproducira automaticamente.

loop: define si al terminar de reproducirse se reproducira nuevamente.

src: ubicacion de el archivo que se va a reproducir.

poster: es la imagen que se mostrara antes de reproducir el video.

muted: indica si el video se reproducira sin sonido.

y tambien claro:

width: que indica el anchor de el video.

height: que indica el alto de el video.

Codigo de fuente:

este es el codigo: <html>
<head>
<title>prueva de video</title>
</head>
<body>
<div>
<video controls="" height="300px" id="video" src="la ruta de el video.mp4" width="300px">

</video>
se pueden personalizar los controles por medio de javascript <div> </div> </div> </body> </html>

descargar menu on click

De aqui pueden descargar el menu onclick
aqui pongo un ejemplo:
-->

Menu OnClick

Paguina 1

Paguina 2

Paguina 3

Paguina 4

-->

y podran descargarlo de: preguntas en los comentarios

descargar