Al usar Hojas de estilo CSS, nivel 3 (CSS3) para redondear las esquinas de los elementos de distribución, es posible volver a definir la apariencia de tu sitio web. En esta tema, se detallan algunas maneras simples para hacer que la distribución de tu sitio web sea más atractiva mediante la nueva compatibilidad integrada para esquinas redondeadas en Windows Internet Explorer 9.Incluye las siguientes secciones.
Un punto de partida
Para las tareas que se describen en este tema, comenzamos con una página web muy simple. Esta página corresponde a una empresa de café ficticia e incluye algo de HTML, algunas hojas de estilo en cascada (CSS) y unas pocas imágenes. Puedes ver y descargar el HTML y las CSS. En la siguiente captura de pantalla, se muestra la página web inicial.
Importante
Cuando crees tus propias páginas web para sacar provecho de la nueva compatibilidad con estándares web de Internet Explorer 9, asegúrate de incluir la siguiente directiva !DOCTYPE en la página superior de la página:
<!DOCTYPE html>
En este diseño, como en muchos otros, los cuadros ayudan a separar el contenido visualmente y proporcionar interés visual. Aún así, este diseño es bastante uniforme. No obstante, con Internet Explorer 9 y CSS3, es posible redondear las esquinas de esos cuadros.
Las esquinas redondeadas en Internet Explorer 9 con CSS3 son muy eficaces y existen muchas combinaciones posibles. En este tema, nos centramos en tres áreas del diseño del ejemplo, como se resalta en la siguiente imagen:
- El borde de la imagen en miniatura del grano de café (definida por el selector de clases
product_thumb) - La barra lateral junto al borde derecho de la página (definida por el selector de identificador
sidebar) - Las bandas de encabezad de color amarillo junto a la parte superior e inferior de la página (definidas por los selectores de identificador
headeryfooter)
Redondear todas las esquinas de la misma forma
Comenzaremos con las miniaturas de los granos de café y agregaremos esquinas un poco más suavizadas. Para redondear todas las esquinas de un cuadro de la misma manera, usa la propiedad border-radius con un valor. (El valor puede ser un valor de longitud o un porcentaje; los porcentajes se basan en la altura o el ancho total. En todos los ejemplos de este tema se emplean valores de longitud). Para usar esta propiedad de la forma más sencilla, debes especificar el radio del círculo que define la forma de cada una de las esquinas del cuadro. En la siguiente imagen, se aplicó al rectángulo un border-radius de 20 píxeles. Observa cómo los círculos definen la curva de las esquinas.
Actualmente, la CSS que define la apariencia de las miniaturas corresponde al siguiente selector de clase:
.product_thumb {
clear: left;
height: 80px;
width: 80px;
margin-right: 10px;
padding: 5px;
float: left;
border-width: 1px;
border-color: #7f7f7f;
border-style: dashed;
}
Agreguemos la propiedad border-radius y asignémosle un valor de 5 píxeles. Para hacerlo, agregamos la siguiente línea al selector de clase
product_thumb:border-radius: 5px;
Después de agregar esta línea al selector, todos los bordes de los granos de café se verán así:
Redondear las múltiples esquinas por separado
Ahora, focalicemos nuestra atención en la barra lateral. Aquí, la CSS que define la apariencia de la barra lateral corresponde al siguiente selector de identificador:
#sidebar {
font-size: 12px;
padding: 15px;
margin: 20px 0px 10px 75%;
border-style: dashed;
border-color: #996600;
border-width: 5px;
}
Esto hace que la barra lateral se vea de esta forma en Internet Explorer 9:
Podemos redondear la esquina superior izquierda con una curva más amplia que en el resto de las esquinas mediante uno de estos dos métodos. El primero implica el uso de una de las demás propiedades border-radius.
Las propiedades border-radius son las siguientes:
- border-top-left-radius: define la esquina superior izquierda de un cuadro.
- border-top-right-radius: define la esquina superior derecha de un cuadro.
- border-bottom-right-radius: define la esquina inferior derecha de un cuadro.
- border-bottom-left-radius: define la esquina superior izquierda de un cuadro.
Podemos emplear algunas de estas propiedades para rellenar el espacio en blanco de la esquina superior izquierda de la barra lateral y agregar algunas curvas interesantes a la parte inferior de la barra lateral.
Agreguemos las siguientes líneas al selector de identificador
sidebar:border-top-left-radius: 10em; border-bottom-right-radius: 5em; border-bottom-left-radius: 2em;
Después de agregar estas líneas al selector, la barra lateral se ve así:
También puedes redondear las esquinas de la barra lateral de manera separada usando la propiedad border-radius como una propiedad abreviada. Si proporcionas más de un valor para la propiedad border-radius, la curva de cada esquina varía según el orden de los valores. Por ejemplo, se puede obtener el mismo resultado en el ejemplo de la barra lateral si se agrega la siguiente línea al selector:
border-radius: 10em 0 5em 2em;
El orden de los valores dentro de la propiedad border-radius es el siguiente:
border-radius: ul ur lr ll;
Aquí, ul representa la esquina superior izquierda, ur representa la esquina superior derecha, lr representa la esquina inferior derecha y ll representa la esquina inferior izquierda. Un valor de longitud cero para cualquiera de estos valores significa que no se producen curvas; la esquina continúa siendo un ángulo recto. El orden de los valores se ilustra en la siguiente imagen.
Para obtener resultados diferentes, también podríamos usar solamente dos valores, o incluso tres valores con la propiedad border-radius. Inténtalo tú mismo. Para obtener una explicación detallada del comportamiento de esta propiedad, consulta la página de referencia de la propiedad border-radius en MSDN.
Redondear esquinas con elipses
Hasta el momento, hemos trabajado solo con esquinas redondeadas definidas por círculos. Las propiedades border-radius también pueden crear esquinas definidas por elipses, con radios x (horizontal) y y (vertical) diferentes.
Redondeemos con dos elipses las dos esquinas superiores del cuadro definidas por el selector de identificador
header y las dos esquinas inferiores del cuadro definidas por el selector de identificador footer.
Debido a que queremos usar elipses para definir las esquina superior izquierda y la esquina superior derecha del encabezado, agrega las siguientes dos líneas al selector
header:border-top-left-radius: 50px 25px; border-top-right-radius: 50px 25px;
Para usar elipses para definir las esquina izquierda inferior y la esquina derecha inferior del pie de página, agrega las siguientes dos líneas al selector
footer:border-bottom-left-radius: 15px 30px; border-bottom-right-radius: 15px 30px;
Para todas las propiedades border-radius, el primer valor es igual al radio horizontal de la elipse que define la esquina, mientras que el segundo valor es igual al radio vertical. Puedes verlo en el siguiente figura:
También puedes usar la propiedad border-radius como propiedad abreviada para definir las esquinas redondeadas elípticas todas en una línea. El orden de los valores dentro de la propiedad border-radius es el siguiente:
border-radius: ulx urx lrx llx / uly ury lry lly;
Los valores que aparecen antes de la barra diagonal ('/') definen los ejes horizontales (o x-) de cada esquina, y los valores que aparecen después de la barra diagonal definen los ejes verticales (o y-). Aquí, ulx representa el eje horizontal de la esquina superior izquierda, urx representa el eje horizontal de la esquina superior derecha, etc. Aquí, uly representa el eje vertical de la esquina superior izquierda, ury representa el eje vertical de la esquina superior derecha, etc. El orden de los valores se ilustra en la siguiente imagen.
La siguiente línea que se agrega al selector de identificador
header produce los mismos resultados que se obtuvieron anteriormente:border-radius: 50px 50px 0 0 / 25px 25px 0 0;
De manera similar, la siguiente línea que se agrega al selector de identificador
footer produce los mismos resultados que se obtuvieron anteriormente:border-radius: 0 0 15px 15px / 0 0 30px 30px;
Redondear esquinas con otros exploradores
Dado que CSS3 todavía es un estándar emergente, al momento de la redacción de este documento, no todos los exploradores admiten las propiedadesborder-radius de la misma manera. Algunas versiones anteriores de exploradores admiten las propiedades border-radius, pero solamente con el prefijo específico del proveedor correspondiente al comienzo. (Para obtener más información acerca de los prefijos específicos del proveedor, consulta el tema sobre las "extensiones de proveedor de Microsoft CSS" en el sitio web Windows Internet Explorer Team Blog). Otros exploradores ofrecen compatibilidad variada para la notación de la barra diagonal ('/') detallada anteriormente, y algunos ofrecen compatibilidad limitada para los bordes elípticos (a diferencia de los bordes circulares).
Para garantizar la compatibilidad con versiones anteriores de un explorador, debes consultar el sitio web del proveedor del explorador correspondiente. Según cuál sea el explorador y la versión, probablemente puedas simplemente duplicar cualquier propiedad border-radius con el correspondiente prefijo específico del proveedor. Por ejemplo, el siguiente selector debe producir las mismas esquinas redondeadas tanto en Internet Explorer 9 como en las versiones anteriores y actuales de Mozilla Firefox, Apple Safari, Google Chrome y Opera:
.my_selector {
...
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
No obstante, cuanto más complejas sean las esquinas redondeadas, menor será la probabilidad de que la sintaxis de border-radius sea transferible. En ese caso, debes consultar el sitio web del proveedor de explorador:
No hay comentarios:
Publicar un comentario