Irish Icons

Irish Icons Pack
	Contiene 26 íconos de diferentes tamaños, en formato PNG. descargar

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>

<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

Quienes utilicen jQuery y actualicen la librería de manera sistemática o la enlacen desde los repositorios de Google, verá que la nueva versión es la 1.9.

Esto, que es algo normal y suele ser una actualización sin demasiada importancia desde el punto de vista de un usuario, se puede transformar en un problema serio ya que, esta versión no sólo modifica ciertas funciones sino que elimina otras de manera definitiva por lo tanto, algo que tal vez usábamos de manera normal, al actualizarla, dejará de hacerlo.

Lo mismo ocurrirá si queremos agregar algún plugin que vemos en la web y está pensado para una versión diferente.

No existe ninguna solución genérica que permita resolver esto y, cada desarrollador deberá adaptar sus scripts a las nuevas reglas por lo tanto, si notan que algo no funciona con alguna de ellas, primero que nada, verifiquen si hay actualizaciones disponibles para esta versión.

Los cambios están enumerados en la página de jQuery y son abundantes.

Eventualmente, ellos recomiendan agregar un script extra que debe insertarse justo debajo de la librería y que cargará una serie de funciones que permitirán mostrar a los desarrolladores, cuál o cuales son los cambios que deberían hacer:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.0.0.js'/></script>

Según explican, el uso del plugin jQuery Migrate permite restaurar algunas de esas funciones eliminadas pero es una solución temporal y por lo que he visto, no parece funcionar siempre.

Un detalle extra: la versión 2 que saldrá muy pronto, dejará de dar soporte a las versiones 6,7 y 8 de Internet Explorer.

Resumiendo: mucho cuidado

trunk8 es un plugin para jQuery pensado para mostrar textos largos en espacios pequeños.

Una vez que lo descargamos desde la página del desarrollador y lo agregamos antes de </head&/gt; ya se copiándolo directamente entre etiquetas script, como haríamos con cualquier otro:

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

o alojándolo en un servidor externo:

<script type='text/javascript' src='url_archivo'></script>

No requiere nada más que ejecutar la función para que funcione, indicándole la clase o id de la o las etiquetas que queremos truncar. Por ejemplo, si el texto estuviera en un div de este tipo:

<div id="ejemplo" class="truncar">
  ... cualquier texto ...
</div>

bastaría usar algo así:

$(document).ready(function() {
  $('#ejemplo').trunk8();
  // o bien esto otro si queremos hacer referencia a la clase
  $('.truncar).trunk8();
})

En Blogger y otros sitios, se suele usar un resumen de ciertas entradas pero este plugin sólo está pensado para textos así que si queremos usarlo para aplicarlo en etiquetas que contienen otras etiquetas (imágenes, formatos, enlaces, etc) lo que debemos hacer es modificar levemente el script. En lugar de la versión minimizada, conviene bajar la versión normal desde github y abrir el archivo con cualquier editor de textos.

Allí veremos esta línea:

this.original_text = this.$element.html();

y, simplemente, la cambiamos de este modo:

var elhtml = this.$element.html();
var eltxt = elhtml.replace(/<[^>]+>/g,'');
this.original_text = eltxt;

lo que hemos hecho es decirle al script que no use el texto sino que, primero, elimine las etiquetas.

Vamos a lo concreto, supongamos que tenemos un contenido como este:

<div class="truncar">
  ... cualquier contenido ...
</div>

Aunque posee una serie de opciones, me parece que, para usarlo en Blogger, sólo nos interesarán algunas de ellas. La más importante sería la que nos permite definir la altura; para eso, podemos elegir entre:

lines indica la cantidad de líneas de texto y debe ser un número (por defecto es 1)

$('.truncar').trunk8({
  lines: 5
});

pero, si el contenedor es complejo porque tiene propiedades CSS, es mejor utilizar otra opción llamada width que, por defecto es 'auto' y que nos permite establecer la cantidad de caracteres a mostrar

$('.truncar').trunk8({
  width:100
});

Más opciones:

fill es una cadena de texto (o etiquetas html) que se insertan al final y por defecto es '&hellip;' o sea, tres puntitos …

$('.truncar').trunk8({
  fill: '<span class="trunkfill"> ... y otras cosas</span>'
});

como en este ejemplo se usa una etiqueta con una clase (trunkfill) basta establecer una regla de estilo para ella para mostrarla de cualquier modo, diferenciándola del resto.

side nos permite seleccionar la forma en que se verá ese resumen y por defecto es 'right' o sea, se mostrarán una serie de palabras y al final los tres puntitos; pero podemos hacerlo al revés poniendo 'left' en cuyo caso, se mostrará el final del texto o bien 'center' y se mostrará un poco del inicio, los tres puntitos y un poco del final:

$('.truncar').trunk8({
  width:80,
  side:'center',
  fill: ' … '
});

Así como podemos utilizar cualquier etiqueta para agregar al final del texto, también podemos transformar esa etiqueta en un enlace que nos permita expandir o contraer su contenido, agregando un par de funciones extras:

$('.truncar').trunk8({
  tooltip: false,
  fill: ' … <a class="trunkmas" href="#">expandir</a>'
});

$(document).on('click', '.trunkmas', function(e){
  e.preventDefault();
  $(this).parent().trunk8('revert').append(' <a class="trunkmenos" href="#">colapsar</a>');
  return false;
});

$(document).on('click', '.trunkmenos', function(e){
  e.preventDefault();
  $(this).parent().trunk8();
  return false;
});

Nuevamente, como usamos etiquetas y clases, podemos estabelcer reglas de estilo para trunkmas y trunkmenos.

¿La última? Si ponemos el cursor encima de cualquiera de los divs, veremos que el tooltip nos muestra el contenido completo, eso, podemos eliminarlo con:

tooltip: false

Vintage Social Media Stamps
	Contiene 14 íconos de 256x256, en formato PNG. descargar

... direction-aware hover effect using CSS3 and jQuery ... difícil de traducir; pero digamos que dada una serie de rectángulos con imagenes, al poner el puntero del ratón encima de cada uno de ellos, se mostrará un texto superpuesto que aparecerá mediante una transición cuya dirección varia según donde estemos ... y como mi intento de explicarlo es más confuso que el original en inglés, mejor.

Veamos como se hace.

Requiere tres cosas, el CSS (funcionará sólo en navegadores que interpreten la propiedad transition), un script que funciona con jQuery y el HTML que no es otra cosa que una lista.

Empezamos con el HTML, como dije, una lista (etiqueta UL) donde cada item (etiqueta LI) contiene un enlace con una imagen que es la que veremos por defecto y un DIV con un texto que es el que se verá al poner el puntero del cursor encima:

<ul id="da-thumbs" class="da-thumbs">
  <li>
    <a href="url_enlace" target="_blank">
      <img src="url_imagen" />
      <div>
        <span>el texto a mostrar</span>
      </div>
    </a>
  </li>
  <!-- ... y seguimos agregando imágenes y textos con la misma estructura -->
</ul>

Debajo de eso, colocamos el llamado a la función:

<script type="text/javascript">
  $(function() {$('#da-thumbs > li').hoverdir();});
</script>

Y ahora, la función que podemos colocarla antes del </head> y que podemos descargar desde la página del desarrollador junto con los ejemplos.

(function( $, undefined ) {
  $.HoverDir = function( options, element ) {
    this.$el = $( element );
    this._init( options );
  };
  $.HoverDir.defaults = {hoverDelay : 0,reverse : false};
  $.HoverDir.prototype = {
    _init : function( options ) {
      this.options = $.extend( true, {}, $.HoverDir.defaults, options );
      this._loadEvents();
    },
    _loadEvents : function() {
      var _self = this;
      this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
        var $el = $(this),
          evType = event.type,
          $hoverElem = $el.find( 'div' ),
          direction = _self._getDir( $el, { x : event.pageX, y : event.pageY }),
          hoverClasses= _self._getClasses( direction );
        $hoverElem.removeClass();
        if( evType === 'mouseenter' ) {
          $hoverElem.hide().addClass( hoverClasses.from );
          clearTimeout( _self.tmhover );
          _self.tmhover = setTimeout( function() {
            $hoverElem.show( 0, function() {$(this).addClass( 'da-animate' ).addClass( hoverClasses.to );});
          }, _self.options.hoverDelay );
        } else {
          $hoverElem.addClass( 'da-animate' );
          clearTimeout( _self.tmhover );
          $hoverElem.addClass( hoverClasses.from );
        }
      });
    },
    _getDir : function( $el, coordinates ) {
      var w = $el.width(),
        h = $el.height(),
        x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
        y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
        direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
      return direction;
    },
    _getClasses      : function( direction ) {
      var fromClass, toClass;
      switch( direction ) {
        case 0:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromTop' : fromClass = 'da-slideFromBottom';
          toClass = 'da-slideTop';
          break;
        case 1:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromRight' : fromClass = 'da-slideFromLeft';
          toClass = 'da-slideLeft';
          break;
        case 2:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromBottom' : fromClass = 'da-slideFromTop';
          toClass = 'da-slideTop';
          break;
        case 3:
          ( !this.options.reverse ) ? fromClass = 'da-slideFromLeft' : fromClass = 'da-slideFromRight';
          toClass = 'da-slideLeft';
          break;
      };
      return { from : fromClass, to: toClass };
    }
  };
  var logError = function( message ) {if ( this.console ) {console.error( message );}};
  $.fn.hoverdir = function( options ) {
    if ( typeof options === 'string' ) {
      var args = Array.prototype.slice.call( arguments, 1 );
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          logError( "cannot call methods on hoverdir prior to initialization; " + "attempted to call method '" + options + "'" );
          return;
        }
        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
          logError( "no such method '" + options + "' for hoverdir instance" );
          return;
        }
        instance[ options ].apply( instance, args );
      });
    }  else {
      this.each(function() {
        var instance = $.data( this, 'hoverdir' );
        if ( !instance ) {
          $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
        }
      });
    }
    return this;
  };
})( jQuery );

Y por último, la clave, como siempre, es el CSS que agregamos donde más nos guste:

<style>
  .da-thumbs {margin: 0 !important}
  .da-thumbs li { /* cada item */
    background: #FFF; /* color de fondo para el borde */
    float: left;
    margin: 5px; /* separación entre items */
    padding: 8px; /* padding como borde */
    position: relative;
  }
  .da-thumbs li a, .da-thumbs li a img {
    display: block;
    height: 137px; /* el alto de la imagen */
    position: relative;
    width: 185px; /* el ancho de la imagen */
  }
  .da-thumbs li a {overflow: hidden;}
  .da-thumbs li a div { /* el contenedor de los textos */
     background: rgba(75,75,75,0.7); /* un poco de opacidad */
     height: 100%;
     position: absolute;
     width: 100%;
  }
  .da-thumbs li a div span { /* el texto en si mismo */
    color: #FFF;
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    margin: 15px 10px;
    padding: 10px 0;
    text-align: center;
  }
  .da-thumbs li a div.da-animate { /* la animación del hover */
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  /* la posición inicial de los textos ocultos */
  .da-slideFromTop {left: 0; top: -100%;}
  .da-slideFromBottom {left: 0; top: 100%;}
  .da-slideFromLeft {top: 0; left: -100%;}
  .da-slideFromRight {top: 0; left: 100%;}
    /* la posición final */
  .da-slideTop {top: 0;}
  .da-slideLeft {left: 0;}
</style>

REFERENCIAS:codrops

Aunque los caracteres en formato Unicode parezcan algo estrafalario, en cualquier plantilla de Blogger los vemos por varios lados. El más común es la comilla simple que en HTML se escribe &#39; pero hay otros, por ejemplo &#160; para espacios forzosos, &#161; y &#191; para los signos de abren admiraciones o interrogaciones, etc.

En realidad, cualquier texto puede ser escrito de ese modo, hasta un simple HOLA:

HOLA

Siempre tienen el mismo formato, el caracter & seguido del caracter # y un número decimal que es el código Ascii pero que no está limitado a los 256 tradicionales sino que se extiende abarcando cientos de otros números aunque algunos de ellos no serán visibles o se verán mal.

Blogger también usa unas "flechas especiales", caracteres que, por ejemplo, se ven en el gadget de Archivos: &#9658; y &#9660;:

◄▲►▼

Esta es una lista parcial de distintos caracteres de flechas que también pueden ser utilizados. Poniendo el cursor encima, se verá el formato requerido:

⇐⇑⇒⇓⇠⇡⇢⇣

⇚⤊⇛⤋⤌⤍⤎⤏

⇇⇈⇉⇊↢↤↥↦

↞↟↠↡⇦⇧⇨⇩

☜☝☞☟←↑→↓

Algunas no tienen las cuatro direcciones:

⇽⇾≪≫⇜⇝☚☛⧼⧽

Y otras sólo tienen una:

➩➪➫➬➭➮➯➱

➡⟿➔➜➝➞➟➠➡➢➣➤➧➨➲➵➺➻➼➽➾

Que alguna de las direcciones no exista como carácter individual no es problema ya que usando CSS podemos rotarlo en cualquier dirección; por ejemplo, si tomamos esta flecha hacia la derecha: &#10140;, lo transformamos en una flecha a la izquierda con:

transform:rotateY(180deg);

Y flechas hacia arriba y hacia abajo con:

transform:rotate(-90deg);
transform:rotate(90deg);

Sin olvidarnos que algunos navegadores requieren los prefijos específicos para estas transformaciones.

➜➜➜➜