CSS -Consigli e lezioni Capolettera con testo o immagini

La pratica dei “capolettera” è una pratica che risale ai tempi in cui, preti di ordini particolari, chiusi in conventi e monasteri, copiavano a mano antichi testi, facendone delle coppie: gli amanuensi.
La tecnica era semplice, ma molto complessa da realizzare. La prima lettera del capitolo, veniva fatta più grande rispetto alle altre, e resa estremamente lavorata, con disegni e decorazioni davvero spettacolari.
Le rappresentazioni potevano essere di varia natura: da immagini sacre a semplici cornicette, ma molto elaborate nell’insieme.
Questa meraviglia pittorica, si perse poi con l’invenzione della stampa classica, dato ceh non era pensabile pe ogni lettera creare uno stampino elaborato ogni volta in modo differente.
Nella figura che accompagna questo scritto, vedete un semplice esempio di capolettera in stile medioevale.

Ovviamente noi non andremo a ricreare un capolavoro simile, dato che si tratta di un’immagine e non di una lettera di semplice testo tipografico, ma ci limiteremo a fare capire come poter inserire una lettera dalle dimensioni notevoli, e far si che il testo, nelle due o tre righe a seguire, rimanga accostato a questa lettera come se fosse un margine.
Vedremo anche come inserire una immagine in diverse posizioni, rispetto al testo che la accompagna.

Per prima cosa partiamo dalla lettera, da cui il nome di “capolettera”.
Creiamo una classe chiamata “capoletteera” e inseriamo il seguente codice.

.capolettera {
    float         : left;
    color         : rgb(255, 0, 0);
    font-size     : 78px;
    line-height   : 62px;
    padding-top   : 2px;
    padding-right : 2px;
    font-family   : Georgia;
}

Assegnando questa classe alla prima lettera del paragrafo, avrete un simpatico effetto grafico.

Ovviamente i valori sono personalizzabili a seconda di cosa voglio ottenere.
Consiglio di usare “em” al posto di “px” per avere maggior dinamismo nelle risoluzioni mobili.
Usate inoltre caratteri “serif”, cioè “con grazie”, cosi da dare una certa estetica alla lettera ingrandita.
Per il colore potete usare indifferentemente “rgb”, “rgba” oppure esadecimale “#”.

Vediamo come inserire un’immagine.
Un procedimento analogo a quello della semplice lettera, si può seguire per quello che riguarda le immagini.
A differenza pero di un capolettera “testuale” che viene posto sempre all’inizio di un nuovo paragrafo, e quindi caratterizza l’inizio del periodo, le immagini possono essere posizionate in punti diversi, a seconda della necessita.
Ci occorre quindi di far si che l’immagine, non appaia solo affincata dal testo, ma spesso ne sia avvolta.
Contrariamente a quanto si possa pensare, le normali proprietà di allineamento non sono adatte.
Con gli allineamenti “baseline, top, button, middle” e alcuni altri, l’immagine non viene allineata al testo intero, ma solo alla prima linea del paragrafo, causando cosi uno scompenso antiestetico nella pagina.

.posizioneImg{
      float : left;
      margin : 10px; 
      /* facoltative - da usare se si vuole ridurre l'immagine */
      display : inline;
      width: 30%; 
      height: 30%;}

Gli attributi “display”, “width” ed “height” sono facoltativi inquanto, display è “inline” di default, width ed height se non specificati, consentono al programma di acquisire le reali dimansioni dell’immagine.

Qui sotto un esempio del codice sopra indicato, contando anche un dimensionamento della colonna.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc nisi, dignissim elementum ultricies sed, consequat eu nisi. Proin nibh ligula, condimentum sodales convallis ac, auctor ac augue. Cras et aliquet orci. Aliquam dignissim dolor nibh, in dignissim elit vulputate vel. Sed malesuada dui non justo sagittis, ac ullamcorper purus hendrerit. Cras id placerat velit, at imperdiet arcu. Vestibulum suscipit nec lectus ac interdum. Praesent eget dignissim enim. Proin in quam magna. Aenean nec urna consequat, consequat lacus et, vestibulum neque. Mauris interdum, diam sed dictum tincidunt, diam ligula feugiat neque, sed venenatis ipsum nunc id ipsum. Fusce et sapien in quam ornare commodo. Nullam aliquam nec sem eu ullamcorper. Proin nibh magna, ullamcorper non felis nec, sodales tempus mi.

Curabitur efficitur enim dui, sed congue nunc volutpat vel. Maecenas congue id quam ut placerat. Mauris nec magna odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus finibus, est vitae dapibus imperdiet, eros metus interdum lorem, id laoreet purus lorem quis erat. Donec ullamcorper vitae ligula eu suscipit. Quisque sem lacus, ultrices at mauris nec, lacinia sagittis magna. Cras purus nisi, convallis id ornare ultricies, efficitur quis diam. Vivamus tempus malesuada consectetur. Duis dolor metus, semper in augue sit amet, lacinia placerat turpis. Proin scelerisque massa sapien, nec blandit turpis consectetur eget. Sed at iaculis massa. Donec nec laoreet ante, eget iaculis mauris. Sed est arcu, dictum a velit euismod, sollicitudin egestas est. Vestibulum sagittis nisl id magna lobortis, at pellentesque turpis consequat. Aliquam at vehicula tellus, pretium condimentum est. Integer a sapien sollicitudin, pellentesque lorem sed, placerat leo.

CSS – Capolettera

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *