elWebmaster.com

Hay muchos efectos que podemos aplicar por medio de CSS a las imágenes de nuestro sitio, pero la mayoría no son compatibles con todos los navegadores. Sin embargo, a veces lo mejor suele ser lo más sencillo, y por medio de CSS liso y llano podemos lograr un buen diseño que sea multiplataforma.

Por ejemplo, podemos agregar un borde de un color a una imagen, ponerle otro color de fondo y por medio del padding generaremos el efecto de “borde doble”. Luego, para una mejor experiencia de usuario, podemos usar este efecto sólo en hover, de manera que al pasar el mouse por encima se resalte la imagen. Seguir leyendo

A la hora de trabajar con CSS uno de los temas más importantes y que pueden llegar a resultar más engorrosos es la conversión de los puntos a pixeles y de ems a porcentajes.
Es por eso que hoy les traigo esta utilidad que les puede llegar a resultar muy práctica cuando estén desarrollando ésta tarea.

Approximate Conversion from Points to Pixels and Ems and % es una tabla que nos brinda las equivalencias entre las unidades más utilizadas a la hora de la maquetación con CSS (puntos, pixeles, ems y %) y que, sin duda, conviene tener a mano a la hora de programar.
Como bien lo dice el nombre, la tabla es sólo una aproximación ya que los parámetros dependen del tipo de letra, del navegador y del sistema operativo que se usa.
Fuente: Nordic Design Blog.

Al realizar un sitio web puede llegar a pasar que nos encontremos ante la necesidad de hacer que una imagen de fondo se convierta en un link, esto puede ocurrir cuando el logo esta siendo usado como fondo en la cabecera del sitio y queremos que, como cualquier sitio bueno, el mismo actúe de link a la página de inicio.

Con el siguiente truco CSS que les traigo, les resultará extremadamente sencillo convertir una imagen que esté cumpliendo el rol de papel tapiz en nuestro sitio en una en la que se pueda realizar clic hacia un link. Seguir leyendo

Desde la web Xybernéticos nos traen una aplicación muy interesante que nos da la posibilidad de otorgarle diferentes formatos a los párrafos de nuestro sitio web.

Typechart nos permite comparar a tiempo real cómo se ve determinada tipografía tanto en Windows como en Mac OS X y una vez que estemos a gusto con el formato de esta podremos extraer su código CSS.
Seguir leyendo

A la hora de maquetar un sitio vía CSS uno muchas veces se encuentra con un problema que pareciera muy simple de resolver pero no lo es tanto.
Imaginen por un momento que su sitio posee varios bloques div a modo de columnas, con su contenido dentro. Si no indicamos la altura de estas columnas nos encontraremos obviamente con que el bloque adaptará su tamaño según el contenido que tenga dentro.

Ahora la dificultad es qué hacer si deseamos que extienda su altura a lo largo de toda la página y que, por lo tanto, todas las columnas tengan el mismo tamaño. Seguir leyendo

CSS3 viene lento, pero pisa fuerte gracias a muchos de los adelantos que han presentado los principales navegadores últimamente. Dentro y fuera de los browsers han surgido varias herramientas que nos permiten generar, testear y editar CSS de manera avanzada.

Mucho se dice sobre CSS3, pero lo más importante es qué hay de nuevo, qué limitaciones tenemos y qué cosas se facilitan. ¿Usas CSS? Chequea este listado de herramientas, descargas y tips para llevar CSS a otro nivel. Seguir leyendo

Es innegable la importancia que tienen hoy en día los sitemaps o “mapas del sitio” en las páginas webs.
Estos, además de asegurarse que todas nuestras páginas estén vinculadas e indexadas correctamente, nos ayudan a proveer a los usuarios de una previsualización de la estructura de nuestra web.

Pero… ¿Qué pasa cuándo tenemos un mapa del sitio muy grande? Para este problema la solución podría llegar a ser CSSG Sitemap Styler, este script nos permite mantener el mapa completo sin sobrecargar la página. Seguir leyendo

Maquetar con CSS es algo fundamental hoy en día, pero muchas veces resulta un reto a la hora de programar cómo estructurar el código de forma correcta y ordenada de manera tal que podamos encontrar lo que buscamos con tan sólo darle un vistazo al mismo.

CSS frame es una herramienta gratuita que nos brinda la estructura CSS inicial que tenemos que usar para realizar estilos en nuestro HTML.
Si bien no vamos a necesitar utilizar todos los estilos, es una forma de obtener una estructura base, rápida y simple. Seguir leyendo

Diseñar los emails de nuestro sitio o empresa puede llegar a ser muy molesto, sin probar demasiado nos encontraremos con que es bastante más complicado que diseñar una página ya que no solo habrá que preocuparse por los distintos navegadores, si no que según donde se reciba un email algunas reglas CSS podrán interpretarse bien o no.

Campaign Monitor nos trae un listado con los principales clientes de email y webmail y cómo estos interpretan distintas palabras claves de CSS. Esto incluye tanto aplicaciones de escritorio Outlook y Thunderbird, como también algunas online como ser Yahoo o Gmail.
Seguir leyendo

CSSVista es una nueva herramienta que les resultará muy útil a los desarrolladores web, ya que sirve para editar CSS en tiempo real con los navegadores Internet Explorer y Mozilla Firefox simultáneamente.

Esta aplicación para Windows nos facilita el trabajo de ver cómo va quedando nuestro diseño en los dos navegadores y nos permite elegir a su vez si deseamos realizar la pre-visualización del sitio en pestañas o de forma paralela, es decir, Split.
Si bien CSSVista es una aplicación gratuita el ofrece la posibilidad de descargar el software SiteVista que sí es pago y nos da la posibilidad de ver si nuestra página funciona correctamente en los navegadores más populares.
Fuente:Helektron