CSS3: Agregando sombras a las cajas

Antes había indicado como agregar sombra a nuestro texto, ahora veamos como agregar sombra a nuestros DIV o a cualquier elemento de nuestra página web, también funciona con elementos de esquinas redondeadas aunque allí el efecto pueda no quedar tan logrado como sería en Photoshop pero no esta nada mal.


En CSS3 se agrega la sombra con una sóla línea de código aunque esta varía según el navegador que estemos utilizando

Y quedaría algo como esto

Los dos primeros parámetros indican la distancia en cuanto X, Y respectivamente y el último valor nos da el color de la sombra.

CSS3 como crear un degrado de color

Otra interesante opcion que nos da CSS3 es de crear degradados de forma muy sencilla para ya no tener que recurrir a imágenes de fondo como usualmente se hace.


Veamos primero la forma más simple:

Este ejemplo crea un degradado que empieza arriba partiendo del color #65b6cf hasta terminar en #2c2c2c

Veamos algo un poco más complicado esta vez vamos a definir la longitud del degradado

También es posible usar varios colores en nuestro degradado

Existe otra opción muy parecida para crear degrados radiales

Todo eso funciona en firefox, para hacerlo funcionar en Webkit la forma es un poco distinta

CSS3 texto con sombra

Ya que cada día se ve vas cercano el uso masivo de CSS3 y HTML5 por lo que he visto por conveniente publicar algunos tutoriales al respecto, desde ya voy diciendo no me pregunten como se hace eso en Internet Explorer ya que o no existen hacks o hay que usar javascripts que hacen algo similar pero más lento o de menos calidad.


Es muy sencillo añadir sombra a un texto en los modernos navegadores (se sobreentiende que IE no es moderno) basta con una simple línea de codigo como esta:

Los 2 primeros valores me dan la distancia de la sombra respecto del texto en función de “X” “Y” respectivamente, el tercer valor indica el desenfoque de la sombra (blur) y finalmente el último valor es el color de la sombra.

El ejemplo quedaría así:

Este es un texto de prueba que sólo funciona en Safari 3, Opera 9.5, Firefox 3.1a, Konqueror y otros basados en Webkit

Como hacer un boton web flotante

Luego de las fiestas de año nuevo – feliz año nuevo a todos los lectores del blog – decidí escribir algo sobre algunas cosas que se van poniendo de moda como botones flotante, menus flotantes tipo facebook, algo más de ajax con jquery y cosas asi.

Veamos este boton se mantiene fijo en una parte de la pantalla aún mientras usamos el scroll de allí que sea muy útil para poner un botón RSS, algún banner con propaganda o tal vez una flecha para regresar al inicio, algunos los usan para menús, personalmente creo que para eso hay otra forma de maquetar o terminaremos teniendo un menu que se superponga al contenido.

La idea es muy simple aunque pueda dar problemas en IE6 (a ver si nos vamos olvidando de ese navegador) sin embargo hay hacks sencillos para el uso de position fixed en IE6.

Lo primero es colocar nuestra imágen (para este tutorial una de RSS) como si fuera un link, aunque no sólo podemos usar imágenes sino prácticamente cualquier cosa.

Y ahora para que aparezca fijo en pantalla usamos el siguiente estilo:

Y eso es todo, no hace falta javascript ni gigantescos códigos que visto rondando la web.

¿Cómo hacerlo funcionar en IE6?

No soy fan de los hacks porque o no funcionan o lo hacen a medias, IE6 no reconoce el position fixed es necesario darle una manito agregando las siguientes líneas de código al inicio de nuestra hoja de estilos.

OJO: Al usar este hack positon:absolute deja de funcionar en IE6 y sólo funciona en el standards-compliant mode, osea si tienes un bloqueador de ads o algo así es probable que no funcione. No quería dar este hack porque es un poco tonto dar un código con tantos peros.

DEMO

CSS Estilos para nuestras tablas parte 2

Anteriormente postee sobre como aplicar estilos a las tablas, voy a dar algunos tips adicionales, por ejemplo si tenemos una tabla que muestra docenas de resultados y al final un boton editar, borrar u otro es un poco dificil que el usuario acierte con la fila correcta igualmente si tenemos por ejemplo una tabla de notas con nombres de alumnos y promedios resulta un poco complicado ver cual es cual, pero esto tiene una solución simple con la pseudo clase hover, algo asi:

Con ese pequeño extra hacemos que cada vez que pase el mouse por una fila esta cambie de color de fondo para resaltarla, se le puede agregar más variantes por ejemplo que además cambie el color de letra, todo es cosa de jugar con el CSS.

Encontré una página con un montón de ejemplos de tablas y estilos, basta darle click al nombre del estilo y este cambiará y podemos descargalos fácilmente AQUI