Combinando gradientes

El CSS3 nos permite agregar varios fondos en una misma etiqueta,; esto lo hacemos separándolos por comas; por ejemplo:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN1),url(IMAGEN2);
  background-repeat: no-repeat;
  background-position: left top, right bottom;
}

Como las gradientes son fondos, nada impide que las combinemos con otras imágenes:

.demo {
  background-color: #FFF;
  background-image: url(IMAGEN), -moz-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -webkit-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -o-linear-gradient(#FFF, #000);
  background-image: url(IMAGEN), -ms-linear-gradient(#FFF, #000);
  background-repeat: no-repeat;
  background-position: right bottom, left top;
}

Del mismo modo, podemos combinar varios tipos de gradientes, separándolas con comas:

background-image: linear-gradient(#000,#ABC,transparent), linear-gradient(right,#880, #234);

background-image: linear-gradient(#000000, #CBA, transparent), radial-gradient(#FF0, #F00,transparent);

background-image: linear-gradient(transparent, #000000, #ACA), linear-gradient(right, #DFD, #080)

Un slider es un control que permite "mover" cosas. Lo hemos visto muchas veces, por ejemplo, son lo que manejan el volumen de un video o audio y agregarlos a una web no es sencillo así que las librerías de JavaScript suelen incluir funciones especiales para que, manipularlos, se algo un poco menos dramático.

En script.aculo.us Slider Demos hay varios ejemplos de su uso que no es mucho y, tal vez, los más interesantes son aquellos que utilizan imágenes que sirven como botones para desplazarse.

<style>
  #track1-left { /* el límite izquierdo */
    background-color: #BDB76B;
    height:  12px;
    position:absolute;
    top:- 5px;
    left: 0;
    width: 1px;
  }
  #track1-right { /* el límite derecho */
    background-color: #BDB76B;
    height: 12px;
    position: absolute;
    top: -5px;
    left: 199px;
    width: 1px;
  }
  #track1 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track1" style="width:200px; height:2px;">
    <div id="track1-left"></div> <!-- el limite izquierdo -->
    <div id="track1-right"></div> <!-- el limite derecho -->
    <!-- el botón con la imagen -->
    <div id="handle1" style="width:15px; height:20px;">
      <img src="URL_slider" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle1', 'track1', { 
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

<style>
  #track2-top { /* el límite superior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  #track2-bottom { /* el límite inferior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 199px;
    width: 12px;
  }
  #track2 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track2" style="width:2px; height:200px;">
    <div id="track2-top"></div> <!-- el limite superior -->
    <div id="track2-bottom"></div> <!-- el limite inferior -->
    <!-- el botón con la imagen -->
    <div id="handle2" style="width:19px; height:15px;">
      <img src="URL_slider.gif" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle2', 'track2', {
    axis: 'vertical',
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

Complicadito ... en fin, no es algo que tenga mucho uso; tal vez, una posibilidad interesante es la de poder cambiar las barras de desplazamiento que se ven en en cualquier elemento al que hemos dimensionado y cuyo contenido es muy grande. En Internet Explorer, las barras de desplazamiento pueden ser personalizadas utilizando CSS pero, lamentablemente, no pasa lo mismo en otros navegadores.

1. Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
2. Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
3. Vivamus viverra convallis lectus ut porttitor.
4. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
5. Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
6. Suspendisse sit amet lorem tortor.
7. Nulla congue porttitor leo, ac porttitor purus ultricies id?
8. Aliquam erat volutpat.
9. Sed ut magna sed tellus euismod lacinia eu at turpis.
10. Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
11. Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
12. Praesent vehicula risus eu est congue et vulputate ante egestas.
13. Aliquam posuere.

Usando Prototype + Scriptaculous y su plugin Slider que ya se carga de modo predeterminado si es que utilizamos las librerías de Google, es posible generar ese tipo de barra personalizada ... aunque no se si valdrá la pena.

De todos modos, acá hay un ejemplo:

<style>
  #scrollable2 {
    border-top: 2px solid #BDB76B;
    border-left: 2px solid #BDB76B;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
  #wrap3 {
    border-left: 2px solid #BDB76B;
    height: 122px;
    left: 262px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  #track3 { height: 120px; position: absolute; width: 15px; }
  #handle3 { height: 15px; width: 19px; }
  #wrap4 {
    border-top: 2px solid #BDB76B;
    height: 15px;
    left: 0;
    position: absolute;
    top: 120px;
    width: 262px;
  }
  #track4 { height: 10px; position: absolute; width:260px; }
  #handle4 { height:20px; width:15px; }
</style>

<div style="position:relative;">
  <div id="scrollable2">
    ....... acá colocaremos el contenido a mostrar  .......
    <div id="wrap3">
      <div id="track3">
        <div id="handle3"><img src="URL_imagen_slider_vertical" /></div>
      </div>
    </div>
    <div id="wrap4">
      <div id="track4">
        <div id="handle4"><img src="URL_imagen_slider_horizontal" /></div>
      </div>
    </div>
  </div>
</div>

<script>
  var slider3 = new Control.Slider('handle3', 'track3', {
    axis: 'vertical',
    onSlide: function(v) { scrollVertical(v, $('scrollable2'), slider3); }, 
    onChange: function(v) { scrollVertical(v, $('scrollable2'), slider3); }
  });
  var slider4 = new Control.Slider('handle4', 'track4', {
    onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); },
    onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
  });
  function scrollVertical(value, element, slider) {
    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
  }
  function scrollHorizontal(value, element, slider) {
    element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
  if ($('scrollable2').scrollHeight <= $('scrollable2').offsetHeight) {
    slider3.setDisabled();
    $('wrap3').hide();
  }
  if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
    slider4.setDisabled();
    $('wrap4').hide();
  }
</script>

Este es otro método sencillo para hacer que el home de un blog de Blogger no muestre las entradas sino algún tipo de presentación y, como cualquier otro, tiene sus pros y contras ya que todos ellos sólo son simulaciones incompletas (más información)

En este caso, vamos a usar la Configuración de Blogger para indicar, en la pestaña Formato, que la cantidad de entradas a mostrar en el home de nuestro sitio es cero:

Si hacemos esto, obviamente, no veremos nada de nada aunque las entradas seguirán mostrándose normalmente lo mismo que las páginas estáticas.

Lo que necesitamos ahora es aprovechar que Blogger nos permite agregar datos a las URLs sin que eso provoque errores; por lo tanto, si queremos ver completo ese blog con cero entradas en el home, podríamos usar una URL de este tipo:

miblog.blogspot.com/search?inicio

Con esas dos cosas en mente, trato de armar la plantilla.

Por ejemplo, voy a usar un blog "normal" y, justo antes de <div id='content-wrapper'> voy a poner esto que no es otra cosa que un simple enlace al blog completo:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='homepage'>
    <a href='miblog.blogspot.com/search?inicio'> ENTRAR </a>
  </div>
</b:if>

Los detalles del CSS dependerán de muchas cosas, sobre todo, de la idea que se quiera llevar a cabo.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <style>
    #content-wrapper {
      display:none;
    }
    #homepage { /* es el DIV contenedor */ }
    #homepage a { /* es el enlace */ }
  </style>
</b:if>

Como estoy ocultando todo, no debo olvidarme de hacerlo visible en la página de diseño, sino, no podré acceder a los gadgets así que entre <b:skin> y </b:skin> coloco esto:

body#layout #content-wrapper {display:block;}
body#layout #homepage {display:none;}

Hay varios reproductores que permiten reproducir videos de YouTube sin utilizar el que provee el servicio. Aunque suelen ser archivos o scripts pequeños, para quien no quiera molestarse en alojar alguno de ellos en su propio servidor, siempre queda la alternativa de usar el JWplayer que puede ser configurado y personalizado, ayudándose con los datos que brinda su página de opciones.

La URL del reprooductor es http://player.longtailvideo.com/player.swf y el código a utilizar es similar al de cualquier otro archivo de Flash:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="movie" value="http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

donde XXXXXXXXXXX son los once caraceteres que identifican a cada video y a l ocual, le podemos adosar otros parámetros tales como colores:

http://player.longtailvideo.com/player.swf?file=http://www.youtube.com/watch?v=XXXXXXXXXXX&screencolor=000000&backcolor=000000&frontcolor=FFFFFF&lightcolor=CCCCCC

Una variante de ese código, nos permite no tener que duplicar esos datos por comodidad, colocándolos en el parámetro flashvars:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashvars" value="file=http://www.youtube.com/watch?v=XXXXXXXXXXX">
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>

Lo interesante de este reproductor, es que permite agregar otro tipo de archivos de video como FLV o MP4, utilizando la misma sintaxis:

<param name='flashvars' value='file=URL_archivo.FLV'>

"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)