Spesso vi sarà capitato, navigando, di imbattervi in siti in cui alcune sezioni avessero gli angoli arrotondati. Se l’avessimo visto almeno una decina di anni fa non avremmo avuto dubbi sulla loro implementazione. Si sarebbe infatti trattato di tabelle annidate con immagini al proprio interno: un approccio assolutamente da non perseguire in un web che sempre di più si batte per un codice semanticamente corretto e che non appesantisca le pagine. Vediamo quindi come fare ad ottenere, utilizzando immagini, box con angoli smussati utilizzando semplicemente i CSS. Il primo approccio che andremo a verificare è quello di un box a larghezza fissa. Per prima cosa quindi, col nostro programma di grafica, dobbiamo creare due immagini che andremo a posizionare in alto e in basso. Poi dovremo creare due DIV annidati ai quali poi attribuiremo delle semplicissime regole per ottenere un effetto di sicuro impatto, leggero e semplice da implementare. Come detto in precedenza, questo è un ottimo approccio per box di larghezza fissa. Qui potrete trovare una pagina esplicativa dalla quale copiare e analizzare il codice di questo esempio appena descritto.

Se invece abbiamo l’esigenza di creare un box, cosiddetto “liquido” e cioè non a larghezza fissa, ma che si può ridimensionare, abbiamo la necessità, non più di creare immagini a larghezza fissa, ma bensì dovremo creare i quattro angoli col nostro programma di grafica preferito così poi da implementarli nel nostro codice, come immagini di sfondo per quattro DIV che andremo ad annidare. Qui potrete trovare una pagina esplicativa dalla quale copiare e analizzare il codice di questo esempio. Noterete che la larghezza del box non è espressa con un numero preciso di pixel, ma è in percentuale, proprio per far notare come questo approccio sia indipendente dalle dimensioni del box. Non per ultimo, c’è un ulteriore metodo per implementare angoli arrotondati con i CSS, detto “modular corners”. Si tratta in questo caso di ottenere un box a larghezza fissa, ma che si adatta in altezza al contenuto al suo interno. Questo effetto lo otteniamo con una semplice immagine che andremo ad associare agli unici due DIV annidati che avremo. L’immagine che andremo a editare col nostro programma di grafica preferito, avrà pertanto, una larghezza fissa e una altezza massima decisa da noi, che però non sarà quella visibile in un primo momento, ma sarà quella massima fin alla quale avremo la possibilità che il nostro box si potrà adattare. Vediamo qui un esempio esplicativo con tanto di codice.

Penso che sia tutto…qualcuno ha cercato di creare anche angolo non utilizzando immagini, ma il risultato, pur essendo pulito e senza appunto immagini, non è dei migliori soprattutto se il box viene allargato. Così invece otteniamo ciò che vogliamo, con codice standard, accessbile, non tanto semanticamente corretto, questo è da dirlo, ma pur di non utilizzare javascript, quindi un approccio poco accessibile, meglio scendere a compromessi con la semantica e quindi ottenere un bel risultato visivo e usabile al tempo stesso. Buon markup a tutti con gli angoli arrotondati coi CSS!

Nonostante abbia già accennato ad alcune tecniche coi CSS, voglio comunque introdurre questo linguaggio con un post che ne spieghi un po’ di storia e le potenzialità. Dunque, i CSS nascono nel dicembre del 1996 con la loro prima implementazione definita CSS1, grazie al lavoro dei membri del w3c che volevano dividere la presentazione dal contenuto. Questo è infatti lo scopo dei CSS. Lo scopo dell’XHTML è, infatti, quello di essere un semplice linguaggio strutturale, cioè fornire alla pagina una semplice struttura di visualizzazione da parte del browser. Tutto quello che è grafica e presentazione doveva essere demandato ad altro e questo è stato ottenuto con l’implementazione dei CSS, più comunemente detti fogli di stile. CSS è, infatti, l’acronimo per Cascading Style Sheet, fogli di stile a cascata. Dopo la prima implementazione del 1996, i CSS1 furono seguiti dai CSS2 nel 1998 e tutt’ora sono in preparazione i CSS3, sottoforma di working-draft. I CSS sono questo quindi, un modo utile e indispensabile per dare alle nostre pagine un aspetto più professionale, oltrepassando i limiti insiti di un linguaggio di markup quale l’XHTML che non è in grado di offrire la flessibilità di un linguaggio dedicato come i fogli di stile. Possiamo infatti controllare tutto della nostra pagina a partire dall’aspetto tipografico. Con i fogli di stile è infatti possibile dare alle nostre pagine web un aspetto così professionale tale da sembrare quasi un foglio estratto da un word processor. Possiamo controllare oltre ai font e al colore, cosa peraltro possibile attraverso il tag font del vecchio HTML, oramai deprecato, anche l’interlinea, spaziatura tra lettere e parole, indentature e giustificazioni oltre a tutto quello che la vostra fantasia, grazie a pseudo classi e pseudo elementi, i CSS ci mettono a disposizione. L’aspetto tipografico è solo uno dei tanti che possiamo manipolare a piacimento coi fogli di stile. Possiamo, infatti, anche manipolare l’aspetto della pagina posizionando i vari elementi di essa. Grazie a varie proprietà possiamo controllare il posizionamento, i margini, il padding e tanto altro. Che dire, i CSS rappresentano una rivoluzione nel mondo del web-design e chi si occupa di questo non può esimersi dal conoscerli. Inoltre i CSS offrono la possibilità, grazie all’importazione di un singolo foglio stile per tutte le pagine che compongono il nostro sito, di modificare, contemporaneamente, l’aspetto di un elemento in tutte le pagine semplicemente cambiando una singola regola nel nostro foglio stile. Parlerò prossimamente dei vari metodi per collegare e implementare i fogli di stile all’interno delle nostre pagine così potrete vedere i vari metodi e scegliere quello che più si addice alle vostre esigenze. Spero che comunque, con questa breve introduzione, chi di voi volesse avvicinarsi al mondo del design di pagine web, non si sottragga allo studio di questo potente linguaggio. Per finire vi rimando ad un sito che io trovo spettacolare e che vi mostrerà le potenzialità dei CSS: pensate, la stuttura della pagina è sempre la stessa, ma, a seconda del foglio di stile collegato, il design cambia radicalmente. Il sito è ZenGarden, scegliete sulla destra lo stile che volete e verificatene voi stessi la potenzialità. Buon divertimento!

Ciao a tutti, ora affronteremo il problema di centrare un box di dimensioni fissi all’interno della pagina, qualsiasi sia la dimensione di quest’ultima. Il risultato che vorremmo ottenere sarà quindi questo:

Per prima cosa definiamo il nostro box, nel quale poi inseriremo qualsivoglia codice XHTML per ottenere un form o altro. Questo il codice:

<body>

   <div id="centeredbox">

      Testo contenuto nel box.

   </div>

</body>

Questo quindi il codice comprendente il div che andremo a centrare tramite le prossime definizioni nel foglio di stile, andiamo ad analizzarlo:

div#centerdbox {

   display:     block;

   width:       300px;

   height:      200px;

   position:    absolute;

   top:         50%;

   left:        50%;

   margin:      -100px 0 0 -150px;

   background:  #900;

}

Dunque, nelle prime tre righe abbiamo definito la dimensione del nostro box, ci sarà utile ai fini del posizionamento e tra poco vedremo perché. Nelle tre righe successive posizioniamo il box in modo assoluto al centro della pagina, ma così facendo centriamo l’angolo superiore sinistro al centro della pagina, è questa infatti la consuetudine per quanto riguarda il posizio per cui abbiamo bisogno di spostarlo della metà delle dimensioni del box a sinistra e in alto così da ottenere un la centratura. Questo lo facciamo modificando l’attributo margin nell’ultima riga. Ricordate, abbiamo detto che le dimensioni del box ci sarebbero state utili ai fini della centratura. Ebbene, qualsiasi saranno le dimensioni del vostro box, ricordate sempre che, per centrarlo dobbiamo impostare dei margini negativi, onde spostare l’angolo superiore sinistro, più in alto e più a destra nella misura della metà delle dimensioni del nostro box. Nel nostro caso, infatti, il box è alto 200px e largo 300 per cui, per farlo andare al centro dobbiamo farlo “salire” della metà dell’altezza, quindi 100px e spostarlo a sinistra della metà della larghezza, per cui di 150px. come Questo, come detto prima, lo otteniamo grazie alla riga margin: -100px 0 0 -150px.

Con questa semplice tecnica, otteniamo un effetto di sicuro impatto, utile per centrare qualsiasi elemento block-level. L’unico neo che possiamo trovare a questa tecnica è quello di dover conoscere sempre a priori le dimensioni del box da centrare, ma è un problema veniale. Spero possa esservi utile, presto altre guide sui CSS pronte all’uso, non mancate!