13 Ago

Menú animado CSS3

Las animaciones que podemos realizar solo utilizando CSS3 y sin la necesidad de emplear JavaScript, son extremadamente poderosas. Probablemente en los próximos años la forma de animar los sitios web cambie radicalmente, haciendo más eficientes los sitios web.

Las propiedades para animar de CSS3 se pueden utilizar hoy en día, navegadores como Chrome, Safari, y Opera en casi todas sus versiones cuentan con soporte completo, lo mismo ocurre con Firefox e Internet explorer en sus versiones más nuevas. Así que si el publico de un sitio web se caracteriza por tener versiones nuevas de sus navegadores no habría ningún inconveniente en hacer uso de las propiedades para realizar animaciones de CSS3.

En TutorialZine, un blog excelente con muy buenos tutoriales y recursos para diseñadores, nos brindan en descarga directa un excelente menú animado que solo utiliza CSS3, ademas de obviamente el tutorial en donde se explica com ose implementaron las distintas propiedades.

El menú se ve de la siguiente manera:

No se olviden de visitar la demostración online.

El menú es muy simple pero cumple perfectamente su cometido. Mi sugerencia es comenzar a perderle el miedo a CSS3 y sobretodo a la compatibilidad cruzada con los distintos navegadores. La adopción de los navegadores más modernos se acelero considerablemente en estos últimos meses, algo que se ve reflejado en las estadísticas de cualquier sitio web.

Web: CSS3 Minimalistic Navigation Menu

Share this
11 Ago

Ribbon: plantilla para web simple en PSD

Ideada con una estética retro no demasiado exagerada, con los elementos justos para mostrar en una sola página gran cantidad de información. Posee detalles de calidad y un planeamiento original dentro de lo que hoy en día se ve en este tipo de plantillas.

Verán, una vez que decidan utilizarla, que contiene espacios de inclusión de un menú, por lo que no solo puede plantearse como un portfolio de página única, sino que con algunos retoques se pueden lograr páginas internas para hacerla una plantilla completa.

Descargar Ribbon | BlazRobar

Particularmente destaco el espacio superior con la cinta horizontal que contiene detalles que lo destacan por si mismo, ideal para incluir un slider. Por otra parte, las texturas que se han utilizado en las páginas de muestra que se encuentran en el inicio creo que son perfectas para utilizar sobre este mismo fondo.

Por último, el destaque inferior y el espacio para el logo, creo que son herramientas útiles para fijar la marca y proceder a la presentación de la información de forma concreta y simple, sin demasiadas decoraciones.

Share this
09 Ago

Efecto de papel doblado para ocultar elementos con CSS3

Desde la red de desarrolladores de Mozilla llega a nosotros esta fantástica propuesta que consiste en un efecto de plegado de papel para ocultar elementos.

Este efecto sería una alternativa completamente nueva para realizar el trabajo de ocultar-mostrar elementos, complementando los clásicos efectos fade y sliding que se utilizan comúnmente para esta clase de tareas tremendamente conocidos por los programadores que suelen trabajar con el framework jQuery.

PaperFold esta desarrollado utilizando tecnologías como CSS3, JavaScript y HTML5.

Actualmente el proyecto es tan solo una propuesta de un desarrollador, pero viendo su buena aceptación no dudo que sea pulido y mejorado para ser utilizado de forma masiva.

Web: PaperFold

Share this
07 Ago

8 Plantillas web profesionales HTML5 gratis

Siguiendo con la tendencia de incentivarlos a migrar a HTML5 queremos compartir con ustedes 8 plantillas web profesionales HTML5 que son completamente gratis para que utilicen en sus próximos diseños, después de todo HTML5 es una tendencia global en cuanto a diseño web y que poco a poco se esta convirtiendo en un estándar, es muy recomendable porque una de sus mayores ventajas es que incluso utilizando animaciones hechas con HTML5 y CSS3 sus sitios seria totalmente visibles y adaptables para los usuarios que naveguen en Internet con un iPad, iPhone y cualquier tableta o telefono móvil del mercado.

 


PLANTILLA HTML5: TRINITY

plantillas html5 trinity 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5 PARA SITIOS DE EMPRESAS

plantillas html5 company 8 Plantillas web profesionales HTML5 gratis

PLANTILLA SIMPLE HTML5 CON SCROLLING

plantillas html5 scrolling 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5 + PSD: HOSTING

plantillas html5 hosting 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5 + PSD: SHINRA

plantillas html5 shinra 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5 + PSD: NOVA

plantillas html5 nova 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5 + PSD: FOTOGRAFÍA

plantillas html5 fotografia 8 Plantillas web profesionales HTML5 gratis

PLANTILLA HTML5: IPHONE APP

plantillas html5 iphone 8 Plantillas web profesionales HTML5 gratis

Share this
05 Ago

17 Archivos PSD para diseños de Interface de Usuario

Excelentes archivos PSD para diseños de interfaces de usuario son perfectos para crear diseños de paginas web o sistemas de administración, usualmente son la base perfecta para diseñar una interface de usuario usables y facil de utilizar, estos archivos PSD incluye menus de navegación y botones listos para que utilices con tus diseños ya sea para Web, aplicaciones de escritorio o incluso para telefonos moviles.

 

 

CRITO UI

crito 17 Archivos PSD para diseños de Interface de Usuario

BLACK AND RED UI

black and red 17 Archivos PSD para diseños de Interface de Usuario

CLASSIC GREY WEB UI

classic grey web ui 17 Archivos PSD para diseños de Interface de Usuario

YOUTUBE UI

Youtube UI 17 Archivos PSD para diseños de Interface de Usuario

PACK WEB ELEMENTS

pack web elements 17 Archivos PSD para diseños de Interface de Usuario

IMDB FILM WEB SITE

IMDB 17 Archivos PSD para diseños de Interface de Usuario

STICKY BUTTERSCOTCH

Sticky Butterscotch 17 Archivos PSD para diseños de Interface de Usuario

CHUTZPAH UI

chutzpah ui 17 Archivos PSD para diseños de Interface de Usuario

BLACK UI

BlackUI v1 17 Archivos PSD para diseños de Interface de Usuario

CLEAN GRAPHICS

clean graphics 17 Archivos PSD para diseños de Interface de Usuario

SOFT UI

Soft UI 17 Archivos PSD para diseños de Interface de Usuario

FRESH UI KIT

Fresh UI 17 Archivos PSD para diseños de Interface de Usuario

WOOD APP

Wood APP 17 Archivos PSD para diseños de Interface de Usuario

WEB UI ELEMENTS

Web UI Elements 17 Archivos PSD para diseños de Interface de Usuario

USER TOOLS UI

user tools UI 17 Archivos PSD para diseños de Interface de Usuario

MODERN UI

Modern UI 17 Archivos PSD para diseños de Interface de Usuario

SLICK PRICE TABLE

Slick Price Table 17 Archivos PSD para diseños de Interface de Usuario

Share this
03 Ago

Scrolls animados con CSS3

Como se habrán dado cuenta las aplicaciones de CSS3 parecen no tener límites. A medida que va pasando el tiempo, vamos descubriendo más y más opciones que quizás pueden no parecer útiles en un primer momento pero que pueden resultar la base de aplicaciones y conceptos posteriores que brinden aún más posibilidades al desarrollo de utilidades web y aplicaciones.

En este caso, quiero mostrarles una recomendación que encontré gracias a WebResourcesDepot, que ofrece varias opciones de animación de scrolls con diferentes efectos.

Ver Demo de CSS Scroll Effects | Lab.Hakim

Quizás en un primer momento les resulten extrañas, pero lo bueno de estos ejemplos es el poder ver el funcionamiento y entender las posibilidades que puede llegar a brindar su aplicación.

Hay una gran variedad de efectos para visualizar y utilizar en los casos que no requieran compatibilidad entre exploradores, ya que como saben, CSS3 no está normalizado. Sin embargo, es una buena oportunidad para pensar nuevas formas de desplegar información y obtener cierto atractivo desde el contenido a partir de las animaciones básicas o modificadas.

Share this
01 Ago

UI: Reproductor de Audio [PSD]

Si estas pensando en rediseñar el reproductor de audio de tu sitio web, entonces este recurso te parecerá interesante.

Se trata de Super slick Music Player, una interface de usuario completa y en formato PSD de un reproductor de audio. La interface es de descarga gratuita, y no posee ninguna limitación de uso, tan solo descargamos el archivo y estamos en condiciones de aplicarlo a cualquier sitio de nuestra autoría.

La interface se ve así:

Como comente anteriormente este recurso se descarga en formato PSD, el documento se encuentra perfectamente dividido en capas, facilitando considerablemente su edición. Algo que se agradece especialmente desde el punto de vista de adaptar los colores al de nuestro sitio web.

Este fantástico diseño llega a nosotros gracias a Iqbal Perkasa un diseñadores de 17 años que reside en Indonesia.

Web: Super slick Music Player

Share this
30 Jul

Crear texto con forma de curva con jQuery y CSS3

ArcText.js es un plugin jQuery basado en Lettering.js, que nos permite crear textos que sigan una curva, algo que es muy fácil de hacer con programas como Photoshop, no era tan fácil de lograr con jQuery y CSS3, al menos hasta ahora.

CSS3 permite rotar texto de forma muy sencilla, no obstante lo que no hace es seguir una curva. Para lograrlo el plugin realizar una rotación unitaria de cada letra para luego dar el efecto curvado a toda la frase.

Visiten la demostración del plugin online.

Ejemplo de uso de ArcText

$example1.arctext({radius: 300})

Con el plugin jQuery ArcText.js ya no quedan excusas para no aplicar el efecto de texto curvo a nuestros diseños, sin sobrecargar ni afectar los tiempos de descarga, ni agregando imágenes innecesarias.

Web: ArcText.js

Share this
28 Jul

Elementos UI de iPhone 4 en PSD

Si se encuentran desarrollando una aplicación para iOS o pretenden iniciarse en este arduo camino, puede que un set de elementos UI diseñado exclusivamente para visualizarse en iPhone 4 les ahorre parte del trabajo.

Estos elementos fueron diseñados por Tomas Jasovsky y pretenden cubrir todas las necesidades gráficas de cualquier interfase básica. Desde menúes select, hasta estrellas de valoración, pasando por diferentes opciones de menúes funcionales con íconos que obviamente pueden reemplazarse por otros acordes a la función que requiera la aplicación.

Descargar iPhone 4 UI Kit | Dribbble

La plantilla se incluye en formato PSD y pueden descargarla desde el enlace publicado por el mismo autor en Dribbble como regalo a la comunidad de diseñadores.

Share this
26 Jul

Base: template blanca para WordPress

WordPress es sin dudas la plataforma que muchas personas han asimilado como ideal para llevar adelante ciertos tipos de proyectos que requieren una actualización periódica. Sin dudas se ha convertido en la más utilizada por su funcionamiento y las posibilidades de personalización que ofrece.

Dentro de las opciones de personalización, podemos contar con diseñadores que ofrecen su trabajo de forma gratuita y nos permiten, en muy pocos pasos, lograr instalar y optimizar el contenido según lo que necesitamos. En este caso, quiero compartir con ustedes Base, un template diseñado por la gente de WebDesignerWall.

Descargar Base | WebDesignerWall

Base es una plantilla gratuita completamente blanca con algunos detalles de color que despliega la información de forma clara y concisa. Es ideal para aquellos que necesitan centrar la atención sobre el contenido sin abarrotar la vista con detalles decorativos excesivos. Una excelente opción para quienes buscan mostrar un blog limpio y de estilo minimalista.

Share this

© 2006 Miracle Design. Todos los derechos reservados