Esa cosa llamada child selector

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

jQuery ProQuo:UTILISIMO plugin Twitter

jQuery ProQuo es un plugin que permite convertir cualquier parte de una página web en un contenido "compartible" en Twitter.

Obviamente, requiere el uso de la librería jQuery y el script es bastante pequeño. Para usarlo, basta agregarlo antes de </head> y luego, definir la etiqueta y/o clase a la que se aplicará; por ejemplo, si quiisera que el contenido que de una etiqueta cuya clase es compartir fuera "tweeteable", debería llamar a la función de este modo:

<script>
$(document).ready(function(){
  $('.compartir').proQuo();
 });
</script>

Y luego, la podría usar en cualquier etiqueta y se agregaría un enlace con el texto Tweet this al final de ella:

<p class="compartir"> ....... cualquier cosa ....... </p>

Algunas opciones extras nos permiten usar el botón clásico de Twitter en lugar de ese texto:

$('.compartir').proQuo({useTwitterButton: true});

agregarle comillas:

$('.compartir').proQuo({ useTwitterButton: true, addCurlyQuotes: true });

establecer el texto a mostrar:

$('.compartir').proQuo({ tweetLabel: 'mi texto' });

o incluso personalizar algunas de las funciones propias de Twitter, detalles estos que se explican en los ejemplos que hay en al página del desarrollador.

No hay limitaciones en cuanto a la cantidad de tipos definidos así que pueden agregarse varios, cada uno con sus opciones propias:

$('.compartir').proQuo({ useTwitterButton: true });
$('.OTROcompartir').proQuo({ tweetLabel: 'mi texto' });

Y luego, si queremos, bastaría darle algún tipo de formato especial a esas clases para hacerlas evidentes o resaltarlas.

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: