Archivos para Diciembre, 2007

Centrar capa completamente en pantalla

Aqui un mini-tutorial para centrar tus capas completamente en tu pantalla y en todas las resoluciones y tamaños de ventana.

#capa{

position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;

}

Con esto creamos una capa de 200×200 píxeles.
Despues le decimos al navegador que queremos que esta capa se situe en top 50% y left 50%, osea el vortice superior izquierdo de la capa quedara anclado justamente en la mitad de pantalla.
Por ultimo como lo que queremos centrar es la capa en si no su esquina superior izquierda, le restamos al top y al left la mitad de la anchura y altura de la misma, asi el punto central de la capa sera el punto central de la pantalla.

Dejar un comentario

Efecto venas en la piel

Esta es la fotografía original que utilizaré:

Paso 1:

Abrimos la foto y seleccionamos el área donde van a ir las venas.

Paso 2:

Creamos una nueva capa

Y aplicamos un filtro: Filtro –> Render –> Cloud

Paso 3:

Aplicamos: Filtro –> Pixelate –> Crystallize
Y le damos entre 20 y 40

Resultado:

Paso 4:

Vamos a la galería de filtros…

Y escogemos acentuar bordes (accented edges) y le damos los valores de 1, 14, 8

Este será el resultado:

Paso 5:

Cambiamos el modo de normal a superponer (overlay) y ponemos una opacidad de 20%

Este es el resultado final:

Tip extraído de CristaLab

Dejar un comentario

Abrir pop-ups con javascript correctamente

Aunque parezca una tonteria, muchos usan un método erróneo para abrir un pop-up en sus paginas. Me explico:

<a href=”#” mce_href=”#” onClick=”window.open(‘/pagina.htm‘,’popup‘,’width=600,height=350‘)”>Abrir</a>

En este caso unicamente se crea el enlace para que salga el texto 'Abrir' en forma de enlace, con su color predefinido, la mano... etc. Pero la forma de abrir el pop-up es incorrecta puesto que:

  1. La gente que no tenga javascript activo no vera nada, simplemente daran al enlace y no ocurrirá nada.
  2. Los buscadores no saben encontrar el contenido de un enlace a #
  3. No sabemos a donde nos lleva esa paginaa  simple vista en la barra de estado.
  4. Si abrimos en ventana o pestaña nueva, veremos el contenido de la web donde estabamos ningun contenido nuevo.
  5. ...

Resumiendo, son demasiados inconvenientes en nuestra pagina para una cosa tan simple.

Para hacer usable 100% el codigo del pop-up seria correcto en esta forma:

<a href="/pagina.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=600,height=350'); return false;">Abrir</a>

Si nos funciona javascript, actuara el evento onclick, que recojera de esta etiqueta(this.) el elemento href, y lo abrira en un tamaño determinado. Si fallara al abrir, retornaria un falso el evento onClick y entonces la etiqueta <a> haria su función de toda la vida, cojeria pagina.html y lo abrira en una nueva ventana.

Que ganamos con ello?

  1. Los usuarios sin javascript ahora si podran acceder al contenido.
  2. Los buscadores si podran rastrear pagina.html pues si esta en la la etiqueta que toca.
  3. Podremos saber a donde nos lleva en la barra de estado.
  4. Al abrirlo en nueva ventana o pestaña nueva se abrira una ventana grande con el contenido deseado dentro.

No cuesta nada hacer las cosas sin problemas, verdad?

Comentarios (2)