Plantilla ElementaryOS – HTML5 & CSS3


elementary1

Hola amigos como estan! bueno pues ahora traigo esta sencilla plantilla del escritorio de ElementaryOS, una distribución de Linux que hace mucho probé (por mera curiosidad) vi algunas cosas y basándome en algunos videos (ya que ahora uso Debian) me llamo la atención hacerlo mismo en HTML pero con algunos cambios, la verdad la plantilla es muy sencilla pero es muy buena para empezar o modificare en muchos aspectos, bueno pues vamos a que le puse ( lo cual no fue mucho, lo siento ).

Efecto de iconos en el Dock
Esto es especial fue sencillo, solo use la libreria de Jquery y un script sencillo hacer el efecto en que cuando das click a uno de los iconos este salta, no es la gran cosa pero tiene un gran atractivo visual.
elementary2

Iconos del escritorio
En particular también fue sencillo de hacer, excepto por que los iconos como utilice DIVs y algunas imágenes pues no se hace completamente hacia la izquierda, pero tiene un buen efecto con transición hecho con CSS
elementary3Pestaña de Aplicaciones
Bueno pues agregue la pestaña de aplicaciones, quería hacerlo con tabs pero era muy estresante ( tranquilos, tengo una vida en el mundo exterior vale ) asi que no me tome tiempo de hacerlo con tabs y utilice DIVs e imágenes que son las mismas que en el escritorio, igual tienen un efecto de transición al poner el cursor sobre el icono ( hover )
elementary4

Opciones de lado derecho
Pues no podían faltar las opciones del lado derecho, lo deje muy simple pero es de mucha ayuda, los iconos son por parte de Font-Awsome, que recomiendo enormemente su uso.
elementary5Bueno por el momento eso es todo amigos, espero que estén de lo mejor y como siempre les mando un abrazo y muchas bendiciones de mi parte, hasta el próximo template, bye bye.

IMPORTANTE: No es responsive, se puede hacer responsive editando el CSS en el archivo “responsive.css” que se encuentra en el comprimido, no me tome el tiempo de hacerlo responsive por que solo es un ejemplo, pero si quieres hacerlo por alguna razón solo necesitas modificar ese archivo.

Demo:
 http://www.jhcodes.com/scripts/elementary/
Descarga:
 http://www.jhcodes.com/software

Etiquetas: , , , , , ,

2 comentarios to “Plantilla ElementaryOS – HTML5 & CSS3”

  1. ey3s0nly Says:

    Hola que tal, oye esta genial la plantilla, tenia unas dudas:

    – Tienes planes de darle continuidad o hacer una 2da version? creo que valdrìa mucho la pena
    – No es responsive? lo probè en mi navegador y pareciera que si …

    Un saludo y muchas felicidades por el buen trabajo!

    • Jeshua H. Says:

      Tengo planeadas hacer varias versiones, ubuntu, debian, mint, etc, aunque la segunda versión la trabajare mas detalladamente, haciendo hasta una terminal, saludos y gracias!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: