Vintage Social Media Stamps

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.

➜➜➜➜

Esta es una solución genérica y 100% garantizada para aquellos administradores que aun están preocupados por la forma en que se ven su sitios web en Internet Explorer 6 (sí, aún hay):

<!--[if IE6]>
  <style type="text/css">
    body { display: none; }
  </style>
<![endif]-->

No. No es en serio, debo aclararlo por las dudas ya que nunca se sabe; sólo es uno de las tantas bromas publicadas en csshumor.com/
¿Más?

#Merry.Christmas { text-decoration: blink !important; }

.motivation .monday { display: none; }

.ideal-job { stress: 0; richness: 100; }

#internet .comments {text-transform: uppercase;}

En fin. No abusemos ... y no pregunten dónde se coloca:

.titanic {
 overflow: auto;
 transform: rotate(90deg);
 page-break-after: always;
 float: none;
 z-index: 0;
 visibility: hidden;
 display: none;
 position: fixed;
}

REFERENCIAS:@CSSHumor

A veces, cuando se usan scripts, debemos escribir caracteres especiales como acentos y estos no se ven bien o aparece un signo de interrogación u otros símbolos raros. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona.

En Blogger, los caracteres especiales suelen verse bien por lo que ese problema es difícil que se nos presente pero, cuando se trata de otros servicios, de archivos externos, las cosas pueden complicarse, sobre todo si queremos emplear caracteres especiales [1 2]

Por ejemplo, esto, suele verse bien y al hacer click en este enlace, se verán las letras de modo correcto:

alert(" á é í ó ú  ☺ ❤ ✛ ");

Si no es así y quiero usar caracteres de ese tipo, lo que debo hacer es escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida de una letra y un número en formato hexadecimal. En el caso de los acentos o caracteres comunes, sería \x más el código Unicode de dos dígitos:

\xe1 es la letra á
\xe9 es la letra é
\xed es la letra í
\xf3 es la letra ó
\xfa es la letra ú

Algunas combinaciones generan caracteres especiales:

\n es un salto de linea
\t es una tabulación
\' es la forma de escribir comillas simples
\" es la forma de escribir comillas dobles
\\ es una barra invertida

De manera más genérica, podemos usar \u más el código Unicode en formato hexadecimal (cuatro dígitos):

\u00e1 es la letra á
\u00e9 es la letra é
\u00ed es la letra í
\u00f3 es la letra ó
\u00fa es la letra ú

lo que nos permitirá ver correctamente eso que antes no se podía:

alert(" \u263a \u2764 \u271b ");

En esta página, hay una lista muy completa de todos los caracteres, tanto símbolos como distintos alfabetos.

Aunque en el CSS no suelen usarse caracteres raros, hay un caso en que también son necesarios, cuando se utiliza la propiedad content junto con :after y :before

Allí, se usa el mismo criterio aunque sólo es necesario agregar la barra invertida seguida de los cuatro dígitos del código hexadecimal. Por ejemplo:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";

:after ☺ ✤ ☂
:ⓑⓔⓕⓞⓡⓔ

Wifun Icons
	Contiene 30 íconos de distintos tamaños, en formato PNG. descargar

Antes que nadie pregunte: No, esto no tiene ninguna utilidad práctica. No incrementará las visitas, no agregará enlaces entrantes, no hará que un sitio se posicione primero en Google, tenga 456 tweets en 5 minutos ni conseguirá subir los clicks de Adsense para que podamos comprarnos esa isla en las Bahamas. Simplemente es ... un experimento sin consecuencias.

Y para colmo ... largo de escribir:

<style>
/* agregar los prefijos necesarios en las propiedades para que funcione en distintos navegadores */
@keyframes wiggle {
  0% {transform: rotate( -10deg );}
  100% {transform: rotate( 10deg );}
}
div#wiggle {
  left: 50%;
  position: absolute;
  top: 50%;
}
div#wiggle b {
  display: block;
  border-radius: 5%;
  position: absolute;
  transform: rotate(-10deg);
}
div#wiggle b:nth-child(1) {
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms infinite alternate;
}
div#wiggle b:nth-child(2) {
  width: 40px;
  height: 40px;
  left: -20px;
  top: -20px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms infinite alternate;
}
div#wiggle b:nth-child(3) {
  width: 60px;
  height: 60px;
  left: -30px;
  top: -30px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 150ms infinite alternate;
}
div#wiggle b:nth-child(4) {
  width: 80px;
  height: 80px;
  left: -40px;
  top: -40px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite alternate;
}
div#wiggle b:nth-child(5) {
  width: 100px;
  height: 100px;
  left: -50px;
  top: -50px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 250ms infinite alternate;
}
div#wiggle b:nth-child(6) {
  width: 120px;
  height: 120px;
  left: -60px;
  top: -60px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 300ms infinite alternate;
}
div#wiggle b:nth-child(7) {
  width: 140px;
  height: 140px;
  left: -70px;
  top: -70px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 350ms infinite alternate;
}
div#wiggle b:nth-child(8) {
  width: 160px;
  height: 160px;
  left: -80px;
  top: -80px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite alternate;
}
div#wiggle b:nth-child(9) {
  width: 180px;
  height: 180px;
  left: -90px;
  top: -90px;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 450ms infinite alternate;
}
div#wiggle b:nth-child(10) {
  width: 200px;
  height: 200px;
  left: -100px;
  top: -100px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms infinite alternate;
}
div#wiggle b:nth-child(11) {
  width: 220px;
  height: 220px;
  left: -110px;
  top: -110px;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 550ms infinite alternate;
}
div#wiggle b:nth-child(12) {
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 600ms infinite alternate;
}
div#wiggle b:nth-child(13) {
  width: 260px;
  height: 260px;
  left: -130px;
  top: -130px;
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 650ms infinite alternate;
}
div#wiggle b:nth-child(14) {
  width: 280px;
  height: 280px;
  left: -140px;
  top: -140px;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 700ms infinite alternate;
}
div#wiggle b:nth-child(15) {
  width: 300px;
  height: 300px;
  left: -150px;
  top: -150px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
  animation: wiggle 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) 750ms infinite alternate;
}
</style>

<div id="wiggle">
<b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>

REFERENCIAS:codepen.io