A Khmerang utilitzen una tècnica interessant per decorar els títols.
La idea és partir d'un text amb la tipografia de sempre i afegir una imatge a sobre que li donarà l'estètica diferenciada, ja sigui un embrutat, un ratllat o qualsevol afegit que es pugui fer amb una imatge en mosaic.
La tècnica que expliquen a Khmerang utilitza un element buit per aconseguir l'efecte, de l'estil de:
<h2><span></span>Text maquillat</h2>
Aquest element es podria afegir mitjançant un appendChild per no omplir de marcatge-brutícia el codi (X)HTML o, si es pot, emprar un element ja existent al codi. Per exemple:
Donat un (X)HTML:
<h2>Text maquillat</h2>
<div>
<p>Lorem ipsum dolor sit ...</p>
</div>
Es podria aplicar un CSS tipus:
h2 {
font-size: 3em;
}
div {
position: relative;
top: -4em;
padding: 4em 0 0 0;
background: url(decoracio-tipografies.png);
}
A l'afegir una posició relativa al div permet moure'l facilment per sobreposar-lo a l'h2.
Al sobreposar el div, la imatge de fons d'aquest quedarà per sobre de l'h2 aconseguint l'efecte desitjat.
Comentaris
Comentat per Federico el 02/08/06
Siguiendo tu propuesta, ¿y si el texto de H2 consiste de dos lineas? :)
Comentat per are el 02/08/06
La cosa deixa de funcionar, tens tota la raó :S
Comentat per Federico el 03/08/06
Ojo que llegado el caso, si realmente querés evitar agregar elementos innecesarios, podés usar contenido generado y posicionarlo absolutamente, a costa de que no funcione en Firefox.
Comentat per are el 03/08/06
hehehe, cert. Vaig estar fent proves generant una caixa amb
after/beforei posicionant-la amb marges negatius però no es superposava bé.