CSS / página 3 de 3

Aplicándole Estilo al Elemento Input Type=»file»

El elemento de tipo file -dentro del mundo CSS y XHTML «común»- es algo dificil de modificar en cuanto al estilo. Si le aplicásemos una clase, o un id vía CSS, no tomaría ninguna propiedad diferente.

Sin embargo, siempre se le puede encontrar una solución a estos problemas. En anieto2k han publicado un pequeño artículo que nos guía para poder darle estilo y diseño a un elemento del tipo file. Para ello se apoya en HTML, CSS, y algo de JavaScritp. A continuación les haré otra versión de su mini-guia:

XHTML:

<label class="cabinet">
<input type="file" class="file" />
</label>

Ahora definimos un poco de estilos:

.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;

display: block;
overflow: hidden;
cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

Ahora debemos -mediante JavaScritp- hacer que el puntero siempre haga click en nuesto nuevo botón:

<script type="text/javascript" src="/path/to/si.files.js"></script>
SI.Files.stylizeById('input-id');

¿Cómo funciona? El CSS nos agrega una linda imagen de fondo a nuestro label. Luego le damos una opacidad cero (0) al elemento file, lo cual está definido dentro del segundo bloque de CSS, haciéndolo invisible al ojo humano (pero no al navegador). Luego, el JavaScritp se encarga de que nuestro puntero accione siempre el elemento file.

Es compatible con: IE5.5+, Firefox 1.5+, Safari 2+.

Enlace: Demo, Descargar

Transparencia en Todos los Navegadores con CSS

Una de las propiedades mas potentes que tiene CSS es la de hacer capas transparentes -en diferente medida si se quiere-. Pero como siempre, al tener tantos navegadores se complica mucho para hacer una clase o id que sea transparente en TODOS los navegadores (si, hasta en Internet Explorer).

Éste método lo encontré en variablenotfound y consta de lo siguiente:

La clase:

.transparente
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

El XHTML:

<div class='transparente'>
CONTENIDO DEL DIV, PUEDEN IR FOTOS O LO QUE SEA
</div>

Cabe aclarar que el «opacity=50» puede ajustarse a nuestra necesidad, iterando el valor desde 0 hasta 100 (porque es en porcentaje).

YAML Builder: Crea Código XHTML y CSS Sin Conocimientos en la Materia

Leyendo en blogmundi me encuentro con YAML Builder, una potente herramienta que nos ayuda a maquetar todo un sitio sin necesidad de tener ni una pizca de conocimientos en CSS o XHTML.

Ingresando datos como cantidad de columnas, anchos de las mismas, entre otros; nos va mostrando el resultado que vamos obteniendo. Tiene una interfaz MUY amigable, y una usabilidad 100% efectiva.

Para obtener el código fuente de lo que creamos, simplemente hacemos clic en «Get Code», y obtendremos el XHTML, la hoja de estilos CSS y los hacks necesarios para el triste Internet Explorer. Como ven, esta herramienta no deja nada colgado, ya que el código que obtenemos esta totalmente validado por la W3C y funciona del mismo modo en todos los navegadores y sus versiones.

YAML Builder puede ser probada (demo) online, pero tambíen la podemos descargar (249KB) gratuitamente desde su sitio.

Tutoriales de Programación y «Maqueteo» en Español y de Calidad

Existen muchos lados donde conseguir tutoriales de varias ramas: PHP, CSS, Java, ASP, JavaScript, etc. Sin embargo, entre tandta variedad hay mucha «basura», tutoriales que no aportan mucho e incluso tienen datos falsos o erróneos.

En blogultura han hecho referencia a 6 tutoriales en español que nos ayudarán si lo que deseamos es aprender a maquetar y programar páginas web.

Tutoriales para maquetar: HTML, CSS.

HTML no es un lenguaje de programación (no tiene if, bucles, etc.). Estos son conceptos que suelen mezclarse erróneamente. Maquetar es darle forma a un sitio web, definir su estructura visual, en si, su diseño. Con HTML y CSS combinados podemos hacer maravillas, y no tendremos ningún tipo de límites para lo que deseamos plasmar en un sitio web. Ahora, si además de un buen diseño, queremos que nuestra página tenga dinamismo, vamos a tener que aprender a programar.

Tutoriales para programar: Javascript, ASP, Java y PHP.

No crean que debemos saber todos. Eligiendo por ejemplo PHP + JavaScript ya estamos en condiciones de llamarnos programadores web. ASP y Java son otras opciones que se nos presentan a la hora de programar en plataformas web, pero PHP es la más fácil de aprender y versatil. JavaScritp nos puede dar una mano con las validaciones, así como tambien por que no un toque en AJAX para sorprender a los usuarios.

Efecto Lightbox con CSS

El efecto Lightbox es utilizado hace un tiempo ya para mostrar imágenes en tamaño grande o bien para algunas pantallas de login de usuarios o fuciones similares. Un ejemplo de ésto es el login de Review Me, que lo pueden observar en la imágen que adjunto al artículo.

Para implementar este efecto se suele usar un scritp de JavaScritp. Al ser tan pesada la librería este scritp, muchos dejaron de lado el efecto Lightbox ya que lo creían muy lento. Recientemente se ha publicado (sigt también habló sobre esto) otro modo de implementar un Lightbox, que intenta no basarse tanto en JavaScritp y si en hojas de estilo CSS.

El archivo que usamos para definir los estilos de nuestra página, deberá contener:


.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}


.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

En el HTML, para mostrarlo:


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'"> Hacer clic</a>

Y para ocultarlo:


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'"> Ocultar</a>

Si quieren ver toda esta mezcla funcionando, lo pueden hacer desde aquí.

Existen muchos métodos para hacer este efecto. El comentado está interesante, tanto como éste que lo hace sin una gota de JS.