JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Efecto "Polaroid" y giros en fotografías con CSS

En mi anterior post contaba cómo podíamos utilizar efectos CSS3 para conseguir una mejora sustancial en el aspecto de fotografías (sobre todo de personas), convirtiéndolas en círculos y utilizando efectos auxiliares como bordes y sombras para darles un toque estético adicional. En esta ocasión voy a seguir en la misma línea y mostraré algunos efectos CSS3 adicionales que nos permitirán obtener un aspecto muy diferente: Efecto "Polaroid". Las cámaras de foto instantáneas de tipo "Land" (en honor a su inventor) se empezaron a producir a partir de 1948, pero fue en los años '70 y hasta mediados de los '80 cuando su popularidad alcanzó el máximo apogeo. Históricamente se han producido cientos de modelos diferentes, pero sin duda la empresa que las popularizó fue Polaroid, hasta tal punto que el nombre de esta marca se ha convertido en un genérico para denominar a este tipo de fotografía (como Kleenex para los pañuelos de papel). En la actualidad Polaroid todavía sigue... [Más]

Imágenes circulares solamente con CSS 3

Últimamente está muy de moda ofrecer imágenes mejoradas con algún efecto a la hora de presentarlas en las páginas Web. Por ejemplo, si visitas mi página de Google+ verás que mi foto aparece en forma de círculo, aunque en realidad es cuadrada: La verdad es que queda mucho mejor. Pero, si la foto que yo subí originalmente es cuadrada, esta con forma circular ¿se genera automáticamente a partir de la original? ¿Cómo se consigue ese efecto? La respuesta viene de la mano de CSS y el uso inteligente de los bordes. Bordes redondeados Vamos a partir de una fotografía cuadrada como la que muestra a continuación: Se trata de un paso elevado entre dos edificios en Bellevue (WA). Para conseguir que se visualice recortada en círculo, lo que tenemos que hacer es sacar partido a la propiedad border-radius de CSS 3. Esta propiedad nos permite definir la curvatura en pixeles u otras unidades que va a tener cada uno de los cuatro bordes de un elemento HTML. Así, por ejemplo, si queremos qu... [Más]

Comparativa cámaras Lumia 920 vs iPhone 4 y 5

El otro día os escribía sobre mi cambio desde un iPhone a un Lumia 920 y prometía hablar en especial sobre la cámara de fotos de estos móviles, ya que su calidad lo merecía. La verdad es que una de las cosas que más me han gustado siempre del iPhone es su cámara. Cuando salió el primero allá por 2007 este aspecto en concreto estaba a años luz de lo que ofrecían los demás móviles. A pesar de sus limitaciones si la compramos con las cámaras de móviles actuales, realmente ya entonces la podías emplear para sacar fotografías "útiles" para el blog, o incluso para tu álbum de fotos familiar. Nada que ver con lo que tenías en los otros dispositivos (excepto algunos Nokia altos de gama). Las siguientes encarnaciones del teléfono fueron mejorando este aspecto, y la del iPhone 4, por ejemplo, era ya una cámara para tomársela bastante en serio. De hecho algunos móviles de última generación, a no ser por el zoom, pueden sustituir con ventaja a muchas cámaras normales de las que te lleva... [Más]