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

Ventanas Personalizables

Hola que ta creo este es mi primera publicacion,bueno este es un metodo de meter informacion en su paguina o blog de una manera facil y sencilla aqui dejo un ejemplo de lo que les platico
pueden descargar el archivo rar de

AQUI |

Este enlace tambien sirve para que vean el resultado yo por ejemplo lo use para realizar una descarga directa desde este blog,bueno esto estaria conformado asi:
<script src="LA RUTA DE EL ARCHIVO" type="text/javascript"></script>
<link href="RUTA DE LA HOJA DE ESTILO" rel="stylesheet" type="text/css"></link>
estas dos etiquetas deven ir en el <head>

el codigo para abrir el showdialog seria:
  <div id="nombre">
     <a href="javascript:showDialog('Titulo','contenido','success','aqui va el tiempo en que la ventana se cerraria(opcional)');">
   TEXTO
</a>
</div>

ustedes podrian ir modificando las imagenes de fondo y los textos
para meter vinculos a el contenido de la ventana seria asi:
<a href=http://pagina class=>texto</a> sin comillas("") el class es por si al caso quieren derle algun estilo a el enlace.
pueden usar etiquetas html con <> pero sin usar comillas

el:
#dialog,seria la caja donde se  encuentra el contenido.
el:
#dialog-header,seria la barra donde se encuentra el titulo.
el:
#dialog-close,seria la pequeña x para cerrar la ventana.


lo que usariamos seria el success
para eso solo modificaremos
.success{background:#fff url(imagen.png); bottom right no-repeat; border:1px solid #60a174; border-top:none}
el #fff seria el color de fondo
y imagen.png seria la imagen

tambien usariamos
.successheader{background:url(images/he.png) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
la imajen he.png tiene una dimencion de 1px x 24px

Ustedes pueden cambiar las imagenes y los texto pregunten si hay alguna duda
este tuto esta basado en un tutorial de vagabundia.blogspot.com