CSS3.0 en dise̱os Web РBordes curvos.

¡Buenas a todos! Hacemos el siguiente post para explicar un poco acerca de CSS 3.0 y cómo deben de estar utilizándose ya mismo, ciertos selectores en aras de tener un repertorio mayor para diseñar páginas Web más modernas, interactivas y con técnicas que incrementan la experiencia aún más. Nuestro tópico pasado, de nuestras impresiones de diseñar sitios Web en HTML 5.0 nos impulsó a re-diseñar nuestro mismísimo sitio Web utilizando más propiedades en CSS3 de las que veníamos utilizando y lógicamente que en HTML5.0 también. Ahora, queremos hablar de CSS 3.0 y cómo lo hemos utilizado en partes de nuestro re-diseño. Dado que son temas muy extensos de explicar, lo haremos por partes y comenzamos hoy con la propiedad border-radius o bordes curvos en nuestro idioma, pero primero, nos gustaría tocar una concepción bastante errónea entre diseñadores Web con respecto a CSS3.0; muchos no la quieren utilizar por miedo o por que no las conocen tan profundamente. Discutimos esto en la siguiente sección.

¿Cuándo es apropiado utilizar CSS 3.0?

Dan Cederholm, en su libro de “CSS3 For Designers” dice algo muy cierto con respecto a CSS3; muchos no la quieren utilizar ya mismo, por que dicen que lo quieren hacer “cuando está listo”. El problema surge en que ya está listo y muchos diseñadores Web no quieren hacerlo para poder preservar cierta retro-compatibilidad con navegadores viejos (IE, te lanzamos la indirecta). Craso error y él lo explica muy bien con el siguiente punto: “distinga lo crítico de lo NO crítico en un diseño Web y aplique CSS3 en puntos que NO lo son.”

¿Qué quiere decir con esto? Que dentro de lo crítico, podemos poner las siguientes capas:

Aspectos críticos de un diseño Web:

• Usabilidad.
• Accessibilidad.
• El layout.
• El branding.

A pesar de que existe un módulo en discusión para no recurrir a flotar bloques, llamado CSS Flexbox, dicho soporte no está totalmente garantizado y al utilizarlo en algo tan crítico como el layout, podemos estropear un diseño Web para usuarios con navegadores viejos (como Internet Explorer 8.0). Por lo tanto, debemos de aplicar CSS3 a puntos NO críticos los cuales son:

Aspectos de complemento dentro de un diseño Web

• Interacción.
• Retroalimentación.
• Movimiento.
• Recompensas visuales.

Espero que estos cuatro puntos sean claros, de lo contrario, me lo pueden preguntar.

Debido a que muchos navegadores están actualizándose bastante rápido, muchos selectores en CSS3 son lanzados como propuestas por parte de los desarrolladores para ser incluirlos dentro del spec de CSS3, se discute su sintaxis y posteriormente se hace un draft especificando cómo será la sintaxis final. Retocamos este punto dentro de un toque.

El selector border-radius

Border-radius agrega bordes curvos a elementos de bloque dentro de un diseño Web; en nuestro sitio lo utilizamos con los botones de arriba, y la caja de contenido principal. Ver imagen donde pueden apreciar claramente los bordes redondos. En el botón de cotice, utilizamos 4 bordes redondos de 10 pixeles de radio, en los primeros e últimos botones (acerca y contacto) utilizamos nuevamente los bordes pero noten que aquí los utilizamos en puntos distintos. En los botones de Clientes e Inglés utilizamos bordes en las partes inferiores.

La ventaja de bordes curvos en CSS3

Flexibilidad e eficiencia; dos recursos indispensables para el buen diseño Web; es flexible por que se cambia rápidamente, y es eficiente por que no requiere de trucos como imágenes de fondo o mamarrachos hechos en Javascript para apreciarse.

La sintaxis

Para utilizar bordes con radio en CSS 3.0 los declaramos de la siguiente manera:

  .cajita  {
      width:400px;
      height:200px;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px;
      -o-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px;
      }

Lo cual surte el siguiente efecto en navegadores modernos:

Los navegadores que no soportan dicha propiedad apreciarán una caja común y corriente, con bordes rectangulares.

Hicimos la declaración de código extensa para que entiendan claramente todo lo que tenemos que hacer para que surta efecto en todos los navegadores que lo soportan; primero, notarán que pusimos lo mismo 4 veces pero con prefijos que si se fijan detenidamente, son para cada navegador de Internet que lo soportan; esto se hace por que a como habíamos dicho al principio, muchas propuestas para CSS3 son incluidas por los desarrolladores, discutidas dentro del consorcio y luego aplicadas y mientras esto pasa, los prefijos sirven para ser incluidos ya mismo sin tener que esperar para ser adoptado por el consorcio. Lo positivo de hacerlo de esta manera es que cuando la técnica es aceptada, habrá retro-compatibilidad con versiones anteriores por medio del prefijo y versiones futuras soportarán la sintaxis adoptada.

De extrema importancia lea esto ya para no llorar después: Los prefijos de cada vendor (desarrollador) siempre van antes que el spec final aceptado por la W3C (border-radius va de último, sin prefijo). SIEMPRE. SIN EXCEPCIONES. Por razones de peso y relevancia (el último es el que siempre se aplica) y por que uno no sabe cuál será la sintaxis a utilizar por la W3C, por eso siempre debe de colocar la sintaxis que no contiene el prefijo del selector al final.

Si es mucho dolor de cabeza para Ud. copiar 4 propiedades al mismo tiempo, existen sitios que hacen esto por Ud. Yo no lo recomiendo por que obviamente, el hacerlos Ud. hace que Ud experimente, vea, y aprenda. Sitios como estos hacen todo por uno, y realmente no se aprende mucho.

La segunda observación es que son 4 radios, cada uno equivale a una esquina del elemento; los valores se dividen de la siguiente forma:

1. Primer valor: Esquina superior izquierda.
2. Segundo valor: Esquina superior derecha.
3. Tercer valor: Esquina inferior derecha.
4. Cuarto valor: Esquina inferior izquierda.

También, existe un short-hand property para poner los 4 valores iguales:

     .cajita  {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px ;
       }

Para los navegadores que no soportan border-radius

Navegadores como Internet Explorer 8 (o versiones anteriores) no lo soportan, pero volvemos a lo crítico versus complementario; ¿es realmente crítico que las esquinas sean redondas? ¿No es un efecto bonito, eficiente, y fácil de implementar con poco código para los navegadores que sí lo soportan?