MarcoGallen.com

HTML, CSS, JS, SEO y UX

Author: Gallen

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...

App móvil de artistas similares con JQuery Mobile y Phonegap

Continuando con nuestros post, les dejo un demo completo de la aplicación que hicimos con JQuery Mobile para buscar artistas similares.
Esta versión corre en cualquier dispositivo con Android usando Phonegap.

En un post próximo explicare como instalar Phonegap y portar nuestro código para poder usarlo en dispositivos móviles de forma nativa.

Puedes descargar la app completa aquí:

https://github.com/marcogallen/MusicaSimilarMovil

El cariño esta en compartir...

La regla más importante de la publicidad en tu sitio móvil

La regla más importante de la publicidad en sitios moviles

¿Porqué viene los usuarios a tu sitio?

¿Es para darle clic a un anuncio o por tu contenido?

Si respondiste por contenido puedes dejar de leer ahora, probablemente estés colocando bien tu publicidad en tu sitio móvil.

Si elegiste la primer opción, sigue leyendo y conocerlas la regla más importante de la publicidad en tu sitio móvil.

¿Estas listo?

Tu contenido es más importante que la publicidad o el like en redes sociales.

Si la gente no consume tu contenido, no le darán like, no lo tweetearan y no harán clic en tus banners.

¿Porqué este post?

He notado que en algunos sitios móviles usan mal su publicidad dandole un espacio primordial.  En muchos casos cuando uno ve un sitio en un dispositivo móvil que no esta planeado para eso la publicidad se encima en el contenido y no deja leerlo.(Si no me creen revisen la imagen al inicio de este post.) ¿Saben que hago en esos casos? Me voy a otro sitio, y creo que no soy el único.

Recuerda que es muy importante revisar tu sitio en diferentes plataformas, ver como se comporta a diferentes resoluciones, el mejor lugar para tu publicidad es donde no le estorbe a tu usuario.

Recuerda que el que no enseña no vende, pero también el que no ve, no compra.

El cariño esta en compartir...

© 2017 MarcoGallen.com

Theme by Anders NorenUp ↑