Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome.

Una de las herramientas más simples, pero también más útiles de Firebug es Inspeccionar, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.

Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <b:skin> y </b:skin> y en WordPress en el archivo style.css en la carpeta del theme activo.

Modificar el CSS de un elemento con Firebug.

Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:

1. Instala Firebug en tu navegador: Firefox o Chrome. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.

2. Dar clic en el botón de Firebug en la barra de herramientas , luego en el botón de Inspeccionar  y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, imagen, video, flash o cualquier elemento, y dar clic en él.

3. En el cuadro de la derecha de Firebug, estando la pestaña “Estilo” activa, se muestran todos los estilos que afectan al elemento.

Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.

Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).

Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.

4. Pruebas en vivo.

Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.

Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.

Y muy similar para los valores numéricos:

Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.

Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de “Estilo”, aparecerá el selector que contiene la imagen, normalmente en la propiedad background o background-image.

Y hay otras varias herramientas que pueden ver directamente en el manual oficial.

5. Usando los datos de las pruebas.

Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug nunca guarda cambios, esta parte debes hacerla tu manualmente.

En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.

Screencast

Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.

Conclusión

Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la guía oficial, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de CSS y HTML, hará cualquier tarea de diseño menos frustrante.

¿Cómo funciona?

Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:

• optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.
• auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed para los de mayor tamaño.
• optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
• geometricPrecision – Da prioridad a la geometría del texto.

Ejemplos:

body  { text-rendering: optimizeLegibility; }
.post  { text-rendering: optimizeSpeed; }

Comentario

Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:

<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />

Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.

El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.

HTML 5 Rocks tiene desde una introducción a las bondades de HTML 5, hasta tutoriales paso a paso y un editor de código en línea para empezar a experimentar con esta nueva versión del estándar.

Algunos de los tutoriales que hay desde ahora son:

• Introducción a Chrome Developer Tools.
• Prácticas recomendadas para hacer una aplicación HTML 5 más rápida.
• Guía para principiantes para usar la aplicación de cache.
• Guía rápida para implementar la etiqueta de audio de HTML 5.
• Uso de la API de notificaciones.

Y varios ejemplos prácticos de otras funciones de HTML 5.

Una última sección de recursos muestra un pequeño directorio con herramientas y documentación sobre HTML 5 y CSS 3.

Recordar que Apple ha hecho un gesto similar, pero con el pequeño detalle de que obliga a descargar Safari, algo que por otra parte, no es de extrañar en la filosofía de esta empresa.

Tanto HTML 5 y CSS 3 no son tecnologías realmente nuevas, lo novedoso es todo el empuje que estas grandes multinacionales les están dando desde hace un tiempo y que, indirectamente, ayuda a la evolución de la web.

Sitio: HTML 5

Todo desarrollador web da por descontado tener una conexión, sin embargo, siempre hay casos extraordinarios donde no se tiene este acceso y es cuando se valora todo el material de consulta que se tiene en el disco duro.

Para prevenir este "peligro" bien vale la pena tener manuales de consulta offline. Algunos de los que me han sido útiles personalmente son:

• Manual oficial de PHP – Disponible en html y chm en varios idiomas, incluido el español.
• Manual oficial de MySQL – Disponible en html, chm y pdf en varios idiomas, incluido el español.
• Manual CSS – Manual de CSS 2.1 en formato chm (no oficial).
• Manual HTML – Manual de HTML 4.0 en formato chm (no oficial).
• Manual Javascript – Manual de Javascript 1.5 en formato chm (no oficial).
• Manual de jQuery – La documentación oficial de jQuery 1.4 en un archivo chm (no oficial).
• Manual de la W3C – Manual sobre los estándares web en formato chm (no oficial).

Además de manuales, es muy útil contar con libros con una explicación más amplio y de aplicación práctica, para esto, los libros de librosweb.es son una excelente muestra (disponibles en versiones pdf).

Tú ¿Qué libros y manuales tienes para cuando te quedas offline?

Fotografía de Feuillu

Siempre he creído interesante el darle cierta animación a nuestros botones le den un plus gráfico, y hay, desde el enviar de manera automática un mail a alguien que se nos ha añadido en nuestra lista de lectores de nuestro RSS, y quizás un botón animado de agradecimiento puede ser también buena opción.

En esta ocasión haremos un ejercicio para crear un pequeño personaje desde el papel, pasando por Adobe illustrator, hasta llegar a la implementación en HTML y CSS. Al final, te dejamos las imágenes y el código en un archivo para que lo implementes en tu web si así deseas (Ver demo).

Vectores y la ilustración

Los vectores tienen grandes ventajas y las ultimas versiones de illustrator son sorprendentes, nuestro acabados serán muchos más que simples plastas de color.

No voy a negar que tener nociones de básicas de dibujo ayuda a poder hacer ilustraciones, pero definitivamente la web es un compendio muy amplio de imágenes para tomar ideas, para ver diferentes técnicas, para poder empezar nuestros proyectos, el dibujar ayuda, pero las buenas ideas siempre son mejores.

Bocetando y de ahí a illustrator

Empecemos por bocetar nuestro personaje, esto nos ayudara a tener una idea un poco más clara de como empezar. Como comento, puedes tomar ideas de ilustraciones que hayas visto y se te hagan interesantes.

Puedo mencionarles que prefiero hacer esto, bocetar aunque al final muchas veces trazo directo en illustrator pero al menos para mi me da una idea más clara y sé que haré, antes podía pasar horas en la computadora sin tener claro que dibujar y con ello perdía tiempo, unos momentos de boceto terminaron con eso.

Empezaremos con las formas básicas para la cabeza y las orejas, trazaremos tres círculos, juntos para luego aplicar el pathfinder (menu window-pathfinder) y aplicamos el efecto de sumar.

Trazaremos los ojos, dos círculos pequeños de color negro bastarán para hacerlo, colocamos y centramos, y después haremos el cabello.

Ahora solo ponerle color y unir las partes.

Esto solo es una guía, así que ustedes podrán hacer el personaje que quieran yo les muestro dos variantes de niño y niña.

Ahora viene la parte interesante, la sonrisa, la cual será una de las cosas que cambian. Para comenzar haremos la sonrisa con la boca cerrada, un medio circulo será suficiente, para después hacer la sonrisa de la boca abierta. duplicamos nuestro layer o capa con nuestro personaje con sonrisa cerrada y hacemos lo siguiente en el layer duplicado.

Feed rss y strokes de etiqueta.

Haremos nuestro feed RSS que es el pretexto para hacer esta ilustración, lo colocaremos detrás del niño y en la imagen el botón se verá más, y crearemos un efecto de movimiento.

Ahora hagamos el terminado de etiqueta, seleccionemos el personaje, le damos Unite con el pathfider lo rellenamos del color y le damos un stroke o borde para que se rebase la figura, aplicamos lo mismo al botón feed RSS.

Vamos a hacer un pequeño destello en la parte de atrás de nuestro personaje. Creamos un rectángulo vertical y aplicamos el efecto de transform o transformar, (menu effects/Distor & Transform).

Expandimos la forma creada (menu object- eExpand Appearance) le damos Unite con el pathfinder, ajustamos algunas puntas de nuestra figura y añadimos una degradado.

Solo agreguemos un pequeño texto para hacer más obvio nuestro cambio y listo tendríamos por separado en cada layer un archivo así:

Implementación del botón

Desde illustrator de exportan las imágenes, el resultado, dos imágenes un formato de imagen web, por ejemplo PNG8. Para poderlas usar en un hover, ambas deben tener el mismo alto y ancho y estar alineadas vertical y horizontalmente. En otras palabras, que si pones una sobre otra, la silueta de cara coincide.

Hemos unidos después estas dos imágenes en una sola, una sobre otra, para usarlas como sprite CSS:

Para el HTML basta con el siguiente código:

<a href='http://blogandweb.com/feed' class='botonrss'>Feed RSS</a>

El CSS será el encargado de hacer el efecto “hover“, es decir, que al pasar el puntero del mouse por encima se mostrará la segunda figura, dando la sensación de animación.

a.botonrss {
    width:166px;
    height:180px; /* Dimensiones de la imagen */
    text-indent:-9999px;
    overflow:hidden; /* Oculatando el texto del enlace */
    display:block;
    background:url(images/rss-boton.png) no-repeat 0 0; /* Poniendo la imagen como fondo */
}
a.botonrss:hover {
    background: url(images/rss-boton.png) no-repeat 0 -180px; /* Al hacer hover, ponemos la segunda imagen de fondo */
}

Ahora, solo resta ver el botón en funcionamiento.

Implementarlo en Blogger y WordPress

Implementarlo en Blogger y WordPress es bastante sencillo. El código HTML se puede agregar en un widget de HTML en el sidebar y el CSS, en WordPress va en el archivo style.css y en Blogger justo antes del código:

]]></b:skin>

No olvides cambiar la URL por la de tu feed en el HTML y la ruta de la imagen en el CSS.

Descargar

Descargar HTML e imágenes.

Conclusión

En este tutorial vimos como crear un botón “animado” iniciando desde el panel, aunque resulta en algo de trabajo, el resultado generalmente vale la pena.

Igualmente, si te gusto este botón para tu sitio web, descárgalo e impleméntalo. Nosotros lo liberamos bajo licencia Creative Commons, y si nos quieres dar un link por los créditos, te lo agradecemos desde ahora

Por cierto, este es el primer tutorial que hacemos en conjunto, Ulises y Francisco (principalmente el primero), esperamos te haya gustado tanto como a nosotros al escribirlo.

¿Cómo funciona?

Stylish funciona con CSS, y al ser una extensión, funciona en los navegadores modernos, con lo que tenemos acceso a todas las ventajas de CSS 3. Con Stylish creas hojas de estilo locales, que te permiten modificar cualquier elemento de un sitio web.

Ejemplos de uso: borrar secciones que nunca se usan, eliminar publicidad, resaltar elementos importantes, cambiar el ancho de una columna, cambiar la paleta de colores y en general cualquier otra cosa dentro de las capacidades de CSS.

Paso a paso

1. Descarga e instala Sylish: Firefox | Chrome 

Reinicia tu navegador.

2. Ahora en el menú del navegador:

Firefox: Herramientas → Complementos → Estilos de usuario → Escribir un nuevo estilo.
Chrome: Opciones → Extensiones → Stylish → Opciones → Add new style.

Tendrás el botón para crear un nuevo estilo.

3. En esta nueva ventana se agrega el nombre del estilo, etiquetas y el campo de escritura, en este último irán todas las instrucciones CSS.

Seguro no se aplicaran estilos a todas la páginas que se visitan, por tanto, es importante definir dos tipos de estilo: generales y específicas a un dominio.

Estilos generales

Los estilos generales se aplican a todas las páginas que se visiten. Por ejemplo, la siguiente instrucción:

#ads {display:none;}

Borraría todos los elementos con id igual a "ads". Es poco recomendado pues en diferentes páginas un id podría tener funciones distintas y por lo tanto, estar eliminando posibles elementos útiles.

Estilos específicos por dominio

Para evitar afectar a todas las páginas por las que navegamos, se pueden crear estilos específicos a un dominio, la construcción del css puede ser como sigue:

@-moz-document url-prefix(http://www.sitio.com) { 

/* Estilos que solo afectaran al dominio www.sitio.com */ 

}

Es conveniente dar un vistazo a la documentación de stylish y a los selectores CSS 3 para sacar mayor provecho a esta extensión.

Ejemplos prácticos

Para hacer evidentes las ventajas de esta extensión, dejo a continuación algunos ejemplos para limpiar un poco la interfaz de Gmail, Twitter y Google Analytics, con explicaciones.

GMail

@-moz-document url-prefix(https://mail.google.com) {

.nH div.ps {display:none;} /* Borra los gagets en barra lateral. Por ejemplo, la de invitar a un amigo o el chat */
.k .diLZtc .nH .nH .mq {display:none;} /* Borra la barra de anuncios superior */
.ov .nH .mn {display:none;} /* Borra los "consejos" de uso de gmail en el footer */

}

Twitter

@-moz-document url-prefix(http://twitter.com) {

p.promotion {display:none;} /* Borra la apps recomendadas en la barra lateral */
.status-body .meta span:nth-child(2) {display:none;} /* Borra la aplicación desde donde se escribió cada tweet */
#footer {display:none;} /* Borra el footer */
#home .u-username {display:none;} /* Borra todos los tweets de un usuario "username" */
#home .share {display:none;} /* Borra todos los retweets automáticos de tu timeline */

}

Analytics

@-moz-document url-prefix(https://www.google.com/analytics) {

/* Limpia la interfaz de inicio de google analytics */
td.property_row, #footer, #CommonQuestions-ROOT, #ProductRecommendation-ROOT, ul.admin_lefthandside {display:none;}

}

También se puede consultar una biblioteca de estilos para muchos sitios en:

userstyles.org/stylish

Notas

Los estilos CSS no evitan que los elementos se carguen en la página, por lo tanto, no tienen ninguna ventaja respecto a la carga de la página; simplemente oculta elementos a nuestra vista. Si existe la opción de eliminar elementos desde el panel de una aplicación, esta será una mejor opción.

En estos momentos, la extensión de Firefox es más práctica que la de Chrome.

Conclusión

Stylish se ha vuelto una extensión necesaria en mi navegador, pues me permite limpiar mi área de trabajo y ocio en muchas aplicaciones web. Una interfaz limpia, quita muchos distractores.

Algo muy interesante de CSS 3, son sus selectores, que como su nombre indica, permite seleccionar un elemento web para darle estilo o estructura. ¿Cuales son?

Selectores CSS 3

Notación:

• Ele – Elemento – Cualquier elemento web. Ejemplos: div, span, a, li, p, strong, etc.
• atr – Atributo – Describe las características de un elemento web. Ejemplos: href, alt, class, rel, etc.
• val – Valor – Magnitud de un atributo. Ejemplo: en rel=’nofollow’; rel es el atributo y nofollow el valor.
• n – Cualquier número entero.

Selectores y ejemplos prácticos:

Sintaxis	Descripción
Ele [atr^='val']	Selecciona todos los elementos que inicien con un valor especificado. Ejemplo: a[href='http://blogandweb.com'] Seleccionará todos los links hacia blogandweb.com
Ele[atr$='val']	Selecciona todos los elementos que terminen con un valor especificado. Ejemplo: a[href$='.zip'] Seleccionará todos los links de archivos zip.
Ele[atr*='val']	Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado. Ejemplo: a[href*='tag'] Seleccionará todos los links que contengan la palabra "tag".
Ele:nth-child(n)	Selecciona el enésimo hijo de su elemento padre. Ejemplo: p a:nth-child(2) seleccionará el segundo enlace de un párrafo.
Ele:nth-last-child(n)	Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero. Ejemplo: p a:nth-last-child(2) seleccionará el penúltimo enlace de un párrafo.
Ele:nth-of-type(n)	Selecciona el enésimo elemento de su tipo. Ejemplo: p img:nth-of-type(1) seleccionará la primer imagen en un párrafo.
Ele:nth-last-of-type(n)	Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero. Ejemplo: p img:nth-last-of-type(1) seleccionará la última imagen en un párrafo.
Ele:last-child	Selecciona el último hijo de un elemento. Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase "post".
Ele:first-of-type	Selecciona el primer elemento de su tipo en el elemento padre. Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase "post".
Ele:last-of-type	Selecciona el último elemento de su tipo en el elemento padre. Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase "post".
Ele:only-child	Selecciona el único elemento hijo de un elemento padre. Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento.
Ele:only-of-type	Selecciona el único elemento de cierto tipo. Ejemplo: .post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen.
Ele:empty	Selecciona los elementos web que no tienen elementos hijos. Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos.
Ele:target	Selecciona los elementos que tienen como destino una URL .
Ele:enabled	Selecciona elementos (de formularios) con valor enabled (habilitado). Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados.
Ele:disabled	Selecciona elementos (de formularios) con valor disabled (deshabilitado). Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados.
Ele:checked	Selecciona elementos (de formularios) con valor checked (seleccionado). Ejemplo: input:checked seleccionará los campos que estén seleccionados.
Ele::selection	Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline. Ejemplo:  ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor.
Ele:not(s)	Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web. Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post".
::first-line	Selecciona la primera línea de un elemento web. Ejemplo:  p::first-line seleccionará la primera línea de un párrafo.
::first-letter	Selecciona la primera letra de un elemento web. Ejemplo:  p::first-letter seleccionará la primera letra de un párrafo.
::before	Se ubica en la parte anterior de un elemento web (típicamente para agregar contenido). Ejemplo: p::before {content: 'Nota: '} Agregará el texto "Nota :" antes de cada párrafo.
::after	Se ubica en la parte posterior de un elemento web (típicamente para agregar contenido). Ejemplo: cite::before {content: 'Fin de la cita'} Agregará el texto "Fin de la cita" al final de cada elemento cite.

Navegadores que soportan selectores CSS 3

A grandes rasgos, sin entrar a ver cada caso, los selectores CSS 3 están soportados en:

• Google Chrome 1.0 o superior.
• Mozilla Firefox 3.0 o superior.
• Opera 9.5 o superior.
• Safari 3.1 o superior.
• ¿Internet explorer 9?

Como puede verse, Internet Explorer es prácticamente el único obstáculo para un soporte casi completo. Sin embargo, puede hacerse algo al respecto, por medio de ie-css3.js puede agregarse soporte a varios selectores desde IE5 hasta IE8.

Conclusión

Los selectores de CSS 3 se presentan como una interesante herramienta: ahorran en parte el uso de lenguajes de programación, pueden hacer más optimo el código CSS y más especifica la selección de elementos.

En lo particular, no veo mucho problema en su uso para fines estéticos para un sitio web; aquel navegador que no lo soporte, tendrá una versión a su medida, sin las ventajas de CSS 3. No así en el uso en la funcionalidad del sitio (navegación, formularios, etc) donde si tendrá un impacto en la experiencia del usuario.

En fin, aun nos falta la salida de IE9 y/o que una buena parte de los usuarios de la web adopten navegadores modernos. Por suerte, las estadísticas dicen que se va por buen camino.

Más información

• W3.org CSS 3 Selectors
• Selectores de CSS 3 | CSS Avanzado
• CSS 3 Selectors Test
• CSS 3 Selectors explained
• CSS 3 Blog

Crear bordes redondeados con CSS3

La propiedad encargada de crear los bordes en las esquinas es border-radius, pero dado de su carácter de borrador, los navegadores agregan una sintaxis adicional.

Ejemplo, para crear un contenedor de 3px de radio en las esquinas basta el siguiente código:

#contenedorr3 {
border-radius:3px;
-moz-border-radius:3px; /* Firefox */
-webkit-border-radius:3px; /* Safari y Chrome */ 

/* Otros estilos */
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

Aplicado a cualquier contenedor html con id=contenedorr3; por ejemplo:

<div id="contenedorr3">
<p>Este es un contenedor con bonitos bordes redondeados de 3px</p>
</div>

El resultado, algo como lo siguiente:

También es posible especificar esquina por esquina, el radio de curvatura. Por ejemplo:

#contenedorr10{
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;

-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:0px;

/* Otros estilos */
border:1px solid #333;
background:#eee;
width:100%;
padding:5px;
}

Que tendría por resultado lo siguiente:

Claro, visibles de este modo en los navegadores compatibles con esta característica.

Navegadores compatibles con border-radius

Las navegadores compatibles con esta característica son:

• Mozilla Firefox (Gecko), desde su versión 1.0.
• Safari (Webkit), desde su versión 3.0.
• Google Chrome, desde su versión 1.0.

No la soportan:

• Internet explorer.
• Opera.

Aunque en ambos casos, confirmaron una próxima incorporación de esta característica.

Conclusión

Aun falta un tiempo para tener esta propiedad tenga un alto soporte, pero sin duda que podemos iniciar su uso. Al usarlo en el diseño web, los usuarios con navegadores más actuales podrán disfrutar de un diseño completo y los usuarios con otros navegadores no tendrán una gran afectación en el uso del sitio y con una versión al tamaño de su navegador.

En lo personal, cada vez uso más esta propiedad y empiezo a olvidarme de las laboriosas técnicas con imágenes. Por suerte la famosa guerra de los navegadores esta acelerando la creación y adopción de mejores plataformas web y no son pocos los usuarios ya con acceso a esta y otras características.