Social Media Icons

JMiur [E]

3D black and white
	Contiene 41 íconos de 32x32 y 48x48, en formato PNG. descargar

Yammy Social Media
	Contiene 30 íconos de 64x64 y 128x128, en formato PNG. descargar

Sobre resúmenes e imágenes desproporcionadas

Son muchos los que utilizan alguna clase de plantilla o tiene un sitio donde las entradas del home se muestran resumidas, adornadas con una imagen. También son muchos los que preguntan ¿cómo puedo hacer para que esas imágenes no se deformen?

La respuesta a eso es sencilla y no le gusta a nadie: no se puede.

No se puede porque si usamos etiquetas IMG y las re-dimensionamos, cosa que podemos hacer con width y height tanto en el CSS como con atributos en la misma etiqueta, la imagen se mostrará con esa dimensión; como una es más alta que ancha, el pobre patito "engordará".

¿Qué pasa en los resúmenes? Imaginemos algo así:

<div class="demoresumen">
  <div>
    <img src="una_imagen"/>
    <p> ... un texto ... </p>
  </div>
  <!-- etc etc etc -->
  <div>
    <img src="una_imagen"/>
    <p> ... un texto ... </p>
  </div>
</div>

Con este estilo:

<style>
.demoresumen {margin: 0 auto; overflow: hidden; width: 480px;}
.demoresumen div {border: 1px solid #444; float: left; height: 240px; margin: 5px; width: 225px;}
.demoresumen p {font-size: 11px; margin: 0; padding: 10px;}
.demoresumen img {display: block; height: 160px; margin: 10px auto 0; width: 200px;}
</style>

Veríamos algo así:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Para que una imagen se re-dimensione sin perder sus proporciones debemos establecer una y solo una de las dimensiones, dejando que la otra sea calculada por el navegador; en este caso, basta con eliminar height o colocar height: auto; pero, obviamente, con este método, toda la estructura se desquicia ya que habrá rectángulos mas altos que otros y si estamos dimensionando la altura del contenedor y usando overflow:hidden, se cortará.

height: auto | overflow:hidden | restaurar

¿Podemos hacer que la imagen del pato se muestre sin deformarse? Si pero no. Una forma de hacerlo es colocarla dentro de un contenedor, dimesionarlo y usar overflow; es decir, "cortar" lo que sobre; en lugar de:

<img src="una_imagen"/>

pondríamos algo así:

<span><img src="una_imagen"/></span>

y cambiaríamos las reglas de estilo:

.demoresumen span {display: block;height: 160px;margin: 10px auto 0;overflow: hidden;width: 200px;}
.demoresumen img {width: 200px;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

Tampoco resuelve demasiado.

Si estamos buscando opciones sencillas, lo ideal es que las imágenes que vamos a utilizar mantengan siempre una proporción adecuada y listo; ese tipo de plantilla ha sido pensada para eso; caso contrario, deberíamos olvidarnos de lo que tenemos y pasar a alguna estructura de mosaico usando CSS3 lo que impedirá que se muestre correctamente en ciertos navegadores o agregando algún script que maneje ese tipo de solución.

Una alternativa intermedia es usar un poco de CSS que no resolverá el problema pero mitigará los efectos. Para esto, debemos olvidarnos de la etiqueta IMG y colocar la imagen como fondo. Otra vez, en lugar de:

<img src="una_imagen"/>

pondríamos algo así:

<span style="background-image:url(una_imagen)"></span>

Y es esa etiqueta con la imagen de fondo la que podemos manipular un poco mediante las propiedades background; por ejemplo:

.demoresumen span {
  display: block;
  height: 160px;
  margin: 10px auto 0;
  width: 200px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy ...

La imagen se cortará pero, podemos establecer donde; en el ejemplo, eso se hace con background-position y los valores 50% 50% indican que se coloque en el medio pero puede ser cualquier otro valor.

La otra propiedad que podemos usar es background-size aunque esta, sólo se aplicará en navegadores modernos y, básicamente, tiene tres valores:

background-size: contain | background-size: cover | background-size: auto

En resumen, no hay soluciones perfectas y por eso comencé diciendo que la respuesta a la pregunta es no, no se puede porque es imposible mantener las proporciones de una imagen si lo que estamos haciendo es cambiando esas proporciones. El problema, termina siendo una contradicción en si misma.

Iconos para HTML y controles varios

Múltiples fondos y efectos hover

Esta es una forma muy particular de utilizar fondos múltiples para crear efectos hover; algo que se le ocurrió a designshack.net donde la técnica está explicada en detalle.

Lo básico es saber que con las nuevas características del CSS3, una etiqueta cualquiera puede tener varios fondos (varias propiedades background) y cada una de ellas puede ser controlada de modo individual. La sintaxis d esto es exactamente igual que la tradicional y los distintos valores, se separan con comas así que una regla como esta, agregaría dos imágenes distintas al mismo contenedor:

#ejemplo {
  background-image: url(imagen_1), url(imagen_2);
  background-position: left 50%, right 50%;
  background-repeat: no-repeat;
  background-color: red;
}

la primera estará a la izquierda, la segunda a la derecha; ambas centradas verticalmente; ninguna de ellas se repetirá y el fondo "sobrante" será de color rojo.

Entendiendo cómo funciona esto de los fondos múltiples y que su posición puede controlarse con background-position, supongamos que tenemos un contenedor que mide 200x200 al que le coloco tres imágenes de fondo; las dos primeras son las que veré por defecto (imagen_fondo) y la tercera es la que permanecerá oculta hasta poner el cursor encima (imagen_oculta).

#ejemplo {
  display: inline-block;
  height: 200px;
  width: 200px;
  transition: all 1s; /* con prefijos para los distintos navegadores */
  background-image: url(imagen_fondo), url(imagen_fondo), url(imagen_oculta);
  background-repeat: no-repeat;
  /* background-position: ???????; */
}

Para que esto funcione, un poco de aritmética. Si queremos que se "abra" horizontalmente:

background-position: -100px 0px, 100px 0px, 0 0;

y si queremos que se "abra" verticalmente:

background-position: 0 -100px, 0 100px, 0 0;

Y la regla del hover sería:

#ejemplo:hover {background-position: -200px 0px, 200px 0px, 0 0;}

o bien:

#ejemplo:hover {background-position: 0 -200px, 0 200px, 0 0;}

Del mismo modo, agregando más fondos, se obtienen distintos efectos:

<style>
.hoverDot {
  display: inline-block;
  height: 200px;
  margin: 10px;
  width: 200px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

#slidingDoors {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px 0px, 100px 0px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoors:hover {
  background-position: -200px 0px, 200px 0px, 0 0;
}

#slidingDoorsVert {
  background-image: url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: 0 -100px, 0 100px, 0 0;
  background-repeat: no-repeat;
}
#slidingDoorsVert:hover {
  background-position: 0 -200px, 0 200px, 0 0;
}

#breakApart {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
}
#breakApart:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
}

#twistAndShout {
  background-image: url(fondo.png), url(fondo.png), url(fondo.png), url(fondo.png), url(imagen.jpg);
  background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0 0;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}
#twistAndShout:hover {
  background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0 0;
  transform: rotate(0deg);
}
</style>

<div class="hoverDot" id="slidingDoors"></div>
<div class="hoverDot" id="slidingDoorsVert"></div>
<div class="hoverDot" id="breakApart"></div>
<div class="hoverDot" id="twistAndShout"></div>

Botones simples con CSS

Estos botones son sencillos de armar y el CSS se puede descargar desde la página del autor, usarlos total o parcialmente o modificarse a gusto.

En principio, funcionarían en cualquier navegador incluyendo versiones viejas de Internet Explorer aunque faltaría agregarles las propiedades para Opera y sería mejor eliminar aquellas que ya no son necesarias tales como -webkit-border-radius, -moz-border-radius, -webkit-box-shadow o -moz-box-shadow

Además, sería conveniente modificar la sintaxis de las gradientes utilizadas en Chrome para que sean iguales al resto de los navegadores; por ejemplo:

-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f0f0f0));

se transformaría en esto:

-webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);

El HTML es genérico, se scribe siempre igual:

<a class="button white" href="#">ejemplo</a>

ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo

Este es el CSS de uno de los botones:

.button { /* clase general */
  border: 1px solid #dedede;
  border-radius: 3px;
  color: #555;
  display: inline-block;
  font: bold 12px/12px HelveticaNeue, Arial;
  padding: 8px 11px;
  text-decoration: none;
}

.button.white{
  background: #f5f5f5;
  border-color: #dedede #d8d8d8 #d3d3d3;
  box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
  color: #555;
  text-shadow: 0 1px 0 #fff;
  background: -moz-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: -webkit-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: o-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: ms-linear-gradient(top,  #f9f9f9, #f0f0f0);
  background: linear-gradient(top,  #f9f9f9, #f0f0f0);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f0f0f0');
}

.button.white:hover{
    background: #f4f4f4;
    border-color: #c7c7c7 #c3c3c3 #bebebe;
    box-shadow: 0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3;
    text-shadow: 0 1px 0 #fdfdfd;
    background: -moz-linear-gradient(top,  #efefef, #f8f8f8);
    background: -webkit-linear-gradient(top,  #efefef, #f8f8f8);
    background: -o-linear-gradient(top,  #efefef, #f8f8f8);
    background: -ms-linear-gradient(top,  #efefef, #f8f8f8);
    background: linear-gradient(top,  #efefef, #f8f8f8);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#f8f8f8');
}

Sí, ya sé, tener que escribir varias propiedades para los distintos navgadores es realmente molesto pero, es lo que hay.

REFERENCIAS:lab.tommasoraspo.com