Muter: Navegando en silencio

¿Les molesta el sonido? ¿Quieren navegar sin que al abrir una páginas comience a escucharse música o una cacofonía increíble si uno abre varias simultáneamente y todas suenan al unísono?

Usando Firefox hay una extensión llamada Muter que nos permite silenciar todo con un solo click sin que se detenga la carga de los audios o videos.

Simplemente, nos agrega un ícono en la barra de complementos con el cual permutamos su estado y listo. Asunto arreglado.

Para Chrome hay una extensión similar llamada MuteTab

REFERENCIAS:ghacks.net

marquee con CSS3

La marquees o marquesinas in spanish, son una forma de mostrar distinto contenido, desplazándolo en cierta dirección. En HTML es una etiqueta bastante sencilla pero carece de opciones sofisticadas y ese desplazamiento es relativamente abrupto y constante con lo que los textos no suelen ser muy legibles.

Con JavaScript es posible generar cosas similares y desplazar textos de distintos modos pero, hongkiat.com muestra una tercera opción que es generar marquees utilizando sólo CSS.

Claro, aparentemente, si uno lee "utilizando sólo CSS" se imagina que es más sencillito pero, lamentablemente, aunque la idea es sencilla, como se utilizan propiedades que aún no están unificadas en todos los navegadores, es engorroso andar escribiendo cada una de ellas, sobre todo, las que que definen las reglas de las animaciones.

De todos modos, acá vamos ...

El HTML donde colocaremos nuestra marquesina es simple, un DIV con cierta clase donde cada texto se incluye con una etiqueta P y si en el ejemplo uso dos clase simultáneamente es para poder controlar las dos variantes, una se moverá horizontalmente y otra, verticalmente:

<div class="marquee marqueeV">
<p> una línea de texto </p>
<p> otra línea de texto </p>
</div>

¿Por qué sólo pongo dos textos? Este sería el CSS genérico:

/* al contenedor lo dimesionamos tanto en su ancho como su alto */
.marquee {
  border: 1px solid #444;
  border-radius: 5px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}
/* cada párrafo */
.marquee p {
  color: #FFF;
  font-family: Tahoma, Arial, sans-serif;
  height: 100%;
  line-height: 50px;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);
  transform:translateX(100%);
}

Y ahora, la animación de cada una de las etqieutas P:

.marqueeH p:nth-child(1) {
  -moz-animation: left-one 20s ease infinite;
  -webkit-animation: left-one 20s ease infinite;
  animation: left-one 20s ease infinite;
}
.marqueeH p:nth-child(2) {
  -moz-animation: left-two 20s ease infinite;
  -webkit-animation: left-two 20s ease infinite;
  animation: left-two 20s ease infinite;
}

/* lo molesto es de tener que crear las animaciones para cada navegador */

/* Mozilla */
@-moz-keyframes left-one {
  0%{-moz-transform:translateX(100%);}
  10% {-moz-transform:translateX(0);}
  40% {-moz-transform:translateX(0);}
  50% {-moz-transform:translateX(-100%);}
  100%{-moz-transform:translateX(-100%);}
}
@-moz-keyframes left-two {
  0% {-moz-transform:translateX(100%);}
  50% {-moz-transform:translateX(100%);}
  60% {-moz-transform:translateX(0);}
  90% {-moz-transform:translateX(0);}
  100%{-moz-transform:translateX(-100%);}
}

/* Chrome/Safari */
@-webkit-keyframes left-one {
  0% {-webkit-transform:translateX(100%);}
  10% {-webkit-transform:translateX(0);}
  40% {-webkit-transform:translateX(0);}
  50% {-webkit-transform:translateX(-100%);}
  100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-two {
  0% {-webkit-transform:translateX(100%);}
  50% {-webkit-transform:translateX(100%);}
  60% {-webkit-transform:translateX(0);}
  90% {-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(-100%);}
}

Donde, la velocidad es controlada por el valor indicado en:

animation: left-two 20s ease infinite;

usando animaciones para crear "marquees" con estilo ...

cada item se encuentra en una etiqueta <p></p>

Animarlo verticalmente es similar, hay que cambiar la clase y luego, crear cada una de las reglas:

<div class="marquee marqueeV">
  .......
</div>

usando animaciones para crear "marquees" con estilo ...

esta otra se mueve verticalmente

.marqueeV p {
  -moz-transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
}
.marqueeV p:nth-child(1) {
  -moz-animation: down-one 20s ease infinite;
  -webkit-animation: down-one 20s ease infinite;
  animation: down-one 20s ease infinite;
}
.marqueeV p:nth-child(2) {
  -moz-animation: down-two 20s ease infinite;
  -webkit-animation: down-two 20s ease infinite;
  animation: down-two 20s ease infinite;
}
@-moz-keyframes down-one {
  0%{-moz-transform:translateY(-100%);}
  10% {-moz-transform:translateY(0);}
  40% {-moz-transform:translateY(0);}
  50% {-moz-transform:translateY(100%);}
  100%{-moz-transform:translateY(100%);}
}
@-moz-keyframes down-two {
  0% {-moz-transform:translateY(-100%);}
  50% {-moz-transform:translateY(-100%);}
  60% {-moz-transform:translateY(0);}
  90% {-moz-transform:translateY(0);}
  100%{-moz-transform:translateY(100%);}
}
@-webkit-keyframes down-one {
  0% {-webkit-transform:translateY(-100%);}
  10% {-webkit-transform:translateY(0);}
  40% {-webkit-transform:translateY(0);}
  50% {-webkit-transform:translateY(100%);}
  100%{-webkit-transform:translateY(100%);}
}
@-webkit-keyframes down-two {
  0% {-webkit-transform:translateY(-100%);}
  50% {-webkit-transform:translateY(-100%);}
  60% {-webkit-transform:translateY(0);}
  90% {-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(100%);}
}

Transiciones en gradientes

Aunque las transiciones con CSS pueden aplicarse a muchas propiedades pero no a las gradientes aunque, como estas son "imágenes de fondo" lo que puede hacerse es aplicar esas transiciones sobre otras propiedades background y de tal modo, simular animaciones.

Los ejemplos de impressivewebs usan dos propeidades especiificas: background-size y background-position pero, podría probarse con cualquier otra y ver qué sale.

<a href="#" class="botonT ejemplo2">ejemplo #1</a>

Todo se reduce a un enlace donde hay dos clases, la primera (botonT ) es general, establece las mismas propiedades de todos los ejemplos:

.botonT:link, .botonT:visited {
  border: solid 2px rgba(0,0,0,0.2);
  border-radius: 10px;
  color: #FFF;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 200px;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
  transition: all .5s;
}

La segunda es exclusiva de cada uno de ellos:

ejemplo #1

.ejemplo1:link, .ejemplo1:visited {
  background: #38B;
  background: -moz-linear-gradient(#38B, #22B);
  background: -webkit-linear-gradient(#38B, #22B);
  background: -o-linear-gradient(#38B, #22B);
  background: -ms-linear-gradient(#38B, #22B);
  background: linear-gradient(#38B, #22B);
  background-repeat: repeat;
  -moz-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
}

.ejemplo1:hover, .ejemplo1:focus, .ejemplo1:active {
  background-position: 0 -120%;
}

ejemplo #2

.ejemplo2:link, .ejemplo2:visited {
  background: #ABC;
  background: -moz-radial-gradient(#ABC, #456);
  background: -webkit-radial-gradient(#ABC, #456);
  background: -o-radial-gradient(#ABC, #456);
  background: -ms-radial-gradient(#ABC, #456);
  background: radial-gradient(#ABC, #456);
  -moz-background-size: 100% 10%;
  -webkit-background-size: 100% 10%;
  background-size: 100% 10%;
}

.ejemplo2:hover, .ejemplo2:focus, .ejemplo2:active {
  background-position: 0 0;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

ejemplo #3

.ejemplo3:link, .ejemplo3:visited {
  background: -webkit-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -moz-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -o-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: -ms-radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
  background-position: center center;
  -moz-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.ejemplo3:hover, .ejemplo3:focus, .ejemplo3:active {
   -moz-background-size: 100% 200%;
   -webkit-background-size: 100% 200%;
   background-size: 100% 200%;
}

Los pseudo-elementos first-letter y first-line

El pseudo-elemento :first-letter permite establecer las propiedades de la primera letra de un párrafo. Es algo simple pero, debe tenerse muy en cuenta que ese párrafo debe comenzar con un texto y no funcionará si es precedido por una imagen, un salto de línea o cualquier otro tipo de contenido.

Los pseudo-elementos seleccionan alguna parte de un elemento y su sintaxis es similar a las pseudo-clases aunque a veces, en lugar de usar un carácter dos puntos se utilizan dos.

leer artículo actualizado

Adipoli: Plugin de jQuery para crear efectos hover

adipoli es un plugin para jQuery que facilita la tarea de crear efectos hover sobre las imágenes ya que dispone de una serie de transiciones predefinidas que podemos usar con facilidad.

Obviamente, se requiere tener jQuery; si no es así, puede ser cargado desde las API de Google agregando lo siguiente antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>

Descargamos el ZIP con el plugin, lo alojamos en un servidor externo y lo agregamos a continuación de lo anterior:

<script src="URL_jquery.adipoli.min.js" type="text/javascript"></script>

o lo añadimos directamente en la plantilla, copiando y pegando el contenido del archivo:

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

Por último unas pocas reglas de estilo que podemos agregar directamente en la plantilla y que no es necesario personalizar:

<style>
.adipoli-wrapper {display: inline-block; margin:auto; position:relative;}
.adipoli-wrapper>img {position: absolute; z-index: 1;}
.adipoli-before {position: absolute; z-index: 5;}
.adipoli-after {position: absolute; z-index: 10;}
.adipoli-slice {display:block;height:100%;position:absolute;z-index:15;}
.adipoli-box {display:block;position:absolute;z-index:15;}
</style>

¿Y cómo lo usamos? Sólo hay que agregar la función a cualquier selector así que sigo poniendo códigos:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('.efecto1').adipoli({'startEffect' : 'overlay','hoverEffect' : 'sliceUpDown'});
  $('.efecto2').adipoli({'startEffect' : 'overlay','hoverEffect' : 'fold'});
});
//]]>
</script>

En esos ejemplos, todas las imágenes cuyo atributo class es efecto1 se animarán de cierto modo y las que tengan la clase efecto2 de otro. Lo mismo podría hacer en Blogger para crear animaciones automáticas de las imagenes subidas ya que esta, tienen una clase denominada separator así que con esto, les agragría uno de los efectos:

$('.separator img').adipoli({'startEffect' : 'normal','hoverEffect' : 'popout'});

Lo que se ve entre las llaves son las opciones que, básicamente son dos, la primera indica como se verá la imagen inicialmente (normal, transparent, overlay o grayscale sólo si el documento es de tipo HTML5)

La segunda indica el efecto hover y puede ser cualquiera de estos valores: normal, popout, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpRandom, sliceUpDown, sliceUpDownLeft, fold, foldLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse.

Además, hay opciones extras que permiten controlar los detalles como la opacidad, velocidad, colores, márgenes y la manera en que serán tratados los textos pero, todo eso queda para que experimenten.

El resultado final podría ser algo como esto:

shareNice: Una alternativa para compartir entradas

shareNice se presenta como una variante del gadget AddThis con la diferencia de ser de código abierto lo que permite descargarlo y usarlo libremente aunque esto no es necesario ya que también es posible utilizar el script que ellos proveen y por lo tanto, no necesitamos hacer ningún tipo de instalación extra.

La idea es permitir que cada usuario lo adapte a sus necesidades o gustos personales de manera sencilla y, de ese modo disponer de un botón genérico para compartir entradas en las redes sociales.

Hasta ahí todo parece bien y es una alternativa razonable ya que es mucho más flexible que otros sistemas y mucho menos intrusivo pero ... cuando uno trata de probarlo, algo parece fallar en alguna parte; incluso, en algunos de los sitios que ellos mismos sugieren ver para probar sus características, tampoco parece andar. Me da la impresión que lo han armado basándose en algún concepto de diseño erróneo o que no tiene en cuenta las distintas alternativas que puede tener una página web y por lo tanto, ciertas propiedades del CSS que utilizan hacen que las cosas se nos compliquen aunque, bastaría cambiar un par de detalles para hacerlo operativo. En realidad, desconozco si eso es un error en si mismo tal como imagino pero, como usuario, tampoco me importa a sí que me limito a tratar de solucionarlo porque la idea me sigue pareciendo interesante.

Lo usamos fácilmente, bastaría poner esto antes de </head>

<script src="http://sharenice.org/code.js" type="text/javascript"></script>

y luego, poner un DIV allí donde quisiéramos que se mostrara el botón:

<div id="shareNice"></div>

Así, sin opciones extras, veríamos el ícono y al poner el cursor encima, se mostraría la ventana con los íconos por defecto:

Lamentablemente, esa ventana se muestra en cualquier parte así que acá le he agregado dos reglas de estilo; en la primera, le agrego position:relative porque la ventana modal con los íconos tiene definida una posición absoluta y por lo tanto, se abrirá en cualquier parte, dependiendo de cuál sea el contenedor; también le agrego display: inline-block pra que no ocupe todo el ancho y que pueda alinearse con otros contenidos; la segunda regla, cambia las posiciones absolutas de tal modo que la ventana se abra encima del botón:

<style>
  #shareNice {
    display: inline-block  !important;
    position: relative;
  }
  #shareNice-wrapper {
    left: 0 !important;
    top: -35px !important;
  }
</style>

allí, con distintos valores de left y top, podemos ubicarla donde nos guste, teniendo en cuenta que la posición 0 0 es el botón en si mismo.

Ahora, las opciones que se agregan como atributos en el DIV:

data-services es la lista de los dominios de las redes sociales que queremos incluir y se separan con comas
data-share-label nos permite establecer el texto a mostrar o no poner ninguno
data-color-scheme define el color base y puede ser black, blue, green, orange, pink, red o cualquier otro color
data-icon-size es el tamaño el botón y puede ser 16 o 32
data-panel-bottom es el logo inferior, si no queremos que se ve, ponemos plain
data-share-zindex solo lo usaremos para colocar un valor en la propiedad z-index si es que se requiere

Aquí hay un ejemplo concreto:

<div id="shareNice" data-share-label="" data-color-scheme="black" data-icon-size="16" data-panel-bottom="plain" data-services="blogger.com,email,evernote.com,facebook.com,google.com,linkedin.com,plus.google.com,stumbleupon.com,www.tumblr.com,twitter.com">
</div>

¿Cuáles son los dominios a poner? ¿Dónde está la lista? Acá algunos de los que encontré y vi que funcionaban; hay más pero los desconozco:

bit.ly,blogger.com,delicious.com,digg.com,email,evernote.com,facebook.com,google.com,linkedin.com,myspace.com,plus.google.com,reddit.com,stumbleupon.com,www.tumblr.com,twitter.com

Transiciones y paneles deslizantes

Aunque es algo experimental, la idea del diseñador Sergio Camalich es válida y tal vez muestre una alternativa en el uso de las transiciones entre páginas usando sólo CSS sobre la que habrá que seguir trabajando.

Los ejemplos pueden verse en estos demos 1 2 3 y acá veremos si son aplicables a una entrada cualquiera del blog con las limitaciones del caso.

En este ejemplo, coloco todo en un DIV al que debo darle una dimensión precisa; en el ejemplo original eso se resuelve agregando overflow: hidden al body de la página y haciendo que la página tenga siempre una altura precisa de tal modo que no se vea el efecto indeseado del salto que se produce cuando se usa target, algo que acá es inevitable (o no tengo la menor idea si hay alguna forma de evitarlo).

inicio

Nunc nulla purus, malesuada ut vehicula et, suscipit sit amet eros? Duis lacinia luctus erat; nec venenatis nibh lobortis in.

Morbi tempor quam ac nibh sollicitudin rutrum. Sed ornare pretium libero vel viverra. Pellentesque tincidunt purus nulla, ullamcorper mattis risus. Maecenas commodo; massa a adipiscing lacinia, arcu nibh vulputate turpis, sit amet tristique enim ligula sit amet quam. Sed id eros diam; nec sagittis nisl.

Praesent ultrices, dui at egestas dictum posuere.

Cras cursus nulla nec enim euismod posuere. Cras eu leo et lorem dignissim commodo non at enim. Quisque consequat nisl id metus tempor bibendum. Proin eget dolor turpis. Curabitur vitae est erat.

imágenes

• 
• 
• 
• 
• 
• 

otra más

Ut nec nibh quis sapien congue sagittis sit amet at lorem? Nam tellus purus; suscipit non imperdiet in, lobortis sed odio. Proin eget odio non nibh semper massa nunc.

última

Donec elementum scelerisque massa, at accumsan orci fringilla sed. Nunc sed leo at turpis consequat accumsan. Maecenas non augue ac felis varius facilisis. Pellentesque interdum pharetra vestibulum!

seleccionar

• inicio
• imágenes
• otra más
• última

El HTML tiene esta estructura:

<div id="pageTrans">

  <!-- el contenido de cada uno de los "paneles" -->
  <!-- el primero (el visible) es levemente distinto al resto -->
  <div id="panel1" class="content">
    <h4>PANEL 1</h4>
    <!-- cualquier contenido -->
  </div>

  <!-- los otros (los ocultos)  tienen la misma estructura -->
  <div id="panel2" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel3" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel4" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>

  <!-- la navegación a la izquierda -->
  <div id="selector">
    <h5> seleccionar </h5>
    <ul id="navigation">
      <li><a id="link-panel1" href="#panel1"> texto 1 </a></li>
      <li><a id="link-panel2" href="#panel2"> texto 2 </a></li>
      <li><a id="link-about" href="#about"> texto 3 </a></li>
      <li><a id="link-contact" href="#contact"> texto 4 </a></li>
    </ul>
  </div>

</div>

Y ahora el CSS que es donde hay que trabajar y ersonalziar proque todo depende de esas reglas:

<style>
  #pageTrans { /* elcontenedor */
    height: 490px;
    margin: 0 auto;
    position: relative;
    width: 580px;
  }

  /* la navegación izquierda */
  #selector {
    position: absolute;
    top: 20px;
    width: 135px;
    z-index: 2000;
  }
  #selector h5 { /* el texto "seleccionar" del ejemplo */ }
  #navigation {
    display: block;
    list-style: none;
    margin: 10px 0 0;
    z-index: 3;
  }
  #navigation a {
    border: 1px solid #FFFF;
    box-shadow: 0 0 15px #FFF inset;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 45px;
    margin: 0 0 10px;
    padding: 0 10px;
    text-align: center;
    text-transform: uppercase;
  }
  #navigation a:hover { background: Crimson; }

  /* las reglas de los paneles */
  .content {
    left: 180px;
    position: absolute;
    top: 0;
    width: 400px;
  }
  .content h4 { /* el título de cada panel */ }
  .panel {
    -moz-transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-color: #101921;
    height: 100%;
    margin-left: -610px;
    position: absolute;
    width: 580px;
    z-index: 2;
  }
  .panel:target { margin-left: 0px; }

</style>