Tabla de caracteres Unicode (continuación)

Más caracteres estarfalarios que pueden usarse en una página web.

☀	☀	☁	☁	☂	☂	☃	☃
☄	☄	★	★	☆	☆	☇	☇
☈	☈	☉	☉	☊	☊	☋	☋
☌	☌	☍	☍	☎	☎	☏	☏
☐	☐	☑	☑	☒	☒	☓	☓
☚	☚	☛	☛	☜	☜	☝	☝
☞	☞	☟	☟	☠	☠	☡	☡
☢	☢	☣	☣	☤	☤	☥	☥
☦	☦	☧	☧	☨	☨	☩	☩
☪	☪	☫	☫	☬	☬	☭	☭
☮	☮	☯	☯	☰	☰	☱	☱
☲	☲	☳	☳	☴	☴	☵	☵
☶	☶	☷	☷	☸	☸	☹	☹
☺	☺	☻	☻	☼	☼	☽	☽
☾	☾	☿	☿	♀	♀	♁	♁
♂	♂	♃	♃	♄	♄	♅	♅
♆	♆	♇	♇	♈	♈	♉	♉
♊	♊	♋	♋	♌	♌	♍	♍
♎	♎	♏	♏	♐	♐	♑	♑
♒	♒	♓	♓	♔	♔	♕	♕
♖	♖	♗	♗	♘	♘	♙	♙
♚	♚	♛	♛	♜	♜	♝	♝
♞	♞	♟	♟	♠	♠	♡	♡
♢	♢	♣	♣	♤	♤	♥	♥
♦	♦	♧	♧	♨	♨	♩	♩
♪	♪	♫	♫	♬	♬	♭	♭
♮	♮	♯	♯	♰	♰	♱	♱
✐	✐	✑	✑	✒	✒	✓	✓
✔	✔	✕	✕	✖	✖	✗	✗
✘	✘	✙	✙	✚	✚	✛	✛
✜	✜	✝	✝	✞	✞	✟	✟
✠	✠	✡	✡	✢	✢	✣	✣
✤	✤	✥	✥	✦	✦	✧	✧
❤	❤	✩	✩	✪	✪	✫	✫
✬	✬	✭	✭	✮	✮	✯	✯
✰	✰	✱	✱	✲	✲	✳	✳
✴	✴	✵	✵	✶	✶	✷	✷
✸	✸	✹	✹	✺	✺	✻	✻
✼	✼	✽	✽	✾	✾	✿	✿
❀	❀	❁	❁	❂	❂	❃	❃
❄	❄	❅	❅	❆	❆	❇	❇
❈	❈	❉	❉	❊	❊	❋	❋
❍	❍	❏	❏	❐	❐	❑	❑
❒	❒	❖	❖	❘	❘	❙	❙
❚	❚	❛	❛	❜	❜	❝	❝
❞	❞	❡	❡	❢	❢	❣	❣
❥	❥	❦	❦	❧	❧	✁	✁
✂	✂	✃	✃	✄	✄	✆	✆
✇	✇	✈	✈	✉	✉	✌	✌
✍	✍	✎	✎	✏	✏

REFERENCIAS:Tabla de caracteres Unicode

Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.

leer artículo actualizado

Lo más probable es que esto no sirva absolutamente para nada pero no importa, como logré que funcione, es suficiente para ponerlo. Además, es una curiosidad divertida.

Reel es un plugin para JQuery que, dada una imagen, puede mostrar una secuencia animada similar a la que podría mostrarse con otro tipo de lenguajes. Por supuesto, no se trata de otra cosa que una simulación y hacer algo así es más que excesivo ya que necesitamos crear la imagen gigante que luego será mostrada en partes, sea esta un panorama de 360º o una rotación que es el ejemplo que incluyo en esta entrada: una imagen "pesadita" de 1656 x 756, ideal para los que se preocupan por las velocidades.

No pienso explicarlo simplemente porque no tiene mucho sentido pero, si alguien quiere experimentar, puede descargar el demo completo desde la página del autor donde estan los scripts y todos los ejemplos disponibles.

¿Cómo funciona? Simplemente moviendo el ratón dentro de la imagen o utilizando la rueda de desplazamiento si tenemos una:

PACIENCIA QUE LA IMAGEN PUEDE TARDAR

Eggbert Casanova by Rerinha	Suicide OREO by Rerinha
Vampire egg by partyeskimo	The Cola wars by caycowa
OMG by Ytse80	You’re toast by cake-monster

Click para ver las imágenes.

REFERENCIAS:designzzz.com

Este es otro experimento de Nicolas Gallagher. Se trata de crear íconos a diferentes redes sociales pero, usando sólo CSS.

La idea es simple pero claro, las definiciones de cada modelo son muy complejas y sólo tienen como objeto destacar las cualidades de las nuevas propiedades del CSS3.

El HTML es una lista común:

<ul id="typo">
<li id="Trss"><a href="javascript:void(0);" title="Suscribirse via RSS ">RSS</a></li>
<li id="Ttwitter"><a href="javascript:void(0);" title="Compartir en Twitter">Twitter</a></li>
<li id="Tfacebook"><a href="javascript:void(0);" title="Compartir en Facebook">Facebook</a></li>
</ul>

Y ahora, las definciones. Primero que nada, las generales:

ul#typo {
font: 0.875em/1 Arial, sans-serif;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#typo li {
float: left;
height: 66px;
margin: 20px 20px 0 0;
width:66px;
}
ul#typo li a {
border: 1px solid transparent;
display: block;
height: 64px;
overflow: hidden;
line-height: 64px;
text-decoration: none;
width: 64px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul#typo li a:hover, ul#typo li a:focus, ul#typo li a:active {
border-color: #000;
opacity: 0.8;
}

La parte sofisticada es la creación de cada uno de esos íconos y aquí hay tres ejemplos.

• RSS
• Twitter
• Facebook

#Tfacebook a {
position:relative;
border-color:#3c5a98;
text-transform:lowercase;
text-indent:34px;
letter-spacing:10px;
font-weight:bold;
font-size:64px;
line-height:66px;
color:#fff;
background:#3c5a98;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4);
}

#Ttwitter a {
position:relative;
border-color:#a8eaec;
text-transform:lowercase;
text-indent:20px;
letter-spacing:40px;
font:bold 60px/1 Tahoma, sans-serif;
line-height:60px;
color:#76DDF8;
background:#daf6f7;
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#dbf7f8), to(#88e1e6));
background:-moz-linear-gradient(top, #dbf7f8, #88e1e6);
background:linear-gradient(top, #dbf7f8, #88e1e6);
}

#Trss a {
position:relative;
width:60px;
padding:0 2px;
border-color:#ea6635;
text-transform:lowercase;
text-indent:-186px;
font-size:64px;
font-weight:bold;
color:#fff;
background:#e36443;
-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443));
background:-moz-linear-gradient(top, #f19242, #e36443);
background:linear-gradient(top, #f19242, #e36443);
}
#Trss a:before {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:12px;
height:12px;
background:#fff;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#Trss a:after {
content:"\00a0";
position:absolute;
bottom:10px;
left:10px;
width:22px;
height:22px;
border-style:double;
border-width:24px 24px 0 0;
border-color:#fff;
-moz-border-radius:0 50px 0 0;
-webkit-border-radius:0 50px 0 0;
border-radius:0 50px 0 0;
}

Pese a que este artículo de El MicoX fue publicado hace ya varios años, no deja de ser muy interesante y una técnica útil. Se trata de cargar archivos de JavaScript de manera condicional, es decir, sólo cuando nosotros queremos y, de esta manera, aliviar la carga general de nuestro sitio.

Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.

La teoría de esto es muy simple, sólo requerimos un poco de código:

<script type='text/javascript'>
//<![CDATA[
function include(archivo) {
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>

Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.

Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador.

¿Qué se necesita hacer?

Primero que nada el script que, podemos agregarlo directamente en una entrada:

<script type='text/javascript' src='URL_tomorrowagain.js' ><script>

O podemos agregarlo a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>

Luego, el CSS con estas definiciones mínimas:

<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}

/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx; 
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* la  imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>

En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.

Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:

<div id="screen">
<img class="panel" src="URL_imagen1">
<img class="panel" src="URL_imagen2">
<!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar -->
</div>
<img id="imagenREAL" src="URL_imagen1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.

El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.

El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.