Aeromental con Nuevo diseño de Comentarios y Pie de Página

@ 30 . septiembre . 2010

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).

DanielSemperAutor: Daniel Semper, fanático de la tecnología y sus usos sociales, cinéfilo geek, al menos veo una película por semana, innovador en Front-End y activo lector de comics. En mis tiempos libres soy ingeniero y estudio una maestría en Sidney en la universidad de UTS. Me puedes contactar en: twitter, Google Plus.
e-mail: hola @ danielsemper.com

Noticias Similares

  • Mr. Muffin

    Proximamente! Aeromental compatible con sistemas 3d :P

  • Nathan

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

  • 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) :)

  • Ramm

    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.

  • 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 !!!!

  • Botti

    @Mr. Muffin
    jajaja muy buena esa

  • pepe grillo

    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!

  • Axel-R

    Lastima que solo tenga Internet Explorer 8

  • cytric

    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!

  • Botti

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

  • Arturo

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