The Mountain from Terje Sorgjerd on Vimeo.
2 mayo, 2011
by Alessandro
0 comments
27 enero, 2011
by Alessandro
2 Comments
Variables en el Css
Variables en el Css, esperamos que pronto estén disponibles:
http://www.xanthir.com/blog/b49w0
http://www.xanthir.com/blog/b49w0
23 enero, 2011
by Alessandro
0 comments
uploadButton
A menudo, unos de los puntos débiles de cualquier sitio web son los formularios. Elementos poco estilizables, poco flexibles. Así que es sencillo encontrar sitios con un buen diseño, maquetados con todos los chismes y estandard modernos, pero con formularios de aspecto antiguo.
Una manera para obtener un buen resultado es la de añadir más html entorno a estos elementos, así que con un poco de css es posible darle un toque moderno.
Por suerte el jQuery puede ayudarnos. Hice un pequeño plugin para estilizar el input del tipo file, podéis descargarlo en los enlaces a continuación:
jquery.uploadButton.zip
jquery.uploadButton.min.zip
La única dependencia por supuesto es el jQuery, ya que la imagen que utilicé para este plugin, la que sostituye el botón del elemento, está incrustada en el código javascript mismo.
Como utilizarlo:
Valores por defecto:
Como podeís ver, es posible cambiar la imagen del botón, y también cambiar el tamaño de este, cambiando los valores buttonWidth y buttonHeight. Sin embargo el botón es doble, cambia aspecto después que se ha elegido un fichero cambiando el valor background-position al valor negativo de buttonHeight, es decir, en el caso que utilizamos los valores por defecto: background-position: 0 -32px. Si no queréis este comportamiento, o sea, el botón no debe cambiar su aspecto, tenéis que impostar el valor buttonChange a ‘false‘.
Para alejar o acercar el botón de la casilla dónde se muestra el nombre del fichero, vamos a cambiar el valor de buttonMargin. No olviden que el valor borderRadius funcionará solo en aquellos navegadores que soportan el Css3. ¡A disfrutar!
Una manera para obtener un buen resultado es la de añadir más html entorno a estos elementos, así que con un poco de css es posible darle un toque moderno.
Por suerte el jQuery puede ayudarnos. Hice un pequeño plugin para estilizar el input del tipo file, podéis descargarlo en los enlaces a continuación:
jquery.uploadButton.zip
jquery.uploadButton.min.zip
La única dependencia por supuesto es el jQuery, ya que la imagen que utilicé para este plugin, la que sostituye el botón del elemento, está incrustada en el código javascript mismo.
Como utilizarlo:
<script type="text/javascript" src="jquery.uploadButton.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fichero').uploadButton({});
});
</script>
...
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" id="fichero" name="fichero" />
</form>Valores por defecto:
width: 200px
height: 22px
paddingHeight: 4px
paddingLeft: 4px
background: white
borderRadius: 5px
borderColor: #ddd
borderColorOver: blue
borderWidth: 2px
borderStyle: solid
buttonImage: imageSrc
buttonWidth: 32px
buttonHeight: 32px
buttonChange: true
buttonMargin: 4px
ej:$(‘#fichero’).uploadButton({
‘width’: ’265px’,
‘buttonImage’: ‘img/myImage.png’,
‘buttonWidth’: ’24px’,
‘buttonHeight’: ’24px’
});
Como podeís ver, es posible cambiar la imagen del botón, y también cambiar el tamaño de este, cambiando los valores buttonWidth y buttonHeight. Sin embargo el botón es doble, cambia aspecto después que se ha elegido un fichero cambiando el valor background-position al valor negativo de buttonHeight, es decir, en el caso que utilizamos los valores por defecto: background-position: 0 -32px. Si no queréis este comportamiento, o sea, el botón no debe cambiar su aspecto, tenéis que impostar el valor buttonChange a ‘false‘.
Para alejar o acercar el botón de la casilla dónde se muestra el nombre del fichero, vamos a cambiar el valor de buttonMargin. No olviden que el valor borderRadius funcionará solo en aquellos navegadores que soportan el Css3. ¡A disfrutar!