Siendo que ya estrenamos un nuevo diseño de nuestro header, ahora proseguimos con una mejora del diseño de los comentarios y del pié de página (inspirados en los degrades del logotipo).

Ambos cambios no usan nada de imágenes, no representan peso adicional a la carga de la página puesto que son una simple línea de código de CSS3 (sólo visible para Webkit y Mozilla). esto lo conseguí usando la función gradient.

Por ejemplo el código de los comentarios con degradé es:

.comment-body {
  background-color: #000000;
  background: -moz-linear-gradient(0% 0%, #53535F, #000000);
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#53535F), to(#000000));
  }

Y con una simple línea de código tenemos el degradé a 45º que cambia de #53535F a #000000.

Aeromental diseño CSS3 gradient

De la misma manera el pié de página esta ahora un poco más vistoso y ordenado, ojo y sus colores representan el amanecer y el anochecer.


Aeromental pie de página CSS3

Una vez más espero sus comentarios y que los cambios sean de su agrado, de paso verifiquen como lo ven en sus navegadores, Firefox y Chrome deberían mostrar el blog perfectamente y casi idénticos (Chrome con animaciones) (Opera no tendrá degrades pero debería tener bordes redondeados y sombras, IE quizás muestre algo en su última versión, pero en IE8 no hay nada).

Seguinos en Twitter @aeromental y Facebook

Puedes compartir esta noticia con:


Noticias Similares

Anterior y Siguiente Post

11 Comentarios »

  1. Mr. Muffin dice:

    Proximamente! Aeromental compatible con sistemas 3d :P

  2. Nathan dice:

    amanecer??? noche???
    si no lo dices no lo entendia xD
    (0 sarcasmo)

  3. DanielSemper dice:

    Mr. Muffin: Pero que buena frase, la pondré en las frases aleatorias de arriba !!!

    Gracias (y)

    Nathan: Así es el arte, a veces hay que explicarlo (99% sarcasmo) :)

  4. Ramm dice:

    Tambien hay una linea para IE

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000′, endColorstr=’#FFFFFF’);
    Y de hecho tambien podrías usar http://www.css3pie.com para la sombra y las esquinas redondas.

  5. DanielSemper dice:

    Gracias Ramm por el dato, ya lo había visto de pasada, mi duda era que en ese código para IE sólo hay los valores de los 2 colores y no así el ángulo o dirección del gradiente para que se muestre horizontal, vertical o a 45º.

    Además si a los de IE no les interesa actualizar su navegador a mi tampoco me interesa poner un código tan feo sólo para su navegador… progid:DXImageTransform.Microsoft.gradient <- UFFF !!!!

  6. Botti dice:

    @Mr. Muffin
    jajaja muy buena esa

  7. pepe grillo dice:

    bien bien! quedo muy lindo daniel! esta mucho mejor

    solo como sugerencia,,.. la ventanita inferior de “aeromental in english” esta un poquito colorida poco sobria… pero es solo una opinion tal vez usando unos degradados menos fuertes, o sea mas sutiles se vea mejor

    saludos!

  8. Axel-R dice:

    Lastima que solo tenga Internet Explorer 8

  9. cytric dice:

    Pues si, muy bonito. Pero lo único malo es que sigues borrando los mensajes que no te gustan, y yo que pensé que esto era plural. Cuida tu dislexia (que va de mal en peor). Todo lo mejor!

  10. Botti dice:

    No ps los colores de alrededor del logo si se notan y todo
    yo nomas hablaba del fondo
    gris y asi
    pero weno equis

  11. Arturo dice:

    Pues a mi me tira el sidebar hacia abajo por alguna razón, uso chrome en mac.

Escribe un comentario

* no será visible

Se BORRAN los comentarios con insultos, spam, trolleo, lenguaje inapropiado: soez y albur.
Avatar: Si quieres tu foto o imagen en los comentarios sólo la subes a Gravatar.
HTML: Puedes usar HTML de blockquote, a href, strong, em, li y code. Lista de Emoticons.

Suscribirse sin comentar

 
Aeromental 2007 - 2012 ★ ☆ Las mejores personas del mundo están locas ☆ ★