Sobre resúmenes e imágenes desproporcionadas

Son muchos los que utilizan alguna clase de plantilla o tiene un sitio donde las entradas del home se muestran resumidas, adornadas con una imagen. También son muchos los que preguntan ¿cómo puedo hacer para que esas imágenes no se deformen?

La respuesta a eso es sencilla y no le gusta a nadie: no se puede.

No se puede porque si usamos etiquetas IMG y las re-dimensionamos, cosa que podemos hacer con width y height tanto en el CSS como con atributos en la misma etiqueta, la imagen se mostrará con esa dimensión; como una es más alta que ancha, el pobre patito "engordará".

¿Qué pasa en los resúmenes? Imaginemos algo así:

<div class="demoresumen">
  <div>
    <img src="una_imagen"/>
    <p> ... un texto ... </p>
  </div>
  <!-- etc etc etc -->
  <div>
    <img src="una_imagen"/>
    <p> ... un texto ... </p>
  </div>
</div>

Con este estilo:

<style>
.demoresumen {margin: 0 auto; overflow: hidden; width: 480px;}
.demoresumen div {border: 1px solid #444; float: left; height: 240px; margin: 5px; width: 225px;}
.demoresumen p {font-size: 11px; margin: 0; padding: 10px;}
.demoresumen img {display: block; height: 160px; margin: 10px auto 0; width: 200px;}
</style>

Veríamos algo así:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Para que una imagen se re-dimensione sin perder sus proporciones debemos establecer una y solo una de las dimensiones, dejando que la otra sea calculada por el navegador; en este caso, basta con eliminar height o colocar height: auto; pero, obviamente, con este método, toda la estructura se desquicia ya que habrá rectángulos mas altos que otros y si estamos dimensionando la altura del contenedor y usando overflow:hidden, se cortará.

height: auto | overflow:hidden | restaurar

¿Podemos hacer que la imagen del pato se muestre sin deformarse? Si pero no. Una forma de hacerlo es colocarla dentro de un contenedor, dimesionarlo y usar overflow; es decir, "cortar" lo que sobre; en lugar de:

<img src="una_imagen"/>

pondríamos algo así:

<span><img src="una_imagen"/></span>

y cambiaríamos las reglas de estilo:

.demoresumen span {display: block;height: 160px;margin: 10px auto 0;overflow: hidden;width: 200px;}
.demoresumen img {width: 200px;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Tampoco resuelve demasiado.

Si estamos buscando opciones sencillas, lo ideal es que las imágenes que vamos a utilizar mantengan siempre una proporción adecuada y listo; ese tipo de plantilla ha sido pensada para eso; caso contrario, deberíamos olvidarnos de lo que tenemos y pasar a alguna estructura de mosaico usando CSS3 lo que impedirá que se muestre correctamente en ciertos navegadores o agregando algún script que maneje ese tipo de solución.

Una alternativa intermedia es usar un poco de CSS que no resolverá el problema pero mitigará los efectos. Para esto, debemos olvidarnos de la etiqueta IMG y colocar la imagen como fondo. Otra vez, en lugar de:

<img src="una_imagen"/>

pondríamos algo así:

<span style="background-image:url(una_imagen)"></span>

Y es esa etiqueta con la imagen de fondo la que podemos manipular un poco mediante las propiedades background; por ejemplo:

.demoresumen span {
  display: block;
  height: 160px;
  margin: 10px auto 0;
  width: 200px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

La imagen se cortará pero, podemos establecer donde; en el ejemplo, eso se hace con background-position y los valores 50% 50% indican que se coloque en el medio pero puede ser cualquier otro valor.

La otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:

background-size: contain | background-size: cover | background-size: auto

En resumen, no hay soluciones perfectas y por eso comencé diciendo que la respuesta a la pregunta es no, no se puede porque es imposible mantener las proporciones de una imagen si lo que estamos haciendo es cambiando esas proporciones. El problema, termina siendo una contradicción en si misma.

Chalkwork HTML

Contiene cientos de íconos en diferentes formatos. descargar

MAS: Chalkwork CONTROLS

Esta es una forma muy particular de utilizar fondos múltiples para crear efectos hover; algo que se le ocurrió a designshack.net donde la técnica está explicada en detalle.

Lo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades background) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:

#ejemplo {
  background-image: url(imagen_1), url(imagen_2);
  background-position: left 50%, right 50%;
  background-repeat: no-repeat;
  background-color: red;
}

la primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo "sobrante" será de color rojo.

Entendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con background-position, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo) y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).

#ejemplo {
  display: inline-block;
  height: 200px;
  width: 200px;
  transition: all 1s; /* con prefijos para los distintos navegadores */
  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);
  background-repeat: no-repeat;
  /* background-position: ???????; */
}

Para que esto funcione, un poco de aritmética. Si queremos que se "abra" horizontalmente:

background-position: -100px 0px, 100px 0px, 0 0;

y si queremos que se "abra" verticalmente:

background-position: 0 -100px, 0 100px, 0 0;

Y la regla del hover sería:

#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}

o bien:

#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}

Del mismo modo, agregando más fondos, se obtienen distintos efectos:

<style>
.hoverDot {
  display: inline-block;
  height: 200px;
  margin: 10px;
  width: 200px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#slidingDoors {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px 0px, 100px 0px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoors:hover {
  background-position: -200px 0px, 200px 0px, 0 0;
}

#slidingDoorsVert {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: 0 -100px, 0 100px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoorsVert:hover {
  background-position: 0 -200px, 0 200px, 0 0;
}

#breakApart {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
}
#breakApart:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
}

#twistAndShout {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}
#twistAndShout:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
  transform: rotate(0deg);
}
</style>

<div class="hoverDot" id="slidingDoors"></div>
<div class="hoverDot" id="slidingDoorsVert"></div>
<div class="hoverDot" id="breakApart"></div>
<div class="hoverDot" id="twistAndShout"></div>

Estos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.

En principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow

Además, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:

-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));

se transformaría en esto:

-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);

El HTML es genérico, se scribe siempre igual:

<a class="button white" href="#">ejemplo</a>

ejemploejemploejemploejemploejemploejemploejemploejemploejemploejemplo

Este es el CSS de uno de los botones:

.button { /* clase general */
  border: 1px solid #dedede;
  border-radius: 3px;
  color: #555;
  display: inline-block;
  font: bold 12px/12px HelveticaNeue, Arial;
  padding: 8px 11px;
  text-decoration: none;
}

.button.white{
  background: #f5f5f5;
  border-color: #dedede #d8d8d8 #d3d3d3;
  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
  color: #555;
  text-shadow: 0 1px 0 #fff;
  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: linear-gradient(top,  #f9f9f9, #f0f0f0);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
}

.button.white:hover{
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    text-shadow: 0 1px 0 #fdfdfd;
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);
    background: -o-linear-gradient(top,  #efefef, #f8f8f8);
    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);
    background: linear-gradient(top,  #efefef, #f8f8f8);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
}

Sí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.

REFERENCIAS:lab.tommasoraspo.com

Snaggy es un servicio web que puede ser usado para guardar y editar imágenes de modo simple copiando tanto desde una página como desde nuestra PC. Para eso, basta usar el atajo del teclado normal Ctrl+V dentro del área que nos muestra el sitio.

Aunque a veces funciona de modo errático, es bastante cómodo. Podemos usar cualquier imagen copiada en el portapapeles, sea esta un PrintScreen clásico, una selección realizada en nuestro editor de imágenes o una imagen completa.

Una vez procesada, nos mostrará el resultado y la dirección URL que podemos compartir en redes sociales y si queremos, también podemos editarla ahí mismo con algunas herramientas sencillas para recortarla, agregarle textos y otros detalles gráficos.

No tiene misterios, basta ir y probar porque no requiere registro de ninguna clase

REFERENCIAS:wwwhatsnew.com

A partir de la versión 16 de Firefox, ya resulta innecesario agregar prefijos en la mayoría de las propiedades de CSS3 que se utilicen en este navegador con lo cual, poco a poco, nos vamos acercando a la estandarización mínima que requiere el diseño web: hablar el mismo idioma.

Así el -moz- puede desaparecer de las propiedades animation, transition, transform y de las gradientes:

• animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes
• transition, transition-property, transition-delay, transition-duration, transition-timing-function
• CSS3 Transforms transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin
• CSS3 Image Values linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()

Es de esperar que la gente de Chrome haga lo mismo rápidamente y aliviarnos la tarea de estar tecleando y tecleando.

REFERENCIAS:hacks.mozilla.org

Esta es una traducción aproximada de un artículo publicado en The Real Blogger Status que me llamó la atención:

Blogger no censurará comentarios o aceptará reportes sobre comentarios abusivos

En los Foros de Ayuda de Blogger, muchas veces se pregunta ¿Por qué Blogger no me da la opción de bloquear a un comentarista abusivo?

Esta es una petición que simplemente no se pueden cumplir ya que:

• es técnicamente imposible
• es contrario a la política de Blogger

Porque cualquier persona puede crear varias cuentas de Google sin esfuerzo y Blogger no van a perder tiempo en desarrollar funciones de bloqueo que sólo darían una falsa sensación de seguridad ya que no tendría efectos a largo plazo.

Si usted realmente siente que un comentarista representa una amenaza legal o física, debe reportar la amenaza a las autoridades locales. Si se trata de otro tipo de "molestia", Blogger considera que es "libertad de expresión" y por lo tanto, la publicación de ese tipo de comentarios es de quien los hace y quien los permite ya que el administrador de un blog, usted puede elegir qué comentarios publicar y qué comentarios rechazar para lo cual existe la opción de moderarlos.

Si cualquier comentario lo ofende, modérelos o elimínelos lo antes posible. Concéntrese en la publicación de su blog y pase por alto estos abusos. Con el tiempo, la persona abusiva se aburrirá y seguirá adelante.

A simple vista, la explicación parece razonable pero mezcla verdades, mentiras y excusas.

En primer lugar, es cierto que la responsabilidad de lo publicado es nuestra; tanto si somos administradores de un blog como si somos comentaristas pero, es completamente falso que Blogger no pueda implementar técnicamente este tipo de función, que sea una opción inútil o que sea algo contrario a sus políticas. Por favor, no traten de enarbolar banderas para justificar lo injustificable.

De hecho, Blogger TIENE varias opciones de denuncia. En la navbar (Informar sobre mal uso), en los comentarios (marcar como spam); cada tanto, aparecen direcciones para reclamar por violaciones al copyright.

Muchos otros servicios de Google tienen opciones de bloqueo o filtros diversos, GMail, YouTube ... casi cualquier sistema de redes sociales posee lo mismo (y un blog es una red social). Es algo casi elemental.

Todas esas herramientas nada tienen que ver con la censura ni limitan la libertad de expresión de nadie porque libertad de expresión es defender dos derechos: el de cualquiera a decir lo que se le de la gana y el mio a decidir si quiero o no quiero escucharlo; si no se defienden ambos derechos no hablamos de libertad de expresión.

A veces, parecería que cuando se trata de la web, el concepto de la libertad está un poco tergiversado. Una cosa es que yo acepte, admita o defienda la libertad de cualquiera, de hacer de su propio espacio el sitio que quiera y otra cosa es que yo permita que aquello que no me gusta, se traslade al mio. Ese concepto es tan elemental como eso de que cada hogar es un mundo ... pero el mio es mio.

Poner límites no significa coartar la libertad de nadie porque no creo que nadie pueda ser feliz haciendo infelices a otros a menos que sea alguna especie de psicótico. Respetar y ser respetado, las reglas son muy sencillas.

Cuando me dejo de sentir cómodo en cierto lugar porque no me gustan sus reglas, lo que debo hacer es irme silbando bajito y a otra cosa. Lo mismo pasa si lo que veo no es de mi agrado o si no cubre mis expectativas ¿Qué voy a hacer? ¿Decirle al otro que eso no me gusta? ¿A quién le puede importar? ¿Qué aporto? ¿Qué cambiará? ¿Acaso debo ser el juez de todo? ¿Acaso los otros deben darme explicaciones? Sería mejor utilizar el viejo criterio y callarse a menos que se tenga algo bueno que decir. Ser sincero no es decir siempre lo que uno piensa, sobre todo, cuando nadie nos ha preguntado nuestra opinión.

La máscara que nos provee la web es un arma de doble filo. Por un lado, nos permite re-inventarnos a nosotros mismos y despojarnos de timideces, traumas y miedos. Por el otro, parece habilitar a que algunos saquen lo peor de si.

La máscara provoca embriaguez, aguza los sentidos, destraba la lengua (o los dedos) pero nos enfrenta al riesgo de sentirnos omnipotentes, de hacernos creer que nuestra voz debe ser escuchada a como de lugar.

Estos son algunos plugins que requieren jQuery para funcionar y que me han parecido interesantes para ir probando aunque se trata de cosas demasiado específicas como para intentar mostrar ejemplos concretos para cada uno de ellos así que ... a arremangarse e intentarlo.

Tinycon

No sé que utilidad puede tener aplicado a Blogger pero este plugin cambia el favicon agregándole una burbuja con algún tipo de dato variable.

jQuery Corner

Es un plugin que permite generar decenas de bordes distintos, simples o complejos ya predefinidos y, obviamente no funcionará en los navegadores que no admitan CSS3.

jPages

Un plugin muy completo que sirve para generar contenido paginado, algo que normalmente está reservado para lenguajes que se ejecutan del lado del servidor.

MediaElement.js

Complejo sistema que permite crear reproductores de audio y video utilizando sólo HTML y CSS e incluye soporte para Flash y Silverlight por lo que funciona incluso en navegadores que no soportan HTML5.

jCarousel

Un plugin para controlar el orden de cualquier lista que pueden ser estáticas o bien ser cargadas usando AJAX.

fitvidsjs

Un plugin muy liviano que permite transformar los videos incrustados en objetos fluidos que se adapten a cualquier contenedor.

infinity

Genera código que ayuda a controlar la forma en que se ven listas muy largas, usando animaciones suaves.

rotate3Di

Plugin para crear efectos 3D con rotaciones y animaciones

imagesLoaded

Una forma sencilla de determinar si una o varias imágenes se han cargado y actuar en consecuencia.

tooltipster

Un sistema completo para generar tooltips en cualquier tipo de etiqueta que incluso, funciona en viejas versiones de Internet Explorer.

Hay quien aún se preocupa porque su sitio se vea en ciertos navegadores como Internet Explorer 6 por ejemplo, cosa que, a esta altura del siglo 21, carece de todo sentido práctico. Incluso, hay quienes se preocupan por IE7 que parecería más moderno pero en realidad, sólo fue una prueba fallida que trajo más problemas que soluciones.

Claro que, cada cuál puede hacer lo que quiera pero, si se usa Blogger, hay que saber que ninguno de esos navegadores es soportado por el sistema mismo y, si bien por ahora podemos acceder al servicio sin restricciones usando cualquier tipo de navegador, Blogger nos advierte que no se responsabiliza por los resultados y, cualquier cosa es posible.

En su página de ayuda Blogger and browser compatibility no da la lista de los navegadores soportados:

Y en el caso de IE8 y 9, nos advierte que debemos deshabilitar la opción de compatibilidad

Todo muy lindo, todo muy razonable pero si todo es así ¿por qué demonios Blogger sigue agregando automáticamente esta etiqueta en las platillas?

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Ya que, lo que hace eso es justamente lo contrario, indicarle a IE que debe usar el modo compatibilidad, es decir, si estamos usando IE8 o IE9 el blog se mostrará como si usáramos IE7. Moraleja, a la ridiculez de Microsoft se le suma la de Google así que, ya sabemos en manos de quien estamos XD

Lo primero que debe hacerse en una plantilla de Blogger es sobrescribir esa etiqueta y abandonar de una buena vez esta locura de pretender compatibilidad absoluta con todo navegador y todo dispositivo a costa de nosotros, los usuarios, que debemos hacer malabares para resolver los problemas que ellos generan así que hay que agregar lo siguiente inmediatamente después de <head>

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Nosotros, sólo debemos entender que un blog con cierto diseño, no se verá igual en un móvil con una pantallita de 320 pixeles de ancho que en un monitor widescreen salvo que pensemos ese diseño con anterioridad y adaptemos las cosas para que ello ocurra. Los límites existen siempre, basta saber cuáles son para usarlos a nuestro favor o ... hacer cualquier cosa menos ignorarlos.

Según me contaba Roudy Capella, Pinterest ahora permite verificar el sitio web que hayamos agregado en nuestro perfil. Esa opción se realiza mediante un archivo que uno debe alojar en su sitio pero, claro, quienes usan Blogger, aparentemente no pueden hacerlo ya que no hay manera de subir un archivo a un servidor que no existe.

Ellos dicen que por el momento, servicios de blogs quedan excluidos excepto Tumblr y prometen ir agregando otras opciones

Sin embargo, en la misma ayuda, se encuentran enlaces a métodos alternativos para WordPress e incluso para Blogger mismo así que es cosa de probar y ver.

El procedimiento parece algo raro pero funciona así que trataré de mostrarlo paso a paso tal como lo hice por si alguien no entiende inglés que es el idioma original de la ayuda.

Lo primero que debemos hacer es entrar en nuestra cuenta de Pinterest y allí, ir a Configuracióndonde veremos la dirección de nuestro sitio (si lo hemos agregado) y un botón Verificar sitio web:

Hacemos click en el botón y aparecerá una ventana de advertencia donde nos dice que no podremos verificar un dominio de blogspot pero, lo ignoramos y ... click here:

Descargamos el archivo que nos den que tendra como nombre pinterest-xxxxx.html y que será personal por lo que incluirá números y letras diversas:

Y dejamos esa página abierta.

Ahora, nos vamos a Blogger y creamos una página estática nueva a la que le damos cualquier nombre. Abrimos el archivo previamente descargado con cualquier editor como el block de notas, copiamos su contenido y lo pegamos en nuestra nueva página, verificando que estemos en el modo HTML. Luego, publicamos la página y tomamos nota de su dirección url que será algo así:

http://nombre.blogspot.com/p/titulo-de-la-pagina.html

Vamos a la Configuración de Blogger y en el apartado Preferencias de búsqueda, elegimos Redireccionamiento personalizado, Editar.

En el item De: colocaremos la dirección url tal como la esperaría Pinterest que es el nombre del archivo descargado:

/pinterest-xxxxx.html

y en el item Para: colocaremos la dirección url de la página que hayamos creado:

/p/titulo-de-la-pagina.html

y marcamos Permanente, sin olvidar que las direcciones son relativas y comienzan con una barra:

Ya terminamos, podemos volver a la página de Pinterest y decirle que todo esta listo Haz click aquí para completar el proceso; si hicimos las cosas bien, nos dirá que el sitio fue verificado:

Y podremos ver ese dato en nuestro Perfil:

prefix-free es un script que habría que tener muy en cuenta ya que nos ayuda a resolver uno de los problemas más molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automático, los prefijos correspondientes para cada navegador de tal modo que no sería necesarios escribir algo así:

.una-regla {
  background-image: -moz-linear-gradient(#000,#FFF);
  background-image: -webkit-linear-gradient(#000,#FFF);
  background-image: -o-linear-gradient(#000,#FFF);
  background-image: -ms-linear-gradient(#000,#FFF);
  background-image: linear-gradient(#000,#FFF);
}

y todo ese exceso de líneas (que, inevitablemente uno termina equivocando u olvidando) se transformaría en es esto:

.una-regla {
  background-image: linear-gradient(#000,#FFF);
}

es decir, sólo deebría usarse la propiedad especificada por la w3.org y del resto, se encargará el script.

¿En que navegadores funcionará? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes.

¿Funciona en Blogger? Si, no debería haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta.

¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) y lo alojamos en un servidor:

<script src='URL/prefixfree.min.js' type='text/javascript'/>

o simplemente lo copiamos y pegamos en la plantilla entre etiquetas

<script type='text/javascript'>
//<![CDATA[
  ....... acá pegamos el contenido del archvo js .......
//]]>
</script>

y, en ambos casos, conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head>

Tres ejemplo rápidos:

/* un fondo con gradiente */
#pf1{background-image:linear-gradient(#000,#FFF);}

/* una transición */
#pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;}
#pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;}

/* una animación*/
#pf3{background-color:#000;animation: recrojo 1s infinite alternate;}
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}