Objectiu:

Aconseguir modificar cada cantonada d'una caixa mitjançant CSS sense afegir codi extra a l'XHTML.

Idea:

La idea es basa en el mateix principi que la tècnica de Reemplaçament d'imatges definitiu (RID). Crear una caixa mitjançant els pseudo elements :after i :before i, en cas necessari, usar una imatge per personalitzar la cantonada.

Traduccions

• In english: Customised Corners technique
• En castellano: Técnica de Esquinas Personalizadas

Procediment:

Partint d'una caixa com la de la figura 1

Volem obtenir un resultat com el de la figura 2

Per poder realitzar aquesta tècnica es necessita una estructura mínima d'XHTML de tres caixes.

Per exemple:

<div id="contenidor">
   <h1>Tècnica de Cantonades Personalitzades</h1>
   ...
   contingut
   ...
   <div id="peu">
      <p>lorem ipsum dolor sit.</p>
   </div>
</div>

La caixa contenidor ens permetrà generar dues caixes. Les altres dues les generarem a partir de l'h1 i de la caixa peu.

El CSS bàsic per obtenir la figura 1 seria:

body {
   padding: 30px;
   background: #900;
}
div#contenidor {
   margin: auto;
   width: 70%;
   background: #eaebcb;
   padding: 30px;
   border: 20px solid #fff;
}

La cantonada superior-esquerra

Aquesta caixa la crearem abans de la caixa contenidor i la convertirem en block per poder-la tractar amb més comoditat.

div#contenidor:before {
   display: block;
   content: ".";
   text-indent: -10000px;
}

La propietat content és necessaria per tal de que la caixa generada existeixi. Amb la propietat text-indent ocultem el caracter generat.

Ara ve un punt important: Cal determinar les dimensions de la caixa per tal d'aplicar tots els altres.

Per tant definim una amplada i una alçada per la caixa generada concordant amb el tamany de la imatge que volem mostrar com a cantonada. En aquest exemple serà de 80x80 pixels

Per tant, ampliariem la regla afegint:

div#contenidor:before {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 0 0;
}

Ara només queda desplaçar la nova caixa per deixar-la on volem.

Com que no li podem donar valors absoluts de posició —ja que no funcionen amb caixes generades— usarem els marges.

div#contenidor:before {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 0 0;
   margin: -70px 0 0 -70px;
}

El valor de 70px surt de: 20px del border de la caixa contenidor + 30px del padding + 20px del gruix de la cantonada blanca de la imatge.

La cantonada superior-dreta

Aquesta caixa la crearem abans de la caixa h1.

El codi bàsic és el mateix que la cantonada anterior:

h1:before {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
}

I com que usem la mateixa imatge només cal mostrar el tros correcte.

h1:before {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 100% 0;
}

Per posicionar, en aquest cas, haurem de tractar també la caixa original.

h1 {
   font-size: 1.2em;
   background: #996;
   margin: -10px 0 0 0;
   padding: 10px 10px 5px;
}

i donar marges a la caixa generada

h1:before {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 100% 0;
   margin: -80px 0 0 100%;
}

El marge esquerra del 100% posiciona la caixa el més a la dreta possible. El càcul del marge superior seria igual que el de la caixa anterior amb l'afegit de 10px producte del model de caixa de la caixa h1.

La caixa h1 necessita d'un padding-top diferent de 0 ja que sinó es comporta de forma extranya (tant en Firefox com en Opera com en Safari).

La cantonada inferior-esquerra

Aquesta caixa la generearem després de la caixa contenidor.

div#contenidor:after {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 0 100%;
   margin: 0 0 -70px -70px;
}

La cantonada inferior-dreta

Aquesta caixa la generarem després de la caixa peu

div#peu {
   background: #996;
   padding: 5px 10px;
}
div#peu:after {
   display: block;
   content: ".";
   text-indent: -10000px;
   width: 80px;
   height: 80px;
   background: url(cantonades.png) 100% 100%;
   margin: 0 0 -85px 100%;
}

La caixa peu pateix del mateix comportament anormal que la caixa h1 i no pot tenir un padding-top: 0.

Aquí s'acaba el procés necessari per mostrar les quatre cantonades personalitzades pels navegadors estàndard.

I per l'Internet Explorer?

L'internet Explorer no interpreta els pseudo elements :before i :after i per tant tot el que he explicat fins ara no li es útil.

Per aquest navegador antiquat caldrà emprar el mateix que amb la tècnica de Reemplaçament d'imatges definitiu (RID).

Aquest codi per Internet Explorer no és estàndard i per tant és recomanable posar-lo en un CSS que tracti només l'IE.

A l'exemple uso el hack de l'asterisc per qüestions pràctiques.

El primer és generar les caixes.

* html div#contenidor {
   background-image: expression(this.runtimeStyle.backgroundImage =
             "none", this.innerHTML += '<span class="topLeft"></span>
             <span class="topRight"></span><span class="bottomLeft">
             </span> <span class="bottomRight"></span>');
   position: relative;
   z-index: 1;
   overflow: visible;
   text-align: left;
}

Una vegada creades les quatre caixes amb els seus class per identificar-les, se'ls dona comportament de block i es posicionen absolutament a cada cantonada de la caixa contenidor.

* html div#contenidor span {
   display: block;
   width: 80px;
   height: 80px;
   position: absolute;
   z-index: 2;
}
* html div#contenidor span.topLeft {
   background: url(cantonades.png) 0 0;
   top: -40px;
   left: -40px;
}
* html div#contenidor span.topRight {
   background: url(cantonades.png) 100% 0;
   top: -40px;
   right: -40px;
}
* html div#contenidor span.bottomLeft {
   background: url(cantonades.png) 0 100%;
   bottom: -40px;
   left: -40px;
}
* html div#contenidor span.bottomRight {
   background: url(cantonades.png) 100% 100%;
   bottom: -40px;
   right: -40px;
}

Podeu veure l'exemple funcionant.

Suport dels navegadors

Navegador	Windows	Mac	Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Mozilla Firefox 1.0.4 +	Sí	Sí	Sí
Opera 8	Sí	Sí	Sí
Safari 2.0	-	Sí	-
Camino 0.8	-	Sí	-
Epiphany 1.6.1	-	-	Sí
OmniWeb 5.1	-	Sí	-
Konqueror 3.2	-	-	Sí
Internet Explorer 6	Sí	-	-
Internet Explorer 5.5	Sí	-	-
Internet Explorer 5.01	Sí	-	-
Internet Explorer:mac 5.2	-	No	-