Social Icon Set by oxanaart

Social Icon Set by oxanaart
	Contiene 120 íconos de 64x64, 128x128 y 256x256, en formato PNG.descargar

REFERENCIAS:Shuatas

MpppIt es un buscador de archivos MP3 que se identifica a si mismo como Super Simple y realmente lo es; basta poner el nombre del tema o el intérprete o cualquier otra cosa que se nos ocurra para que aparezca una lista y un reproductor que ejecuta automáticamanete el primer resultado.

Haciendo click en cualquier item de la lista, cambiamos de tema o seguimos buscando.

El reproductor funciona perfectamente y además de los controles usuales posee dos botones extras:

Upload to Dropbox nos permitirá subir el tema directamente a nuestra cuenta para lo cual usa el sistema de autentificacion del mismo DropBox que es un método similar al que usa Twitetr para aceptar aplicaciones de terceros. Esto no lo he probado porque en general no me gusta autorizar accesos que a veces son un poco vagos en cuanto a sus condiciones. Para más información puede verse el blog del sitio aunque poco dicen.

Direct Link nos da el enlace directo así que con ese botón, podemos descargarlos y los subimos nosotros mismos.

REFERENCIAS:wwwhatsnew.com

css3.me es otro de esos sitios que nos ayudan a crear reglas de estilo, fundamentalmente, aquellas que suelen ser complejas de entender tales como sombras o gradientes.

Lo interesante de este es que incluye las necesarias para que funcione en versiones de Internet Explorer anteriores a la 9 siempre y cuando puedan ser "traducidas" a filtros.

Podemos jugar un rato e ir previsualizando los resultados hasta que nos decidamos por alguno y luego, basta hacer click en Get the code para que podamos copiarlo. Ver/Ocultar [+]

background-color:#ffffff;
border-width:2px;
border-color:transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:inset 0px 0px 20px #000000;
-webkit-box-shadow:inset 0px 0px 20px #000000;
box-shadow:inset 0px 0px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE DOES NOT SUPPORT INSET SHADOWS*/
background: -moz-linear-gradient(left, #000000, #85a1ff);
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#85a1ff));
background: -o-linear-gradient(left, #000000, #85a1ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(left, #000000, #85a1ff);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
/*All filters must be placed together*/

Luego, podemos usarlo en cualquier tipo de regla, por ejemplo, en una clase:

.miejemplo {
....... y aquí pegamos el código .......
}

Obviamente, podemos editarlo u optimizarlo; por ejemplo, en este caso podríamos eliminar el borde, eliminar los prefijos de algunas propiedades que ya son innecesarios tales como -moz-border-radius, -webkit-border-radius, -moz-box-shadow o -webkit-box-shadow ya que los neuvos navegadoree aceptan las propiedades border-radius y box-shadow; etc.

Faltaría recordar que para que ciertas propiedades tengan efecto, las etiquetas donde son agregadas deben ser dimensionadas mediante width y height.

Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:

<div id="demoANIM2">
  <div id="demoANIM2imagenes">
    <img id="img_1" src="URL_IMAGEN1" class="visible" />
    <img id="img_2" src="URL_IMAGEN2" class="novisible" />
    <img id="img_3" src="URL_IMAGEN3" class="novisible" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img id="img_7" src="URL_IMAGEN7" class="novisible" />
  </div>
</div>
<div id="demoANIM2links">
  <a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a>
</div>

La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style>
  #demoANIM2 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM2imagenes img { /* las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM2imagenes img.visible { /* la imagen es visible */
    opacity:1;
    filter: alpha(opacity=100);
  }
  #demoANIM2imagenes img.novisible {  /* la imagen está oculta */
    opacity:0;
    filter: alpha(opacity=0);
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM2links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM2links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM2links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>

Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:

<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_1";

function srcdemoANIM2(num) {
  // la imagen a ser mostrada
  var id = "img_" + num;
  var mostrar = document.getElementById(id);
  // la que ahora esta visible
  var actual = document.getElementById(imgvisible);
  // si son la misma no hago nada
  if(mostrar==actual) {return false;}
  // permutos su clase ocultando la visible y mostrando otra
  actual.className="novisible";
  mostrar.className="visible";
  // y guardo ese dato
  imgvisible = id;
}
//]]>
</script>

En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.

1234567

Toda etiqueta es un rectángulo que se ubica ya sea uno al lado del otro o uno debajo del otro. Esto siempre es así salvo excepciones ... como todo.

Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles: position y z-index.

Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative y absolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:

<div style="position: relative;">
  <div style="position: absolute;"> HOLA </div>
</div>

HOLA

Así como está, no parece haber diferencias, si le quitamos as propiedades, se verá igual porque nos falta algo más, agregarle las que nos permitirán ubicarlo con exactitud y estas son top, right, bottom y left que son las "coordenadas" cuyo punto de origen es el borde del contenedor asi que si ponemos left: 30px y top: 50px, el contenido bajará 50 pixeles (borde superior = cero) y se movera otros 30 a la izquierda (borde izquierdo = cero):

<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div>
</div>

HOLA

Y si ponemos right: 30px y bottom: 50px, el contenido subirá 50 pixeles (borde inferior = cero) y se movera otros 30 a la derecha (borde derecho = cero):

<div style="position: relative;">
  <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div>
</div>

HOLA

De este modo, bien podríamos ubicar más de un contenido:

<div style="position: relative;">
  <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div>
  <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div>
</div>

CONTENIDO UNO

CONTENIDO DOS

En el ejemplo, dadas las ubicaciones, el segundo se superpone al primero y aparece por encima ya que esa es la forma normal en que se muestran los rectángulos; a medida que los agregamos, se van "apilando" y la propiedad z-index permite cambiar ese orden natural.

Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div>
</div>

CONTENIDO UNO

CONTENIDO DOS

CONTENIDO TRES

Hasta ahí son rectángulos de colores pero el contenido puede ser cualquier cosa; por ejemplo textos y si estos textos no tienen fondos de color, también se superpondrán:

este es un texto

y este es otro

Mezclamos entonces varias propiedades y si es necesario, pueden verse algunas ideas básicas en webdesignerdepot.com.

<style>
#superponer {
  position: relative;
  text-align: center;}
#superponer h5 {
  color: #D0D9E1;
  font-family: Georgia;
  font-size: 140px;
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  -webkit-transform: skew(20deg);
}
#superponer h6 {
  color: #4682B4;
  font-family: Verdana;
  font-size: 60px;
  left: 120px;
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 20px;
}
#superponer h6 span {
  color: #F66;
  font-family: Times New Roman;
  font-size: 100px;
  font-style: italic;
  text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);zoom:2;
}
</style>

<div id="superponer">
  <h5> un título </h5>
  <h6> eje <span> m </span> plo </h6>
</div>

un título

ejemplo

Social Media by Digital Art Empire
	Contiene 37 íconos de 64x64, 128x128, 256x256 y 512x512, en formato PNG.descargar