La pseudo-clase nth-child

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de dato especial y tal vez, la más conocida es :hover [ 1 2 3 ]

¿Qué podemos hacer para identificar un elemento cualquiera o grupo de elementos dentro de otro sin tener que agregar datos adicionales? Para eso es que existen las pseudo-clases nth-child y nth-last.

leer artículo actualizado

Algunos ejemplos de burbujas para contener textos, realizadas utilizando sólo CSS3, creados por Nicolas Gallagher. La página con demos tiene muchos más y el archivo de estilo que contiene las definiciones tiene muchos comentarios que las explican.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

Duis quis urna nunc, sit amet tincidunt lectus.

.triangle-border {
  background: #FFF;
  border: 5px solid #5A8F00;
  color: #333;
  margin: 1em 0 3em;
  padding: 15px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.triangle-border:before {
  border: 20px solid transparent;
  border-top-color: #5A8F00;
  bottom: -40px;
  content: "\00a0";
  display: block;
  height: 0;
  left: 40px;
  position: absolute;
  width: 0;
}
.triangle-border:after {
  border: 13px solid transparent;
  border-top-color: #FFF;
  bottom: -26px;
  content: "\00a0";
  display: block;
  left: 47px;
  position: absolute;
  height: 0;
  width: 0;
}

.triangle-border.top:before {
  border: 20px solid transparent;
  border-bottom-color:#5A8F00;
  bottom: auto;
  left: auto;
  right: 40px;
  top: -40px;
}
.triangle-border.top:after {
  border: 13px solid transparent;
  border-bottom-color:#FFF;
  bottom: auto;
  left: auto;
  right:47px;
  top: -26px;
}

.triangle-border.left {
  margin-left: 30px;
}
.triangle-border.left:before {
  border-width: 15px 30px;
  border-style: solid;
  border-color: transparent #5A8F00 transparent transparent;
  bottom: auto;
  left: -60px;
  top: 10px;
}
.triangle-border.left:after {
  border-width: 9px 21px;
  border-style: solid;
  border-color: transparent #FFF transparent transparent;
  bottom: auto;
  left: -42px;
  top: 16px;
}

Nulla quis eros dolor, eget tincidunt velit. Nam ultrices magna vitae eros accumsan vestibulum. Morbi quis dui ac justo volutpat sagittis a eget sapien.

.example-right {
  background: #5A8F00;
  background: -moz-linear-gradient(top, #b8db29, #5A8F00);
  background: -o-linear-gradient(top, #b8db29, #5A8F00);
  background: linear-gradient(top, #b8db29, #5A8F00);
  border-radius: 10px;
  color: #FFF;
  margin: 0;
  padding: 15px 30px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.example-right + p {
  margin: 15px 0 2em 85px;
  font-style: italic;
}
.example-right:after {
  border-width: 0 20px 50px 0px;
  border-style: solid;
  border-color: transparent #5a8f00;
  bottom: -50px;
  content: "\00a0";
  display: block;
  left: 50px;
  height: 0;
  position: absolute;
  width: 0;
}

Aliquam scelerisque cursus ante, et lobortis orci elementum in. In commodo ipsum nec leo malesuada aliquet.

.oval-thought-border {
  background: #FFF;
  border:10px solid  #C81E2B;
  color: #333;
  margin: 1em auto 80px;
  padding: 70px 30px;
  position: relative;
  text-align:center;
  -webkit-border-top-left-radius: 240px 140px;
  -webkit-border-top-right-radius: 240px 140px;
  -webkit-border-bottom-right-radius: 240px 140px;
  -webkit-border-bottom-left-radius: 240px 140px;
  -moz-border-radius: 240px / 140px;
  border-radius: 240px / 140px;
}
.oval-thought-border:before {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -40px;
  content: "\00a0";
  height: 50px;
  position: absolute;
  right: 100px;
  width: 50px;
  z-index: 10;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
.oval-thought-border:after {
  background: #FFF;
  border: 10px solid #C81E2B;
  bottom: -60px;
  content: "\00a0";
  height: 25px;
  position: absolute;
  right: 50px;
  width: 25px;
  z-index: 10;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}

Si miran su plantilla de Blogger y la expanden, verán que en el Widget Blog hay un nuevo INCLUDABLE que, aparentemente, se ha agregado a todas, ya sean estas las originales o no.

El código que tiene es el siguiente:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.blogThisMsg + &quot;\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToFacebookMsg + &quot;\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;&quot; + data:top.shareToBuzzMsg + &quot;\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a>
</b:if>
</b:includable>

Aparentemente, lo que va ha hacer eso es agregar cinco íconos para compartir entradas con diferentes servicios; en este caso, enviarlas por e-mail, BlogThis, Twitter, Facebook y Google Buzz.

Por ahora, los enlaces no parecen estar funcionando y es probable que requiera que marquemos alguna opción en el widget ya que todo el código está condicionado. De todos modos, podemos espiar.

Le quitamos la condición y lo agregamos, por ejemplo, en el footer de los posts:

<b:include data='post' name='shareButtons'/>

Lo que veríamos seria esto:

Se adapta bien a cualquier color de fondo, es bastante discreto, tiene un efecto hover y al hacer click se abre el enlace en una nueva ventana pero, no vale la pena que lo hagan porque aún no enlaza nada. Habrá que esperar hasta que lo activen.

Este gadget de Blogger no parece haber tenido mucho éxito. Aparecía si entrábamos via Draft pero ya no lo veo aunque sigue siendo accesible y fue publicitado hace más de un año.

Se trata de de Event que permite agregar eso, algún tipo de promoción a un evento determinado e invitar a los visitantes a unirse y participar usando Google Calendar y FriendConnect.

Ellos dicen que es una maravilla; yo, no lo entiendo en absoluto y encima, está en inglés.

Bien. allí está por si a alguien el resulta útil y si no se ve en la lista de gadgets, basta hacer click en Añade tu propio en la ventana y escribir esta URL:

http://www.google.com/ig/modules/calendar/socialevent/bloggerevent.xml

FlashGameDistribution.com es un sitio que permite a los desarrolladores de juegos de Flash, subir sus creaciones y distribuirlas. Recién salido de su versión beta, es una alternativa para todos aquellos que buscan sitios gratuitos e incluye a posibilidad de agregar sponsors.

Click para jugar.

http://flashgamedistribution.com/game/study_materials_spot_the_difference

REFERENCIAS:Emanuele Feronato

Este script se llama M6 menu y es una de las tanta genialidades de dhteumeuleu que siempre me sorprende con sus experimentos. El código es realmente mínimo y ta vez sea eso lo que más llama la atención. El script en si mismo ocupa unas pocas líneas y se coloca antes de </head>:

<script type="text/javascript">
//<![CDATA[
// ===========================================
//                -------- M6 menu ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// updated Feb 2010 - namespaced 
// ===========================================

var M6 = function () {
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
var zoom = function (s) {
if(s!=over){
over = s;
var i = 0,o;
while (o = P[i]) {
o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
o.style.color=(i==s)?selected:color;
i++;
}
}
}
var init = function () {
P = document.getElementById("menu").getElementsByTagName("a");
var i = 0,o;
while (o = P[i]) {
if(num){
x=i+".";
if(x.length<3)x="0"+x;
o.innerHTML = x+o.innerHTML;
}
o.style.width = "100%";
o.i = i;
o.onmouseover= function() {
zoom(this.i);
}
i++;
}
zoom(0);
}
return {
init : init
}
}();
onload = function() {
M6.init();
}
//]]>
</script>

donde hay cuatro datos configurables:

• var num agrega un número de orden delante de cada enlace (poner false para eliminarlo)
• var fontSize establece el tamaño de la fuente del texto
• var color el color de los enlaces (blanco por defecto)
• var selected el color del enlace activo (naranja por defecto)

A esto, le podemos sumar dos definiciones de CSS; por ejemplo:

#menu { /* el rectángulo donde se mostrará la lista de enlaces */
height: 300px; /* la altura del rectángulo */
position: relative;
width: 400px; /* el ancho del rectángulo */
}
#menu a {  /* los enlaces */
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}

Y el código HTML sólo es un DIV con una serie de enlaces:

<div id="menu">
<a href="URL_enlace1"> enlace 1 </a>
<a href="URL_enlace2"> enlace 2 </a>
<a href="URL_enlace3"> enlace 3 </a>
.......
</div>

¿Y esto podría usarse para algo?

Sí, claro, por ejemplo, podemos aplicarlo al blog como una forma distinta de mostrar las etiquetas. Para eso basta agregar un nuevo Elemento Etiquetas o usar el que ya tenemos, establecer el tipo LIsta y desmarcar Mostrar cantidad de entradas por etiqueta. Luego, buscamos el widget que, por defecto tendrá como id Label1 y modificamos una línea del script; en lugar de:

P = document.getElementById("menu").getElementsByTagName("a");

ponemos:

P = document.getElementById("Label1").getElementsByTagName("a");

Tambien conviene reducir la fuente del texto y no mostrar el número de orden; Por último, adaptamos el CSS, por ejemplo:

#Label1 {
height: 300px;
position: relative;
width: 250px;
}
#Label1 li {
list-style-type: none;
margin: 0;
padding: 0;
}
#Label1 a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
#Label1 a:hover {
text-decoration: none;
}

Like it? Tweet it! es un plugin para jQuery que permite que cualquiera pueda publicar tweets directamente desde una web.

Necesitamos entonces tener jQuery agregado antes de </head>:

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

Y luego, el script del plugin que podemos descargar y alojar nosotros o usar el que ellos ellos ofrecen:

<script type="text/javascript" src="http://tweet-it.s3.amazonaws.com/tweet-it.js"></script>

y la llamada a la función:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$(".tweet-it").tweetIt();
})
//]]>
</script>

Por último, colocamos un enlace donde se nos ocurra:

<a href="javascript:void(0);" class="tweet-it"> un texto o una imagen </a>

Haciendo click en el enlace se abrirá una ventana que siempre se mostrará en la parte inferior de nuestra pantalla y que, la primera vez que la usemos, nos pedirá autorización para conectarse con nuestra cuenta :

El widget admite agunos parámetros opcionales que pueden agregarse a la función:

header: es el texto del header y por defecto dice "Like it? Tweet it!"
intro: es el texto introductorio "No autotweets here! Write your own text ..."
typeATweet: es el texto previo al enlace y por defecto dice "Type a tweet here"
linkSeperator: es la separación entre ese texto y el enlace " — "
animate: es la forma en que se mostraá a ventana; puede ser slide , fade o false
cssFile: un archivo de estilo opcional (más información)
popup: se coloca true si se quier mostrar la ventana en un pop-up
popupWidth: es el ancho de esa ventana popup, por defecto es 500
popupHeight: es el alto de esa ventana popup, por defecto es 233

REFERENCIAS:unijimpe