MarcoGallen.com

HTML, CSS, JS, SEO y UX

Category: CSS

Imágenes circulares con CSS sin usar Photoshop

Gatito

En este ejemplo les voy a mostrar como pueden hacer una imagen circular sin usar Photoshop o ninguna programa de edición de imágenes.

La imagen en este caso tiene que ser un cuadrado perfecto para simplificar el calculo del borde.

Primero el código de la imagen:

 

Gatito

Y el CSS es muy sencillo:

Y al final tenemos nuestra imagen redondeada:

Gatito

Las imágenes con bordes siempre se me han parecido más atractivas y que atraen más la imagen del usuario. Si esas imágenes ademas son circulares dan una sensación mayor de dinamismo.

¿Usaste este ejemplo en tu sitio?

Déjanos la liga en los comentarios

¿Quieres todas las noticias y actualizaciones en tu correo? Inscríbete a nuestros newsletter

El cariño esta en compartir...

Efecto de imagen en color a blanco y negro con CSS

Un efecto muy util es tener una imagen en blanco y negro que cuando pones el mouse encima se convierta en color.

Hoy vamos a hacerlo con puro CSS sin utilizar Javascript.

Primero nuestra imagen:

Blanco y negro a color con solo CSS

Para convertirla en B/N usamos Filter. Debido a que no todos los navegadores lo soportan tenemos que usar prefijos de navegadores:

Para poder hacer el efecto en hover agregamos la transición en el CSS:
Y luego el hover en la misma clase con el filtro (filter) en 0:
Así es como queda al final el efecto:

Blanco y negro a color con solo CSS

Con solamente 6 lineas de código podemos lograr cosas sorprendentes.

Si te gustó este artículo suscríbete a nuestro newsletter en la barra lateral o déjanos un comentario.

El cariño esta en compartir...

Tablas tipo cebra con 1 linea de CSS

En este post te voy a mostrar como crear una tabla tipo cebra con una sola linea de código CSS. Sin Javascript o librerías.

Todo en una sola linea de CSS:

Aquí el ejemplo:

 

*Nota: Agregue otros estilos para que la tabla se viera mejor pero el código que pinta la tabla como cebra es el del ejemplo.

Propiedad IExplorer Fire Fox Chrome Safari
border-radius Si Si Si Si
border-radius Si Si Si Si
break-after Si No No No
transition Si Si Si Si
El cariño esta en compartir...

2 pasos para animar con CSS3

Si así de fácil es hacer transiciones con CSS3 sin usar Javascript.

El paso número 1 es definir la propiedad a la que queremos añadirle el efecto.
Lo segundo es definir el tiempo para el efecto (cuanto debe tardar).

Es muy simple. Aquí un ejemplo.

Tenemos un div con la class ejemplo-div que tiene el texto MarcoGalen.com
<div class=ejemplo-div>MarcoGallen.com</div>

Agregamos algunos estilos para que el div se vea bien:

El div se ve así:

MarcoGallen.com

Ahora agregamos la transición: lo que queremos afectar y cuanto tiempo queremos que tarde. En este caso sera la escala (lo haremos mas grande). Ese tipo es una “transformación” del objeto.

Ahora tenemos que incluir algo que active la transición, en este caso sera cuando el mouse pase encima del objeto así que lo haremos sobre el “hover” del div.

Ahora cuando el mouse este sobre el div este crecerá, sin necesidad de usar Javascript y cuando el mouse salga regresara a su tamaño normal.

MarcoGallen.com

Con esta simple técnica podemos cambiar cualquier propiedad. Desde el tamaño hasta el color de fondo o el color de la letra.

Por desgracia no todos los navegadores soportan las transiciones. Los actualmente soportados son:

  • Chrome: 26+
  • IExplorer: 10+
  • Mozilla: 16+
  • Safari: 6.1+

Si te gustó este artículo y quieres recibir noticias y piezas de código que puedes usar directo en tu sitio inscríbete a nuestro boletín.




¿Conocías esta técnica? ¿Qué vas a construir con ella? Cuéntanos en los comentarios.

El cariño esta en compartir...

© 2017 MarcoGallen.com

Theme by Anders NorenUp ↑