Por fin he sido capaz de sacar tiempo para empezar a escribir otra vez y tener un blog con hosting propio. ¡Que ilu, tia!

Dejaré este blog activo de forma testimonial, ya que no pienso simplemente copiar los artículos que he escrito hasta ahora, si no, mas bien actualizar los tutoriales mas interesantes.

Sin mas, os emplazo a visitar el nuevo blog en www.innominepixel.com

CSS

Para crear nuestros triangulos, necesitamos un div vacío con width y height 0

.triangle{
 border-color: #f00 #0F0 #00F #DDD;
 border-style: solid;
 border-width: 20px;
 height:0;
 width:0;
}

Este código resultaría en un cuadrado compuesto de 4 triángulos de colores:Pero, ¿Que hacemos si solo queremos un triangulo?

.triangle{
 border-color: #f00 transparent transparent transparent;
 border-style: solid;
 border-width: 20px;
 height:0;
 width:0;
}

Como veis, aplicando un color transparente a los demás bordes, conseguimos quedarnos solo con el triángulo superior:También podeis experimentar con border-style para conseguir todo tipo de efectos:

Ejemplo práctico

Yo he creado un ejemplo que podriamos usar en nuestros diseños, por ejemplo en los comentarios de un blog o como en mi caso, en un chat web o sistema de mensajería.

Para ver cómodamente el código, podéis descargarlo y ver la demo.

Links: Descarga | Ejemplo

Links: Link | Demo

Echadle un ojo al resultado final y vamos al lío…

HTML

<div id="slider">
          <img src="img/img01.jpg" />
          <img src="img/img02.jpg" />
          <img src="img/img03.jpg" />
          <img src="img/img04.jpg" />
          <img src="img/img05.jpg" />
      </div>

Como veis son simplemente unas cuantas imágenes dentro de un contenedor. Ahora necesitamos colocarlas mediante CSS.

CSS

#slider {
    width: 600px;
    height: 350px;
    background: #FFF;
    border: 5px solid #FFF;
    overflow: hidden;
    position: relative;
    margin: auto;
}
#slider img{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

Lo mas importante a la  hora de aplicarle los estilos, es que las imagenes tengan una posición absoluta y el contenedor unas medidas determinadas. Lo que conseguimos con esto, es colocar todas las imágenes apiladas una encima de otra.

Javacript

function slider(){

 if ($('#slider img:visible').length == 0 || $('#slider img:last').is(':visible')){
 $('#slider img').fadeOut().first().fadeIn();
 } else {
 $('#slider img:visible').fadeOut().next('img').fadeIn();
 }

}

$(document).ready(function(){

 slider();
 setInterval(slider, 5000);

 });

Esta parte es muy sencilla, aunque voy a explicar lo que hace exactamente la función slider().

Esta función, está comprobando si ninguna imagen es visible o la última imagen es visible. En estos casos, muestra mediante fadeIn() la primera imagen de la galería.

En caso contrario, es decir, que si haya una imagen visible, simplemente la oculta y muestra la siguiente.

Lo único que tenemos que hacer para ponerlo en marcha, es ejecutar la función cada X milisegundos (5000) con setInterval() y ya está listo.

¿A que era facil?

Links: Descargar archivos | Demo

Tampoco está demás ver los otros calendarios para este mes, que son bastante buenos :)

Link: Calendarios para Julio

El script emula mediante VML, un lenguaje especifico para IE de dibujo vectorial, tres de las funciones mas usadas en CSS3:  border-radius, text-shadow y box-shadow.

El uso es muy sencillo, solo tenemos que añadirle una nueva línea al estilo del elemento sobre el que vayamos a aplicar el script:

.roundedBox{
   behavior:url('ie-css3.htc');
}

En su web podéis consultar el ejemplo y las explicaciones de uso.

Link: CSS3 en IE6, 7 y 8

Además, como siempre, Google nos da una API para que usemos fácilmente estas fuentes en nuestras webs. Es tan sencillo como:

rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

CSS selector {
  font-family: 'Font Name', serif;
}

Links: Google Font Directory | Google Font API

Además, el aspecto es personalizable e incluso funciona con los temas de jQuery UI.

De los mejores plugins que he visto últimamente.

Links: Pines Notify

La plataforma es muy completa y sencilla de usar, aunque todavía se encuentra en fase beta y puede no tener una documentación muy completa.

De todas formas merece la pena echar un ojo.

Links: eCart | Demo tienda | Demo admin

El problema que tenía, es que al cargar los posts o comentarios con ajax, las votaciones no funcionaban. Esto se debe a que el evento click de jQuery, solo funciona con los elementos que están cargados en la página y no los que vamos añadiendo posteriormente.

Buscando entre el código de GD Star Rating he encontrado una solución que no podía ser mas sencilla. Se basa en asignarle a las votaciones el evento click de forma permanente a los elementos que coincidan con el selector, mediante live.

Solo tenemos que ejecutar el siguiente código en nuestro script

jQuery(".gdsr_rating_as > a").live('click',function() { gdsr_rating_standard(this); });

jQuery(".gdthumb > a").live('click',function() { gdsr_rating_thumb(this); });

La primera linea es para votaciones con estrellas y la segunda para los pulgares.

Espero haber ayudado a toda la gente que andaba buscando algo parecido, por que no he conseguido encontrar nada por la web.