Poner bordes al avatar con 1 sola imagen

eNvy 4 Dec, 2013, 9:04 am

Buenas, no te ofendas Ignacio, me parece un excelente tutorial, ya que las imágenes se pueden editar y hacer cosas geniales.

Lo que voy a dejar, es lo mismo, pero sin el uso de imágenes, puro CSS (Para el que no quiera cargar el sitio con imágenes y quiera obtener el mismo resultado).

Primero van a su plantilla de postbit_avatar, y en el código que ya tienen, agregan sólo esto:

Cita:<a href="{$post['profilelink_plain']}"><img class="avatar" src="{$post['avatar']}" alt="" {$avatar_width_height} /></a>

Luego, se dirigen a su CSS, y añaden ésta clase:

Código:
.avatar {

padding: 5px;

border-radius: 4px;

-o-border-radius: 4px;

-ms-border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border: 1px solid #b2b2b2;

background: #e5e5e5; /* Old browsers */

background: -moz-linear-gradient(top,  #e5e5e5 0%, #b2b2b2 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* IE10+ */

background: linear-gradient(to bottom,  #e5e5e5 0%,#b2b2b2 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#b2b2b2',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);

box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);

}

Paso a explicar el CSS:

La propiedad padding les dará el ancho del marco (Aplicará en éste caso 5 pixeles a cada lado).
Las propiedades border-radius y sus derivados (O, MS, MOZ y WEBKIT) modifican los bordes para que se redondeen. En éste caso aplique 4 pixeles en general para los 4 bordes.
La propiedad border lo único que hace es crear un borde al rededor.
Luego, la propiedad background (Que se repite varias veces) es un degradado de color, hacerlo a mano es posible pero es complejo, es por eso que pueden utilizar ésta web para crear sus degradados, copiarlos y luego añadirlos a su gusto.
Por último, la propiedad box-shadow crea el famoso borde superior que se utiliza hoy en día en muchos diseños, no es tan complejo de utilizar, pero también pueden recurrir a ésta web, y generar su código para copiarlo y utilizarlo.

Aclaro una ves más, que ésto es una variante del tutorial para no tener que utilizar imágenes, tengan en cuenta que al utilizar imágenes se pueden hacer mil cosas y tienen compatibilidad en todos los navegadores, cosa que con CSS no pasa, ya que hay ciertos navegadores (Maldito Internet Explorer ¬¬') que no reconocen degradados y demás, por lo cual se verá un color sólido.

Saludos y espero que les sirva.

Última modificación: 4 Dec, 2013, 9:08 am por SallieJac.

Poner bordes al avatar con 1 sola imagen

Ignacio P. 4 Dec, 2013, 8:46 am

Gamerzon 4 Dec, 2013, 8:53 am

eNvy 4 Dec, 2013, 9:04 am