Sebastián Thüer

Comunicación, diseño y tecnología

css3

Por qué amamos los bordes curvos

· ·

Según cuenta la biografía, un ingeniero le mostraba entusiasmado a Steve Jobs un nuevo método para generar figuras geométricas en pantalla cuando este lo interrumpió para preguntarle si se podían crear rectángulos con bordes curvos. Ante la respuesta negativa, Jobs despachó al ingeniero y le dijo que solo volviera con una solución que los considerara.

La anécdota pretenece al proceso de desarrollo la primera Macintosh y muestra la obsesión de Jobs por esos pequeños detalles que la mayoría pasaba por alto. Sin embargo, el instinto de Jobs estaba en lo cierto: las figuras de bordes curvos son más fáciles de procesar e interpretar para las personas.

Un estudio del Barrow Neurological Institute (PDF aquí) sugiere que la percepción de las esquinas varía según sea su angulación. Los bordes rectos generan tensión porque suponen cambios bruscos en el recorrido visual. Por el contrario, las esquina curvas ayudan a focalizar la atención hacia el interior de los recuadros. El ojo prefiere las transiciones suaves y los cambios de sentido graduales -como lo sugieren las curvas- a los cortes abruptos que presenta un ángulo recto.

Mirando el siguiente gráfico, ¿cuál diagrama es más fácil de seguir?

El primero casi que invita a recorrer el sentido de las flechas, mientras que el segundo nos obliga a tomar una decisión y casi que miramos el final antes de saber por qué lado seguir.

Otro artículo (PDF) que analiza el fracaso en el rediseño del logo de GAP, señala que las líneas curvas están presentes en los niños cuando comienzan a dibujar. Trazar ángulos rectos requiere de un aprendizaje y tendemos a evitarl bordes afilados porque en la realidad representan una amenaza.

Keith Lang tiene un interesante post sobre el tema donde plantea que entre un cuadrado y un círculo del mismo tamaño nos resulta más fácil de comprender este último.

El cuadrado de bordes curvos se situa, entonces, en un punto intermedio. Las guías de estilo de Apple alientan su uso porque representan una metáfora más cercana para la interfa de usuario: en el mundo real, los botones para tocar suelen ser curvos. Inclusive si vemos el hardware de Apple podemos reconocer bordes curvos en casi todos sus productos.

En tu caso, ¿utilizás bordes curvos en tus diseños? ¿Por qué? Tus comentarios son bienvenidos.

CSS3 glow tabs: Menú de pestañas con efectos visuales para tu página web

· ·


Los pequeños detalles son los que le dan estilo diferente a tu diseño. En el caso de la web, muchas veces no queda más remedio que utilizar alguna librería de JavaScript para hacer transiciones, animaciones y otro tipo de efectos. Sin embargo, con CSS3 esto está cambiando.

Louis Lazaris nos presente un muy buen tutorial para crear un menú te pestañas con bordes curvos, sombras, fondo degradado y efectos de transición utilizando solamente CSS3. El resultado se puede ver en esta página.

La implementación es bastante simple y lo bueno es que los efectos visuales están implementados de forma progresiva para que los navegadores sin soporte para la nueva versión del CSS puedan igualmente mostrar la página adecuadamente.

Código del CSS

html,body,div,span,
applet,object,iframe,code,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-family: inherit;
text-align: left;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
content: "";
}

h1 {
color: #fff;
text-align: center;
padding: 80px 0 30px 0;
}

h2 {
text-align: center;
padding: 40px 0 0 0;
width: 75%;
margin: 0 auto;
}

body {
background: #131925;
}

ol {
list-style: decimal;
font-size: 24px;
width: 400px;
padding: 30px 0 0 60px;
margin: 0 auto;
}

ul#navigation {
height: 36px;
padding: 20px 20px 0 30px;
width: 904px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

ul#navigation li {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
float: left;
width: 168px;
margin: 0 10px 0 0;
background-color: #2B477D;
border: solid 1px #415F9D;
position: relative;
z-index: 1;
}

ul#navigation li.selected {
z-index: 3;
}

ul#navigation li.shadow {
width: 100%;
height: 2px;
position: absolute;
bottom: -3px;
left: 0;
border: none;
background: none;
z-index: 2;
-webkit-box-shadow: #111 0 -2px 6px;
-moz-box-shadow: #111 0 -2px 6px;
box-shadow: #111 0 -2px 6px;
}

ul#navigation li a:link, ul#navigation li a:visited {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
display: block;
text-align: center;
width: 168px;
height: 40px;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
outline: none;
float: left;
background: #2B477D;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
}

ul#navigation li a:hover {
background-color: #5a87dd;
}

ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
color: #2B477D;
border: solid 1px #fff;
-webkit-transition: background-color 0.2s linear;
background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
background: -webkit-gradient(linear,left bottom,left top,color-stop(.2, #f2f2f2),color-stop(.8, #d1d1d1));
background-color: #f2f2f2;
}

#content {
width: 910px;
background: #f2f2f2;
padding: 0 0 50px 0;
margin: 0 auto;
}

Código HTML





CSS3 Glow Tabs

CSS3 Glow Tabs with Box Shadow

The tabs in this demo are image-less tabs
with 4 different CSS3 enhancements:

  1. Rounded Corners (border-radius)
  2. Box Shadow (bottom of inactive tabs)
  3. Transitions (the glow on hover)
  4. Gradients (the active tab)

CSS Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7

The basic idea and techniques presented here are taken from the tabs on the jQuery Conference site.

< Go Back to the Article


Edge, una herramienta de Adobe para animaciones con CSS

· ·


Una de las características novedosas de CSS3 es la posibilidad de realizar animaciones. Básicamente, a través de un conjunto de instrucciones es posible manipular un objeto para rotarlo, desplazarlo por la pantalla y modificar algunas de sus propiedades. Sin embargo, puede ser una tarea bastante compleja y abstracta para realizarlo desde una línea de código.

Consciente de ello Adobe Labs acaba de lanzar Edge, una herramienta destinada a que los diseñadores puedan animar contenido mediante una interfaz visual sencilla y fácil de manejar. Si vemos la captura de pantalla que han publicado en hacks.mozilla.org, la interfaz recuerda bastante a las primeras versiones de Flash:

Esta versión de Edge hace foco fundamentalmente en agregar animación enriquecida a proyectos de HTML para que se vean bien en diferentes dispositivos. Entre otras cosas ofrece:

  • Herramientas de dibujo y texto
  • Importar gráficos en formato SVG, PNG; JPG y GIF
  • Editor con línea de tiempo para animar modificando posición, tamaño, color, forma, rotación y más propiedades
  • Agregar animación a un proyecto existente sin modificar el diseño en HTML/CSS existente
  • Copiar y pegar transiciones, invertirlas y escoger entre más de 25 efectos predeterminados

Primeras impresiones

Las diferentes evaluaciones que hay de esta herramienta parecen orientarse en dos direcciones. Por un lado, los entusiastas de Adobe lo ven como el próximo estandard en animaciones simples para la web ya que realemente es sencillo de operar y permite realzar visualmente una diseño en poco tiempo.

Del lado más crítico, señalan que el código es bastante enredado y se basa en superpoblar de DIVs la página con lo cual seguir el código puede ser bastante complejo. Agregan, que en realidad no usa CSS puro sino que utiliza también la biblioteca jQuery. Los más puristas, también le achacan que no se utilice el poder semántico de HTML5.

Adobe Edge está en beta y se ofrece de forma gratuita para los usuarios registrados en Adobe.

Pure CSS3 Lightbox: Galería de fotos en una sóla página sin JavaScript

· ·


Probablemente Ligthbox se uno de los plugins de JavaScript más extendidos en los diseñadores web. Si no lo conocés, se trata de un código JavaScript que sirve para generar galería de imágenes donde el usuario puede previsualizar y ampliar fotografía en mayor tamaño sin necesidad de recargar la página.

Se utiliza en muchos sitios web porque se trata de una solución práctica, sencilla y muy elegante. En el sitio de mi estudio de diseño web podés ver un ejemplo.

Sin embargo, la potencia de CSS3 permite que un comportamiento bastante similar pueda emularse sin necesidad de JavaScript ¿Las ventajas? Velocidad, facilidad de mantenimiento y código más liviano. El estudio Deaxon presenta este interesante experimento de emular a LightBox sin una sola línea de JavaScript.

Si bien todavía no todos los navegadores tienen soporte total para CSS3, el futuro parece estar en esa dirección: cada vez más efectos visuales en CSS.

El código del ejemplo anterior lo encontrás aquí (clic en la pestaña Source Code).

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

· ·

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.