Cómo hacer imágenes redondas con CSS

Personalmente, me encantan los avatares redondos que aparecen en algunos sitios, como por ejemplo Google Plus, y con CSS es muy sencillo hacer que cualquier imagen aparezca como la que se puede ver en la cabecera.

En este post veremos cómo es posible hacerlo rápidamente mediante una clase CSS, que aplicaremos a todas las imágenes en las que queramos reproducir el efecto.

Sigue leyendo

Cómo alinear divs flotantes con borde

Uno de los quebraderos de cabeza más habituales a la hora de maquetar una página aparece cuando pretendemos aplicar un layout de dos o más columnas, cuyo ancho sea porcentual y la suma total sea 100%, como por ejemplo dos columnas con un ancho cada una del 50%.

Al visualizarlo se ve correctamente, pero si añadimos un borde se descuadra completamente, produciéndose un salto de línea debido a que los divs ocuparán el ancho asignado más los píxeles del borde (dos por cada div), como podemos ver en este ejemplo.

Leyendo la revista Net magazine he visto un truco muy sencillo para evitar este problema, mediante una línea de CSS:

Sigue leyendo

Tooltips con flecha o bocadillos y triángulos en CSS

Un efecto muy vistoso que podemos obtener al desplazarnos con el ratón sobre una página web son los tooltips o mensajitos informativos con una flecha que aparecen al situarnos sobre un elemento, como podemos ver en la imagen del post. En esta entrada (después del salto) voy a explicar cómo crear el efecto de triángulos CSS para representar a la flecha del tooltip.

Sigue leyendo