Con el propósito de especificar estilos
personalizados a los elementos de una página web, modificaremos los diseños de las cajas CSS, según las reglas
de este lenguaje. Existen estilos de proyectos
para internet con carencia de atractivos, debido a la presentación repetitiva
del modelo de cajas. Por esta razón, aplicaremos bordes de diferentes formas
mediante un documento CSS.
El modelo de cajas CSS permite
aplicar imágenes a los bordes, mediante los siguiente atributos:
- Border-image-source: para indicar la ubicación de la imagen.
- Border-image-slice: para indicar la división de la imagen en el
borde.
- Border-image-width: para indicar el ancho del área destinada al
borde.
- Border-image-repeat: para indicar las repeticiones de la imagen
en el borde.
- Border-image-outset: para extender el borde más afuera del
elemento.
Es posible especificar bordes por
separado, y definir cada valor según la necesidad. Sin embargo, también existe
la posibilidad de definir el borde con una sola instrucción, en la cual es
indispensable seguir un estricto orden. Primero, definimos la ubicación de la
imagen; luego, la división, el ancho, cuánto se va a extender la imagen y, por
último, las repeticiones.
061-01_0610_ilu01. Tipos de
especificaciones de bordes
Es posible especificar en un documento
CSS:
- El
atributo border, para mostrar un
borde cuando existen problemas para cargar la imagen. En este caso, será de 10
pÃxeles, color black y estilo solid.
- El atributo
border-image, para mostar la imagen
con nombre marco.png, 600 de slice, 55 pÃxeles de width, un outset de 10 pÃxeles y, finalmente, repeat, para repetirse las veces necesarias hasta ocupar toda el
espacio.
En la ilustración siguiente,
observamos el código:
061-01_0610_ilu02. Código con
especificaciones de bordes
Mediante border-radius, modificamos el estilo de las cajas CSS, a fin de
personalizar una de sus principales caracterÃsticas, como lo es su forma
cuadrada, es decir, sus esquinas en punta. Esta propiedad permite crear los
bordes redondeados en todas las esquinas. Al mismo tiempo, con las sub-propiedades
top, right, bottom y left, modificamos esquinas precisas de
las cajas CSS.
Por ejemplo, creamos una primera
caja marcada con la etiqueta div, a
la cual se le aplicó un borde de color black,
sólido y de 10 pÃxeles, con un radio de 100. Al segundo bloque, marcado con
la etiqueta section, se le define el
mismo tipo de borde; sin embargo, con border-top-right-radius,
especificamos el borde superior de la derecha con este estilo. En la
ilustración, observamos el código y vista del usuario.
061-01_0610_ilu03. Código con especificaciones de radio en
bordes
Keynotes
- Existe la posibilidad de definir el borde
con una sola instrucción, en la cual es indispensable seguir un estricto orden.
Primero, definimos la ubicación de la imagen; luego, la división, el ancho,
cuánto se va a extender la imagen y, por último, las repeticiones.
- Mediante border-radius,
modificamos el estilo de las cajas CSS, a fin de personalizar una de sus principales
caracterÃsticas, como lo es su forma cuadrada, es decir, sus esquinas en punta.
- Con las sub-propiedades top, right, bottom y left, modificamos esquinas precisas de las cajas CSS.
RetoAplicar modificaciones de diseño a cuatro cajas de
un documento CSS, según las reglas de este lenguaje. Incluye tres de los tipos
de bordes aprendidos.
¡Comparte el resultado final en tu vPages y pide a tus compañeros agregar un
comentario debatir sobre cómo optimizar tu código!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de modificaciones de
diseño a las cajas CSS, creamos estilos atractivos, gracias a la presentación personalizada.
Además, especificamos correctamente todas las propiedades con border. La organización y el cuidado de
los detalles son las bases idóneas para crear páginas con eficiencia.
