Coloreando imágenes

"Entintar" una imagen, tiñéndola con un color es una idea de Impressive Webs y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.

Opacidad, sombras, contraste, brillo. Muchos de esos efectos que podemos aplicar a las imágenes en cualquier software, también son propiedades que el CSS3 nos permite usar con cualquier elemento HTML de modo muy sencillo y en cualquier navegador de escritorio o dispositivo móvil.

leer artículo actualizado

El reciente anuncio de Google respecto a la eliminación de varios de sus servicios como Google Wave, Knol, Google Gears y otros, se suma a todos los que vienen dando de baja a lo largo del año. Si uno mira la lista, son muchos: Code Search, Google Buzz, Jaiku, Aardvark, Desktop, Google Pack, Google Web Security, Sidewiki; las listas se acumulan y hay de todo, productos conocidos y otros de los que seguramente nunca oímos hablar (más información 1 | 2 | 3)

Si esto sólo es el resultado de la indigestión del gigante que pretendió abarcar más de lo que podía o no, poco importa. Lo cierto es que entre los servicios que se eliminarán está Google Friend Connect y esto ha causado alguna preocupación entre los usuarios de Blogger ya que este sistema está integrado con el que se usa para los llamados Seguidores.

Friend Connect tiene previsto cerrar sus puerta en marzo del año 2012 pero, eso sólo será aplicado a todos los sitios excepto Blogger por lo tanto, estos blogs podrán seguir utilizando el gadget de Seguidores sin inconvenientes aunque ellos sugieren (obviamente), cambiar el perfil por el de Google+ y relacionar los blogs con su nueva red social, crear una page en Google+ y agregar el badge correspondiente.

En principio, que se elimine Google Friend Connect del gadget de Seguidores, debería aliviar sustancialmente la carga de este ya que es "pesado" y proclive a tener errores constantes. Se supone que si ellos eliminan toda esa parte, el código deberá ser más simple y por lo tanto, más estable ... en teoría, claro.

Así como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.

Si nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:

.gradiente-lineal {
  background: -moz-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
}

.gradiente-radial {
  background: -moz-radial-gradient(#FFF, #000);
  background: -webkit-radial-gradient(#FFF, #000);
  background: -o-radial-gradient(#FFF, #000);
  background: -ms-radial-gradient(#FFF, #000);
}

Aunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.

Si queremos personalizarlas aún más, la sintaxis tampoco varía:

radial-gradient( posición, color-inicial, color-final )

donde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):

radial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);
radial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);
radial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);
radial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);

Claro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:

radial-gradient( posicion, shape size, color-inicial, color-final )

shape es "la forma" que adoptará y puede ser circle o ellipse
size indica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)

radial-gradient(circle closest-side, #FFF, #000)

y todo puede combinarse:

radial-gradient(left top,circle closest-side, #FFF, #000)

Al igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:

radial-gradient(#FFF, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #0F0, #000)

Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.

leer artículo actualizado

Crear gradientes con CSS es uno de los métodos más sencillos para generar fondos que pueden ser aplicados a casi cualquier etiqueta HTML y si bien es algo que no está implementado en las versiones viejas de Internet Explorer, llegado el caso, podemos simularlas mediante filtros o ignorar ese navegador y establecer reglas de estilo diferenciadas.

Por ahora, los navegadores que aceptan esta propiedad, requieren que se utilicen prefijos distintos para cada uno de ellos así que deberemos usarlos todos para lograr el máximo de compatibilidad:

-moz-linear-gradient( parámetros ) /* en Firefox */
-webkit-linear-gradient( parámetros ); /* en Chrome/Safari */
-o-linear-gradient( parámetros ); /* en Opera 11 o superior */
-ms-linear-gradient( parámetros ); /* en Internet Explorer 10 */

Lo básico es entender que una gradiente no es otra cosa que un degradado de colores que se aplica a un fondo así que, lo más simple es crear una de dos colores y eso lo indicamos colocando como parámetros, esos dos colores, en formato hexadecimal, rgb(), rgba() o hsl():

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

Así, sin más datos, creamos una gradiente que va del blanco al negro y que llenará el espacio al que lo aplicamos, de modo proporcional:

Tal como está, el degradado será vertical pero la dirección es algo que podemos definir: en general, sería así:

linear-gradient( posicion, color-inicial, color-final )

La posición, indica dónde comenzará la gradiente y requiere de dos palabras o valores al igual que la propiedad background-position (top, right, bottom, left, center); si sólo ponemos una, se asume que la otra es center así que:

linear-gradient(center top, #FFF, #000); o linear-gradient(top, #FFF, #000);
linear-gradient(center bottom, #FFF, #000); o linear-gradient(bottom, #FFF, #000);
linear-gradient(left center, #FFF, #000); o linear-gradient(left , #FFF, #000);
linear-gradient(right center, #FFF, #000); o linear-gradient(right, #FFF, #000);

si queremos que los colores inviertan su orden reemplazamos top por bottom; si queremos que sea horizontal (de izquierda a derecha) usamos left y si usamos right:

Admite otros valores que no sean palabras, también pueden usarse pixeles, porcentajes o ángulos, tanto positivos como negativos y combinarse de cualquier forma pero esto, en Chrome/Safari, se complica bastante ya que, como siempre, los navegadores hacen lo que se les da la gana (más información) así que esto n oserá válido en Chrome:

linear-gradient(10px 90%, #FFF, #000);
linear-gradient(20px -45deg, #FFF, #000);

aunque podemos usar ángulos en cualquiera de ellos:

linear-gradient(45deg, #FFF, #000);

Bastaría seguir agregando colores separados por comas para que la gradiente se hiciera cada vez más complicada:

linear-gradient(#FFF, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #0F0, #000)

Los colores se muestran ordenados y se distribuyen proporcionalmente pero, basta agregarles un valor separado por un espacio para indicar la posición de cada uno de ellos:

linear-gradient(#FFF, #FF0 20%, #000)

Hasta acá, la gradiente la aplicamos a la propiedad background pero podríamos colocarla en al propiedad background-image y, de ese modo agregar colores de fondo, algo que tiene sentido si se utilizan golores en forma rgba() que nos dan al posibilidad de crear fondos con determinada opacidad:

background-color; red;
background-image: -XXX-linear-gradient(#000, rgba(200,150,200,.5), #000);

Templarian
	Contiene 265 íconos de 48x48, en formato PNG. descargar

Cuando navegamos por la web, es usual que abramos una página y esta se quede cargando indefinidamente; en Blogger pasa seguido y no parece que haya muchas explicaciones al respecto ya que es muy complicado saber qué está ocurriendo, si se trata de un error real que deberíamos corregir o sólo es algo temporal.

No es nada fuera de lo común y no es frecuente que cause algo más que una molestia que se soluciona haciendo click en el botón detener que posee todo navegador o usando la tecla ESC pero, también es cierto que hay veces que esa carga indefinida impide que se ejecuten determinados scripts, por ejemplo, todos aquellos que requieren que la página esté cargada por completo para inicial izarse.

Sea por un motivo o por otro, KillSpinners viene en ayuda de todos los que usan Firefox porque es una extensión pensada para eso, simplemente, detiene la ejecución de manera automática pasado cierto tiempo.

Por defecto, ese tiempo está establecido en 30 segundos pero, ese dato podemos modificarlo en las opciones de la misma extensión y cuando se ejecute, nos mostrará una ventana de notificación, indicando el problema.

REFERENCIAS:shooanswers.com