Crea tu Web: Indice de diseño

Bordes con imágenes
¿Aburrido de las opciones de bordes ofrecida por CSS2? Pues Vamos ahora hay otra posibilidad que nos soportada por Safari 3.1+, FireFox 3.5+ y Chrome 1.0+: se pueden usar imágenes en los bordes de elementos de nuestra web en lugar del borde normal.

Un ejemplo es éste código

#imgborde {
width: 300px;
height: 200px;
padding: 10px;
border-width: 10px;
border-style: solid;             /* necesario para firefox */
-webkit-border-image: url(borde1.gif) 25% stretch stretch;
-moz-border-image: url(borde1.gif) 25% stretch stretch;

}

borde1.gif es la imagen que se usa para dibujar el borde la caja o elemento DIV como el siguiente

Aquí verás una caja con borde construido con una imagen, borde personalizado, al menos si usas un navegador compatible con CSS3 como chrome o firefox

Si estás en Iexplorer verás un borde negro.

Como ves basta con darle la dirección de una imagen en el atributo url. Esta imagen conendrá cuatro lados, es decir es un marco y esos lados se usarán como partida

Los atributos que se usan son la url (dirección) de la imagen seguido de 4 valores para indicar la porción de cada lado del cuadro usado como imagen base para cada borde: superior, inferior, izquierod o derecho. Si se usa un mismo porcentaje o valor para todos se puede poner una sola cifre.

Por último los lados horizontal y vertical puede simpemente usrse ajustando el tamaño de cada lado(stretch) para formar el cuadro compelto, repitiendo cada lado como un tile (repeat) o repitiendo para ajustar los laterales y los bordes superior e inferior (round) y formar el cuadro completo.

Marco Esta imagen tiene los patrones para formar cualquier caja con os bordes formados por imágenes. En tamaño decimos cuando de cada lado vamos a usar, en el modo indicamos si deformamos cada figura para formar el lado o la repetimos.

 

arriba


Comunidad Virtual. Alojamiento gratis