Curvar texto con CSS3 y jQuery

En este blog de diseño web, ya hemos visto algún ejemplo de cómo manipular la posición de las fuentes en HTML.

En un post anterior, vimos cómo curvar texto con un CSS y HTML5, también vimos como rotar un texto y por ejemplo, escribir con HTML en vertical.

Aunque CSS3 nos permite rotar las letras, es bastante complicado de organizar cada letra a lo largo de una trayectoria curva. Arctext.js es un plugin de jQuery que te permite hacer exactamente eso.

Basado en Lettering.js, calcula la rotación a la derecha de cada letra y distribuye las letras a través de un arco imaginario según el radio que le indiquemos.

Aquí os dejo código, ejemplos y demás de http://tympanus.net/

Share and Enjoy

Rollover con jQuer

Algunos de vosotros habréis tenido (los menos , la curiosidad de ver el portfolio de este blog de diseño web. Al situarte sobre la imagen, esta se desplaza y deja ver otra imagen u html. Es un efecto muy utilizado en galerías, ahorra espacio y además es amigable cara al SEO.

Os dejo aquí el ejemplo y el código para realizar estos efectos con jQuery.

Share and Enjoy

Barras preload en formato PSD para descargar

50 originales barras de progreso en formato PSD, listas para descargar desde http://designshareblog.com/

Share and Enjoy

www.freebiepixels.com

simplypixels.net

simplypixels.net

www.turkhitbox.com

designmoo.com

designmoo.com

downloadpsd.com

Share and Enjoy

Interfaces para iPhone y iPad

En esta pequeña muestra, podemos ver todo tipo de tendencias y soluciones muy creativas en lo referente a interfaces de usuario. Echadle un vistazo porque seguro que de aquí sacareis buenas ideas para próximos diseños.

NO TE LIMITES
Este diseño simulando cuero y costuras es un claro ejemplo de que los límites en cuanto a diseño los ponemos nosotros como diseñadores.
 

Simulando cuero y costuras

BOTONES
En este ejemplo podemos comprobar como no tenemos que condicionar los diseños ni siquiera a la hora de colocar un botón. El nivel de dificultad en esta App se establece desplazando el botón de derecha a izquierda.
 

Originales botones

¿DÓNDE ESTOY?
En tan poco espacio es más complicado colocar un hilo de Ariadna (por ejemplo), pero fijaos cómo es posible con un poco de imaginación, indicar al usuario en qué opción del menú y submenú se encuentra en estos momentos.
 

Opciones activadas

 
Otro ejemplo de cómo indicar al usuario el lugar en el que se encuentra.
 

Ejemplo de menú y submenú

USABILIDAD
Las posibilidades son infinitas. En este caso en lugar de enviar al usuario a otra página, se ha abierto una capa para captar los datos de registro, sin tener que abandonar la página.
 

Solución para un formulario

CAPAS FLOTANTES TRANSPARENTES
Una muy buena opción para menús o submenús, es el uso de capas simitransparentes que aparecen y se esconden.
 

Capas transparentes para opciones del menú

FLIPBOARD, UN EJEMPLO A SEGUIR
Seguramente mi aplicación favorita. Flipboard destaca sobre todo, por la capacidad de maquetar de forma instantanea todas las noticias, RSS y demás que le configuremos. De un modo atractivo y muy intuitivo.
 

Flipboard, inmejorable diseño para un lector de noticias.

MENÚS ORIGINALES
A nivel gráfico podemos hacer cualquier tipo de menús, aquí tenemos un claro ejemplo de un menú que ocupa la pantalla completa, muy original y muy intuitivo.
 

Original menú iPhone

MÁS ARTÍCULOS RELACIONADOS CON EL DISEÑO DE INTERFACES PARA IPHONE, IPAD,…

Share and Enjoy

Parallax-Slider

Hace unos meses, en este blog de diseño web, vimos unos ejemplos de las últimas tendencias de diseño, el Parallax.

Hoy vamos a ver un ejemplo más de cómo hacer un slider con Parallax, en el que podemos ver cómo los elementos del diseño aparecen y desaparecen con distintos efectos.

En este ejemplo vamos a ver cómo controlar el comportamiento de cada elemento, dándole una clase. Cuando queremos desplazarlo a la derecha, por ejemplo, utilizamos la clase “da-slide-toright”.

Las clases utilizadas son:

• .da-slide-fromright
• .da-slide-fromleft
• .da-slide-toright
• .da-slide-toleft

El efecto Parallax se crea moviendo el fondo en dirección opuesta al movimiento del objeto. Con bgincrement, podremos controlar la cantidad de píxeles que tiene que moverse.

A continuación os dejo el enlace para ver y descargar el código de Tympanus.net

 

Share and Enjoy

Animaciones jQuery y CSS3

25 animaciones jQuery con sus correspondientes tuturiales. Sliders, parallax, landscapes animados, menús, etc…

Seguro que encuentras algo que se adapte a lo que andas buscando.

• Ver animaciones en visionwidget.com

Share and Enjoy

Scrollbar con jQuery y CSS

En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.

Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con  jQuery y CSS.

Tympanus.net nos muestra dos ejemplos, en el primero la barra de desplazamiento aparece cuando entramos en la zona con el ratón, y desaparece cuando salimos y después de cierto tiempo de inactividad.

El ejemplo 2 es más simple, la barra aparece y desaparece en función de si estamos o no encima de la zona.

La zona que va a contener la capa scrollable es:

<div id="jp-container" class="jp-container">

El CSS utilizado para dicha capa es bien simple:

• VER DEMOSTRACIÓN
• DESCARGAR CÓDIGO FUENTE 

Share and Enjoy

Etiqueta CANVAS. HTML5

El elemento Canvas de HTML5 es una etiqueta HTML similar a <div>, <a> o <table>, con la excepción de que su contenido se escribe o dibuja con JavaScript.

La etiqueta canvas va asociada a una función JavaScript, y con ella se pueden hacer todo tipo de líneas, dibujos, colores, gradientes, sombras, esquinas redondeadas, …

La forma de utilizar la etiqueta <canvas>, es la siguiente:

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // do stuff here
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>

En este tutorial, podréis encontrar todo tipo de código para cada una de las múltiples posibilidades que nos ofrece esta etiqueta. Espero que os sirva.

• VER EL TUTORIAL Y DESCARGAR CÓDIGO

Share and Enjoy

Notificaciones tipo iPhone con HTML5

El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.

Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.

• VER DEMO Y DESCARGAR CÓDIGO DE webdesign.tutsplus.com

Share and Enjoy