Dos packs de íconos hechos a mano

Sketchy web icons
	Contiene 28 íconos de 128x128, en formato PNG.descargar

Sketchy Social Media
	Contiene 72 íconos de diversos tamaños, en formato PNG.descargar

En este ejemplo se utilizan tres propiedades crear tres bordes diferentes alrededor de una imagen o un párrafo cualquiera. De adentro hacia a fuera: padding, border y outline:

<style>.
outline {
display: block;
margin: 0 auto;
border: 1px solid #779;
outline: 1px solid #CCE;
padding: 4px;  /* tendrá el color de fondo o agregamos background-color:VALOR; */
}
</style>
<img class="outline" src="URL_imagen" />

Un poco más complejo. Dentro de un DIV colocamos una etiqueta SPAN y luego un párrafo en una etiqueta P. El DIV lo posicionamos de manera relativa para que su contenido pueda ser posicionado de manera absoluta. La etiqueta SPAN la dimensionamos y allí le ponemos como fondo, una gradiente para todos los navegadores. El párrafo lo posicionamos de manera relativa, separándolo del SPAN mediante la propiedad top y le ponemos un borde:

<style>
.gradiente {
margin: 20px auto;
position: relative;
width: 500px;
}
.gradiente span {
height: 10px;
position: absolute;
width: 100%;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
border-radius-topleft: 10px;
background-image: -moz-linear-gradient(100% 100%  180deg, #101921, #885555);
background-image: -webkit-gradient(linear, left bottom, right top, from(#101921), to(#444F5A));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF885555', EndColorStr='#FF101921');
}
.gradiente p {
border-left: 10px solid #855;
margin: 0;
padding: 10px;
position: relative;
top: 10px;
}
</style>
<div class="gradiente">
<span></span>
<p> ... el contenido ... </p>
</div>

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

Un ejemplo sencillo de sohtanaka.com para agregar sombras suaves:

<style>
.shadow {
background-color: #444;
border-color: #555 #777 #777 #555;
border-style: solid;
border-width: 1px 2px 2px 1px;
margin: 0 auto;
padding: 20px;
width: 500px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.shadow h2 {
color: #EEE;
font: 2em Georgia,serif;
margin: 0;
padding: 0
}
</style>
<div class="shadow">
<h2>El Título</h2>
<p> ... el contenido ... </p>
</div>

Light Shadow

Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

En JavaScript, una variable es un "cajoncito" donde guardamos algo y al que le damos un nombre para saber cuál es cual ¿Qué podemos guardar?, casi cualquier cosa; así, yo puedo decir que:

var midato = 2;

y guardo un valor o bien:

var midato = "Nombre y Apellido"

y guardo un texto.

Son variables porque puedo ir cambiando su contenido y en algún momento, puedo poner que:

midato = midato + 100;

y el cajoncito ahora contendrá el valor 102, o bien:

midato = midato + " : Fulano de Tal";

y el cajoncito ahora contendrá el valor "Nombre y Apellido : Fulano de Tal"

Siempre, las defino al principio para evitar que algunos navegadores como Internet Explorer no las reconozcan cuando las vayamos a usar o "las declaro" colocando el nombre sin ningún valor:

var midato;

y si tengo varias, las separo con comas:

var midato, otrodato, utlimodato;

Es importante entender que JavaScript es sensible a minúsculas y mayúsculas así que estas tres variables, serán diferentes:

var midato, MIDATO, MiDato;

Como en las variables podemos poner casi cualquier contenido, una de las cosas que normalmente podemos usar son objetos como las etiquetas HTML. Podría parecer confuso pero, para decirlo de manera simple: un objeto es ... como un objeto. Una mesa es un objeto y como tal tiene propiedades, es de madera o de metal, tiene una cierta altura, un color; lo mismo ocurre con las etiquetas HTML, de alguna forma, son objetos rectangulares que tienen propiedades, un ancho, un alto, un color de fondo, están en cierta posición de nuestra página; y así como podemos modificar algunas propiedades de una mesa, también podemos modificar alguas propiedades de las etiquetas pero, como las computadoras no piensan, para hacer eso, debemos indicarles con exactitud a cual nos estamos refiriendo.

Por ejemplo, en una página web puede haber muchas etiquetas DIV y si nosotros queremos usar JavaScript para cambiar algo de uno de ellos, debemos identificarlo con claridad. Para eso existe el atributo ID que nos sirve para darle un nombre exclusivo a una etiqueta cualquiera de tal modo que podamos manipularla:

<div id="contenedor"> ... el contenido ... </div>

El ID nos permitirá darle propiedades con CSS:

#contenedor {}

pero también nos permitirá acceder a él desde JavaScript y para eso ya hay una función interna que nos ayuda:

document.getElementById("nombre_ID")

así que podría usarlo de este modo, guardándolo en una variable:

var micontenedor = document.getElementById("nombre_ID");

o leer sus propiedades de estilo con algo así:

document.getElementById("nombre_ID").style.PROPIEDAD

donde la PROPIEDAD tiene una sintaxis similar a la que usamos en CSS: color, width, height, display con algunas variantes cuando esas propiedades tienen nombres compuesto, por ejemplo a background-color se accede con backgroundColor y a padding-left se accede con paddingLeft; en general, eliminando ese guión y comenzando la segunda palabra con mayúsculas.

Quiere decir que si yo quiero saber cuál es el color y el ancho de esa etiqueta, escribiría esto:

elColor = document.getElementById("contenedor").style.color;
elAncho = document.getElementById("contenedor").style.width;

y usamos las variables para simplificar el código:

var elColor, elAncho;
var micontenedor = document.getElementById("contenedor");
elColor = micontenedor.style.color;
elAncho = micontenedor.style.width;

Asi como las leo, tambien puedo escribirlas:

micontenedor.style.color = "#F00"; // establecerá rojo como color
micontenedor.style.width ="300px"; // hará que tenga 300 pixeles de ancho

Esta es la idea básica que usamos cuando queremos tener una etiqueta cuyo contenido mantenemos oculto hasta que se hace click; permutamos una de sus propiedades (display) y lo hacemos con una función. Para el ejemplo, necesitamos un enlace que ejecute esa función y un DIV que de entrada, mantenemos oculto:

<a href="javascript:permutardisplay('contenedor');"> click acá para permutar de estado </a>
<div id="contenedor" style="display:none;"> ... el contenido ... </div>

Al hacer click, se ejecutará una función llamada permutardisplay a la que le enviaremos el nombre (el ID) de la etiqueta que queremos modificar. Esa función podría ser algo como esto:

<script>
function permutardisplay(cual) {
  // en una variable, guardo la etiqueta
  var micontenedor = document.getElementById(cual);
  // uso una condición; le pregunto ¿esa etiqueta es visible?
  if (micontenedor.style.display == "block") {
    // si la respuesta es SI (true) le cambio la propiedad y la oculto
    micontenedor.style.display = "none";
  } else {
    // en caso contrario, como la respuesta es NO (false) le cambio la propiedad y la hago visible
    micontenedor.style.display = "block";
  }
}
</script>

click acá para permutar de estado

... este es el contenido ...

Cada vez que haga click, el resultado de la condición cambiará y por lo tanto, si la etiqueta está oculta se mostrará y si esta visible se ocultará.

Esa es la utilidad de las funciones, permiten tener un solo código para ejecutar cosas similares; en este caso, usando la misma, indicándoles sobre cuál DIV actuar, permutamos tres DIVs diferentes:

<a href="javascript:permutardisplay('contenedor_1')">1</a>
<a href="javascript:permutardisplay('contenedor_2')">2</a>
<a href="javascript:permutardisplay('contenedor_3')">3</a>
<div id="contenedor_1" style="display:none;"> ... el contenido del ejemplo 1 ... </div>
<div id="contenedor_2" style="display:none;"> ... el contenido del ejemplo 2 ... </div>
<div id="contenedor_3" style="display:none;"> ... el contenido del ejemplo 3 ... </div>

1 | 2 | 3

... el contenido del ejemplo 1 ...

... el contenido del ejemplo 2 ...

... el contenido del ejemplo 3 ...

Colorzilla es una de las extensiones más populares de Firefox y si bien no tiene una versión para Chrome, hay una extensión similar para ese navegador, llamada Eye Dropper.

Lo que hace es agregar un selector de colores. Haciendo click en el ícono que se agrega en al barra de estado, podemos recorrer cualquier página web e inspeccionar los colores que se nos mostrarán en los diferentes formatos que existen; de esta manera, se nos hace sencillo agregarlos en nuestros propios proyectos.

Con el botón derecho sobre el ícono, accedemos a diferentes opciones tales como paletas, análisis de los colores de la página o la posibilidad de guardar esas paletas para utilziarlas posteriormente.

Recientemente le han agregado una nueva herramienta online: un generado de gradientes al que podemos acceder sin necesidad de instalar la extensión. Allí ya hay varias gradientes predefinidas pero podemos crear cualquier otra, agregando colores, establecendo la orientación, tamaño, etc

El resultado, lo vamos previsualizando contantemente y además, nos muestran las propiedades CSS necesarias para incluirlos.

Es muy interesante que hayan pensando en darle soporte a Internet Explorer que, pese a que aún no admite las mismas propiedades de estilo, tiene un filtro que las asemeja bastante aunque el resultado final dependerá de cada caso en particular. Para eso, hay una casilla que podemos marcar o demarcar y que nos mostrará el resultado previsto para ese navegador.

Un ejemplo cualquiera nos dará algo como esto:

background: #cedbe9; /* old browsers */

background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 9%, #6199c7 18%, #3a84c3 44%, #419ad6 55%, #4bb8f0 67%, #3a8bc2 84%, #26558b 100%); /* firefox */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cedbe9), color-stop(9%,#aac5de), color-stop(18%,#6199c7), color-stop(44%,#3a84c3), color-stop(55%,#419ad6), color-stop(67%,#4bb8f0), color-stop(84%,#3a8bc2), color-stop(100%,#26558b)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* ie */

Así que lo aplicamos a un DIV cualquiera tal como usamos un color de fondo:

este es un ejemplo

Los archivos SWF o "de Flash" son muy comunes y fáciles de agregar en cualquier blog pero, parece que siempre causan stress pese a que cualquiera que haya agregado un video de YouTube en su sitio, ya ha agregado un archivo SWF porque el reproductor es eso mismo, un archivo de Flash.

Para que funcione bien sólo debemos conocer tres cosas: la dirección URL, el ancho y el alto. El primero de esos datos es el que suele causar estragos porque, como en Blogger no podemos alojar archivos, es común que todos los problemas surjan al utilizar servicios externos que sirven para guardar archivos pero que no nos permiten enlazarlos desde una página web (hotlink); hay muchos sitios que los admiten, en lo personal, utilizo dos: Fielden y DropBox; en cualquier caso, sea el servicio que sea, es importante verificar que ofrezcan anchos de banda suficientes porque estos archivos suelen ser "pesados" y consumen bastante.

El tamaño es complicado de establecer. Hay un software de escritorio gratuito llamado Swiff Player que nos da esa información y que además es un reproductor independiente de este tipo de archivos. Sino, habrá que usar el viejo sistema del ojo, capturar la pantalla, etc etc etc.

El código elemental para insertar un archivo de Flash es este:

<object type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto">
<param name="movie" value="URLarchivo.swf" />
</object>

Eso es todo; no hace falta utilizar la etiqueta EMBED que suele causar problemas y que es una etiqueta obsoleta y no reconocida por la w3.org

Antiguamente, se usaban atributos como classid o codebase pero hace tiempo que son una reliquia innecesaria; en la etiqueta OBJECT, basta agregar el atributo type.

En Blogger, la URL siempre comienza con el protocolo http:// y se coloca en dos atributos diferentes porque Internet Explorer utiliza una y el resto de los navegadores la otra. Como decía antes, este es el detalle que provoca el error en la gran mayoría de los casos. Para verificar que sea correcta, basta copiarla y pegarla en al barra de direcciones del navegador. Si todo esta bien, veremos el SWF funcionando; caso contrario, veremos una página web o un mensaje de error.

Un detalle a tener en cuenta es que en ciertos servicios se nos permite tener archivos de acceso público o privado y para usarlos en una web siempre deben ser públicos. Es común que a veces, nos parezca que funcionan porque nosotros los vemos pero no los ven los visitantes. Seguramente estamos logueados en nuestra cuenta así que hay que estar atentos a ese detalle.

width indica el ancho y height indica el alto. Ambos, se miden en pixeles pero, eventualmente, pueden usarse porcentajes. Si bien es cierto que este tipo de archivo admite que esos valores sean varaibles y en teoría, la animación se redimensionará casi sin perder definición, esto no siempre es posible. Algunos SWFs tienen tamaños fijos o tamaños máximos y mínimos establecidos por lo tanto, cualquier intento de redimensionarlos, ampliará el rectángulo de la etiqueta pero no la película en si misma y quedarán espacios vacios.

OBJECT admite más atributos como ID, ALIGN o STYLE que son los mismos que se usan con cualquier otra etiqueta. La etiqueta PARAM se usa para agregar atributos especficos. A mi juicio, hay dos que deberían agregarse siempre:

<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />

El primero, indica el modo en que se mostrará el SWF; poniendo transparent, resolvemos la mayoría de los problemas que se presentan cuando se producen superposiciones. De todas maneras, admite otros dos valores: window y opaque.

El segundo, habilita la ejecución de acciones que contenga el SWF (por ejemplo, un menú o algunos juegos).

Así que, el código que utilizo por defecto es algo así:

<object type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto">
<param name="movie" value="URLarchivo.swf" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
</object>

Todas las opciones de PARAM se escriben del mismo modo, la sintaxis general es:

<param name="NOMBRE" value="VALOR" />

Por ejemplo:

• play indica si se ejecuta de modo automático que es el valor por defecto (true) o no (false)
• loop indica si se reproduce de manera indefinida (true) o no (false)
• menu lo utilizamos para definir el modo del menú contextual que se abre cuando hacemos click con el botón derecho; con true se muestra completo y con false se muestra con las opciones mínimas
• quality es la que nos permite establecer la calidad por defecto; puede ser low, high, autolow, autohigh o best
• scale por defecto tiene el valor showall que es el que hace que veamos la animación sin distorsiones cuando lo redimensionamos; otros valores son noborder, exactfit y noscale.

Todas ellas es difíciil que las necesitemos pero, estas dos últimas suelen verse con más regularidad:

• bgcolor indica el color de fondo de la animación si es que esta es transparente. Se indica como cualquier otro color, en formato #RRGGBB
• flashvars es el atributo que se utiliza para transferirle datos a la animación y es algo que veremos en muchos reproductores de audio

Quienes usen LighthWindow o algún otro script que genere ventanas modales pueden abrir archivos SWF en ese tipo de ventanas lo que tiene dos ventajas; la primera es que no tendremos problemas para mostrar animaciones que sean más grandes que el espacio disponible en nuestras entradas y la segunda, que no se cargarán hasta que un usuario las abra con lo que que la velocidad de carga de nuestro sitio no se verá afectada en absoluto.

REFERENCIAS:adobe.com

Las transparencias están de moda y con variantes, pueden usarse en todos los navegadores. Una de las nuevas posibilidades del CSS3 es el uso de "transparencias" en los colores y para eso existe una forma especial de escribir esos valores.

Un color dado, puede ser expresado en diferentes formatos; por ejemplo, el color rojo:

color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;

A estas posibilidades, se le sumaron dos más, el llamado rgba() (Red Green Blue Alpha):

color: rgba(255,0,0,1);

y el formato llamado hsla() (Hue Saturation Lightness Alpha)

color: hsla(0,100%,50%,1);

Si los usamos, todos se verán iguales porque son el mismo color pero los dos últimos son ignorados en Internet Explorer ya que, por ahora, no admite estos formatos.

Sin embargo, IE dispone de filtros que podemos usar para tratar de equiparar las cosas y con ellos, simular el formato rgba().

El filtro que debemos usar es gradient ya que, el color de inicio y color final, admiten un cuarto valor que es, justamente, el valor de alpha o sea, la transparencia. La propiedad tiene esta sintaxis:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#VALOR,endColorstr=#VALOR);

Normalmente, los valores que pondríamos son dos diferentes para que se creara una gradiente de colores pero, nada impide poner el mismo color en ambos; esto, lo mostraría todo rojo:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000,endColorstr=#FF0000);

Y, como acepta un cuarto valor hexadecimal (entre 00 y FF) que indica la transparencia, podríamos poner esto para que sea equivalente a un 50% de opacidad:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF0000,endColorstr=#80FF0000);

Supongamos un color cualquiera como #FF8000; podemos usar el mismo color con diferentes transparencias; por ejemplo, este es el color "normal":

background-color:rgba(255,128,0,1)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF8000,endColorstr=#FFFF8000);

y este es el mismo color con un 50% de transparencia:

background-color:rgba(255,128,0,0.5)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF8000,endColorstr=#80FF8000);

Aquí vemos una serie de rectángulos que usan ese sistema, todos tienen el mismo color y lo que va variando es su opacidad:

Lo podemos aplicar como cualquier otro efecto aunque los filtros de IE están limitados a bloques, es decir, etiquetas que tengan una dimensión y no pueden usarse en etiquetas inline:

efecto onmouseover

<style>
a.demoRGBA {
background-color: #FFFF00; /* el color de fondo "normal" */
border: 5px solid #FF0000;
color: #00A0FF;
display: block;
margin: 0 auto;
font-size: 20px;
padding: 10px;
text-align: center;
width: 250px;
}
a.demoRGBA:hover {
color: #FFF;
/* el color de fondo transparente para IE */
background-color: transparent;
/* el color de fondo usando rgba() */
background-color: rgba(255, 255, 0, 0.5);
/* el filtro de IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFF00,endColorstr=#80FFFF00);
}
</style>

<a class="demoRGBA" href="#">efecto onmouseover</a>