a.css

esbudellant estàndards


Decoració de tipografies

01/08/06

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

  1. Comentat per Federico el 02/08/06

    Siguiendo tu propuesta, ¿y si el texto de H2 consiste de dos lineas? :)

  2. Comentat per are el 02/08/06

    La cosa deixa de funcionar, tens tota la raó :S

  3. 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.

  4. Comentat per are el 03/08/06

    hehehe, cert. Vaig estar fent proves generant una caixa amb after/before i posicionant-la amb marges negatius però no es superposava bé.

Afegir un comentari


© Arnau Siches. a.css està sota Llicència Creative Commons.