Fortunatamente la nuova versione dei Css darà una bella svolta anche a questa parte del lavoro… ma fermi tutti, chi ha detto che dobbiamo aspettare il 2014 per metterci mano subito?  

I Css3

La nuova specifica dei Css permette di creare sfumature da codice, ma attenzione non si tratta di una nuova proprietà ma di nuovi valori, possiamo assegnare sfumature come background-color di qualunque elemento.

Le differenze di sintassi

La sintassi non è proprio “facile” quindi potrebbero essere le prime cose da voler snippettizzare o copiare/incollare:

background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Opera */
background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Da IE 10 in poi! */
background: linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Possibile finale */

Questo esempio genera una sfumatura lineare tra due tonalità di arancione, con tutti i prefissi per i browser più la quella che dovrebbe essere la versione “definitiva”. In generale se specifica il tipo di gradiente (lineare o radiale), la direzione e i vari stop, ovvero i punti di color, ognuno di questi è composto dall’esadecimale del colore e una percentuale che indica la posizione di questo (0 inizio, 100 fine, 50 metà… giusto per darci qualche riferimento!)

Illustrator CS5 + Html5 pack

Utenti dell’ultima versione di Illustrator e al contempo webdesigners gioite! Da diversi mesi sul sito Labs di Adobe è disponibile un pacchetto aggiuntivo per l’editor vettoriale che permette di esportare alcune proprietà di aspetto degli elementi in Css3… e indovinate qual’è la più interssante? Quindi potete disegnare le sfumature in Illustrator e averle comodamente codificate in Css senza dove scrivere una lettera!

Selezionate l’elemento dal quale volete esportare la sfumatura, andate sul pannello “Aspetto”, pigiate il menu del pannello (il triangolo nero in alto a sinistra)

Altri tools

Oltre all’estensione di Illustrator, esistono anche diversi altri tools per la creazione di sfumature CSS(3), molti di questi anche online. Consiglio vivamente quello di Colorzilla che oltre alle sintassi di webkit e mozilla genera anche un filtro per IE (precedenti al 9), la sintassi specifica per Opera e un colore a tinta unita per i browser che non supportano nessuna di queste soluzioni!

Normalmente se a un elemento non viene specificata l’altezza tende a essere alto tanto quanto il suo concenuto (più il padding e i bordi come ci dice il box-model) ma magari la nostra esigenza è proprio quella di mantenere i box all’altezza definita ma fare i conti con il troppo testo…

Entra in gioco overflow

I Css (già dalla versione 2.1 quindi uno standard) mettono a disposizione la proprietà “overflow” per sistemare questo tipo di problemi con 3 possibili valori: “hidden”, “visible” e “scroll”. Da questo esempio potete vedere le 3 differenze, ma sappiate fin da subito che “visible” è il comportamento di default (in questo esempio sto usando tre paragrafi messi in colonne con un’altezza fissa di 200px e mooolto testo):

• Visible – lascia “overflussare” il contenuto (e fare pasticci)
• Hidden – nasconde il contenuto di troppo tagliandolo barbaramente (utile per nascondere le briciole sotto il tappeto in casi di emergenza)
• Scroll – fa apparire una simpatica barra di scorrimento intorno solo al nostro elemento

La quarta proprietà

Esiste una quarta proprietà “auto” che permette al browser di decidere come comportarsi, ma il più delle volte ripiega sullo “scroll”, quindi per evitare casini tanto vale dirgli chiaro e tondo cosa vogliamo… se lo sappiamo!

Quando NON usare scroll

Principalmente in ambito mobile, se realizzate pagine per tablet o smartphone abolite l’uso di scrollbar in quanto entrano in conflitto con l’azione di fare scroll su tutta la pagina, specialmente se sono barre piccole o sottili. Ci sono altri modi per “comprimere” i contenuti senza le barre di scorrimento!

E per cambiare l’aspetto della barra?

I Css normalmente non permettono di cambiare colore o dimensioni delle barre di scorrimento generate con questa proprietà, ma esiste un simpatico plugin di jQuery neanche troppo complesso da usare che permette questo lavoro: jScrollPane.

Come al solito trovate la raccolta di tutti codici usati nel Tips nel mitico file CSS Tips - File di riferimento !

Ma c’è un piccola questione di fondo, tutti i vari a capo, tabulazioni e commenti incidono sul peso del file .css! Non sempre in modo considerevole ma lo fanno.

No, non vi sto dicendo di smettere di commentare i Css anche perché poi sarebbe un delirio riuscire a metterci le mani sopra in futuro, ma dobbiamo imparare a comprimere il codice in fase di pubblicazione!

Qual’è la differenza?

A sinistra c’è un esempio di codice “classico” mentre a destra un’esempio di codice compresso.

Codice Classico: è semplice da leggere, contiene i commenti, il testo è formattato in base alle nostre esigenze ed è quello che vorremmo usare in locale sul nostro pc per poterci lavorare.

Codice Compresso: umanamente illeggibile, il testo è tutto su una singola riga, è quello che vorremo pubblicare online in quanto è più veloce da caricare e i commenti non sono presenti.

Come comprimo il codice?

Se scriviamo “css compressor” su un motore di ricerca avremo molti risultati, uno dei migliori è quello offerto da CSS Drive. Ci basta indicargli un paio di semplici opzioni, in genere indico “super compact” e “strip all comments” (elimina tutti i commenti) e dopo aver incollato il codice nell’area indicata premiamo su “compress it” per ritrovarcelo poi in forma compressa.

Notate che alla fine dell’operazione ci viene sempre indicato quanto spazio è stato risparmiato, in media si risparmia tra il 20% e il 30% per ogni file, cosa che rende questo processo molto importante in ambito professionale.

Attenzione!

Ricordatevi sempre di incollare il codice compresso in un nuovo file, magari con un nome simile ma che ci faccia intuire la sua natura, molti designer inseriscono la parola “min” nel nome per indicare che si tratta della versione “minified” ovvero compressa. Non è possibile de-comprimere il codice!

Fortunatamente con il nuovo standard alle porte CSS3, la questione è gestibile con delle proprietà più adatta e maggiormente intuitive!

/* il numero di colonne nei quali vogliamo suddividere il testo */
column-count: 3;
/* impostiamo la distanza tra le colonne */
column-gap: 10px;
/* per settare la larghezza delle colonne */
column-width: 200px;
/* per creare un bordo che divida le colonne */
column-rule: 1px solid gray;

Provate a vedere questo codice in azione!

Trovate TUTTI i codici dei Css Tips nel CSS Tips - File di riferimento da scaricare.

PS: ricordatevi i suffissi -webkit- e/o -moz- per vedere funzionare queste proprietà su Chrome, Safari e Firefox!

Prima di partire in quarta per vedere come funzione questo semplice servizio facciamo un attimo il punto della situazione per la questione “tipografia web” e vediamo cos’hanno da dire i CSS3 a riguardo, visto che come anticipato dallo scorso tip ora se ne parlerà un po più spesso!

L’attuale problema dei font

Con gli attuali standard Css tramite la proprietà “font-family” possiamo indicare un qualunque font da utilizzare sulle nostre pagine web… c’è solo il big problema che vengono utilizzati i font presenti sul nostro computer, che come si sa non sono necessariamente quelli presenti sul computer degli utenti che visitano i nostri siti! Obbligandoci cosi a lavorare con un gruppo ristretto di font…

Il miraggio dei CSS3

I Css3 introdurranno la proprietà “font-face” per permetterci di utilizzare tutti i font che vogliamo, previo upload di quest’ultimi sul server dove risiede il nostro sito (un po’ come delle immagini…), tuttavia questa futura possibilità non è ancora alla mano di tutti i browser, e il fatto di che questa nuova tecnologia installi in automatico i font sulle macchine dei visitatori dei nostri siti non piace a chi i font li vende…

Ma ora…. Google Font Directory!

Ok ora vediamo questo nuovo servizio di Google all’opera, ho preparato un breve video (circa 5 minuti) dove vi mostro come utilizzarlo:

…e qui una pagina di esempio!

Non c’è altro?

Beh da molto più tempo di Font Directory esiste TypeKit, che ha un catalogo di font moooolto più vasto e offre un servizio più completo… anche se la dinamica è simile , tuttavia TypeKit è a pagamento! (con un piano di prova gratuito comunque)

Dov’è il codice!

Gli esempi li potete tranquillamente copiare/incollare dal sito di Google Fonts, tuttavia se proprio volete un bel sommario nel CSS Tips - File di riferimento trovate parte dell’esempio del video!

Ma nonostante tutto alcuni webdesigners li usano, merito principalmente di Mozilla e Apple che hanno deciso di supportare subito questo nuovo standard nei loro browser anche se non è ancora stato ufficializzato. Per quanto riguarda Apple poi tramite i suoi dispositivi iPod Touch, iPhone e iPad che (volenti o nolenti) registrano milioni di vendite, il browser Safari è diventato il più diffuso in ambito mobile. Questa non è affatto una cosa da sottovalutare perche appunto significa che se stiamo realizzando pagine web “dedicate” al mobile o a quei dispositivi possiamo gia utilizzare gran parte delle nuove proprietà CSS3!

A questo punto facciamo un po di chiarezza e qualche considerazione:

Cosa sono i CSS3?

Sono il prossimo standard per i Cascading Style Sheet (lo standard attuale è il 2.1), permetteranno di realizare in una riga di codice molti effetti interessanti tra cui: angoli arrotondati, ombre per box e testi, immagini di sfondo multiple, web fonts, testi multi colonna e colori con trasparenza… insomma tutte quelle cose per cui bisogna attualmente ricorrere a barbatrucchi!

Se volete vedere qualche esempio di questi effetti, munitevi di un browser che supporti i CSS3 (leggete il paragrafo qui sotto) e andate su css3.info !

Chi li supporta?

Firefox e i browser a base Webkit (Safari e Chrome) usano dei Css proprietari per “anticipare” il supporto del nuovo standard, ovvero davanti alle nuove proprietà viene inserito un suffisso “-moz-” per il primo e “-webkit-” per il secondo.

Cosa succede se faccio pagine con CSS3 e vengono aperte da browser che non li supportano?

Semplicemente gli effetti CSS3 non saranno visibili. Detto cosi non sembra catastrofico ma di fatti lo è in quanto otterremmo un sito che viene visualizzato in due modi nettamente diversi in base il browser, il che è male in quanto lo scopo di un webdesigner è proprio realizzare un layout che posso essere visto allo stesso modo da parte di tutti gli utenti.

Quindi perche dovrei usarli?

Per realizzare pagine espressamente dedicate ai dispositivi Apple e Android, i quali browser preinstallati supportano a pieno il nuovo standard. Oppure tramite dei script in Javascript (o meglio per jQuery) possiamo rendere questi effetti visibili in tutti i browser (si, anche Internet Explorer!), ma la computazione da script rispetto ai CSS è sempre un pochino più lenta.

Oppure semplicemente per smanettare e imparare… e prepararsi al prossimo web .

Detto questo…

…sappiate che nei prossimi CSS Tips si parlerà un po più spesso dei CSS3 .

Ho dato una sistematina qua e la agli 11 “tips” pubblicati fin’ora correggendo qualche imperfezione, sistemando i file di esempio e aggiornando il logo della serie (quello che vedete qui a fianco) rendendolo un po più “allineato” con la nuova grafica del sito.

In gran parte dei CSS tips ora è possibile vedere degli esempi del codice spiegato nell’articolo in una simpatica finestra pop-up animata, servita tramite il plugin per jQuery Fancybox.

Infine, ora i CSS tips sono raggiungibili in 3 modi:

1. dalla pagina dei tutorial
2. dal tag “css tip” che elenca sia i tips che gli articoli annessi
3. dalla categoria “CSS tips” che elenca solo loro (e mi aiuta a me a gestirli )

Spero sia tutto di vostro gradimento

In questo CSS Tip vedremo come utilizzare queste proprietà, analizzando alcuni esempi pratici e ricombinando alcune conoscenze apprese in precedenza.

Inserire un’immagine di sfondo

Partiamo dal concetto più basilare, come inserire un’immagine di sfondo, la sintassi è questa:

background-image: url(erba.png);

Il nome della proprietà è abbastanza auto esplicativo, mentre è obbligatorio inserire la parola chiave “url” dopo i due punti e indicare tra parentesi il percorso dell’immagine da inserire. Sono accettati i principali formati di file grafici (jpg, gif, png) mentre a differenza del tag <img> in Html se l’immagine non dovesse essere caricata, o l’url inserito è sbagliato, non apprarirà alcuna icona di errore, semplicemente al posto dell’immagine di sfondo non vedremo niente!

Ripetere o non ripetere

Di default quando inseriamo un’immagine di sfondo, questa viene ripetuta in automatico sia in orizzontale che in verticale, tuttavia possiamo reimpostare questo valore usando la proprietà:

background-repeat: repeat-x;

questo “background-repeat” accetta 4 valori: repeat (ripeti – il valore impostato di default), no-repeat (non ripetere – l’immagine viene applicata una volta sola senza ripetizioni), repeat-x e repeat-y (rispettivamente ripeti in orizzontale e ripeti in verticale).

Nell’esempio indico all’immagine di ripetersi in orizzontale, il risultato è quello dell’immagine dei ciuffetti d’erba ripetuti che simula un prato che trovate nel Earth Hour Pack 2010.

Posizionare le immagini

Se utilizzate il “background-repeat: no-repeat” su un oggetto abbastanza grande (come per esempio il body del documento), vedrete che l’immagine rimane fissata in alto a sinistra. Anche questo è un valore standard e anche questo può essere modificato:

background-position: center top;

Usando la proprietà “background-position” (posizione dello sfondo) potrete passare due valori per indicare il posizionamento orizzontale (left, right, center – sinistra, destra, centro) o verticale (top, bottom, center – sopra, sotto, centro) determinando cosi la posizione dell’immagine nello sfondo. Attenzione, questo posizionamento dello sfondo non va confuso con i posizionamenti Css (absolute, relative, ecc..) che sono tutt’altra cosa!

Un po’ di colore…

Ci stacchiamo un attimo da discorso “immagini” per evidenziare un’altra proprietà che regola lo sfondo, il colore di sfondo:

background-color: #222222;

dopo il nome della proprietà inseriamo un valore esadecimale del colore con il quale verrà riempito lo sfondo dell’oggetto al quale applichiamo questa proprietà, combinando “background-color” con un’immagine di sfondo in Png e trasparente possiamo ottenere degli effetti interessanti non indicando un colore di sfondo, esso sarà trasparente.

…e infine, la scorciatoia!

Se tutte queste prorprietà vi sembrano troppe. provate a inserire tutti i valori visti poco fa in un’unica proprietà “background”:

background: url(erba.png) no-repeat #222222 center top;

cosi in una sola riga stiamo indicando 1) l’immagine da usare 2) la ripetizione 3) il colore di sfondo 4) il posizionamento verticale e orizzontale. La cosa importante in questo caso è ricordarsi di usare la proprietà “background” e basta ( e non background-repeat o altre) e di separare i valori con uno spazio, l’ordine di inserimento non è assolutamente rilevante!

Come sempre, trovate una referenza totale dei Css Tips nel CSS Tips - File di riferimento .

Abbiamo due pseudo selettori (tipo quello per il passaggio del mouse su un oggetto) per poter modificare gli aspetti dei primi e ultimi elementi di una serie, diciamo per esempio di una lista non ordinata…

Vogliamo colorare i titoli del primo e dell’ultimo episodio rispettivamente in azzurro e verde, i selettori Css saranno:

li:first-child{
   color: aqua;
}
li:last-child{
   color: green;
}

Qui vedete il codice in azione.

Facile no?

Come sempre trovate tutti i codici nel CSS Tips - File di riferimento scaricabile liberamente.

Sapendo che alcune proprietà sono comuni per tutti gli elementi mentre altre sono specifiche per ogni elemento, ho raggruppato quelle comuni come posizionamento fisso, display in blocco e text-indent in una classe generica:

.cpack {
	position:fixed;
	display: block;
	text-indent: -999%;
	border: 0;
}

A questo punto posso sfruttare le prossime regole Css che scriverò in combinazione con questa classe, in modo tale da non ripetere le proprietà comuni ogni volta ma definendo solo quelle specifiche per ogni elemento, come url dell’immagine da usare di sfondo, dimensioni del
div e coordinate del posizionamento:

#albero.cpack  {
	right: -130px;
	bottom: -15px;
	width: 342px;
	height: 538px;
	background: url(cpack09/albero.png) top left;
	z-index: 11;
}

Qui riporto solo un’elemento come esempio ma la cosa si ripete per tutti gli elementi. Partiamo dal selettore: scrivendo il nome del div seguito senza spazio dalla classe creò una selezione che dice al browser “prendi tutti gli elementi con id albero che hanno come proprietà class cpack”, questo selettore ha il vantaggio di essere molto preciso. Per le proprietà le uniche note “particolari” sono che sfrutto dei margini negativi per far rientrare leggermente le immagini in modo da farle sembrare nascoste fuori dallo schermo, e infine z-index per decidere (in caso di sovrapposizione) quale elemento deve stare sopra, se non vi ricordate come funziona potete rivedere il Css Tip #2.

Come ultima cosa creo dei div in Html ai quali mi basta assegnare la classe generica e l’id specifico pe trasformali negli elementi grafici che volevo:

In questo modo ho un codice Html leggerissimo e un Css otimizzato e sopratutto riutilizzabile anche nel caso di nuovi elementi simili, ricordatevi sempre per una semantica corretta: Id solo una volta e con un nome unico per ogni elemento, mentre le classi possono essere utilizzate su più elementi!

Potete trovare il file .css completo nel Christmas Pack 2010  e ricordatevi di ripassare tutti i giorni fino a venerdi per altre risorse natalizie!

Da qualche tempo ormai gran parte dei browser (per non dire tutti) offrono il supporto alla trasparenza tramite Css, l’unico vero problema al momento è che ogni browser ha un po una sua sintassi per questo effetto.

Quando i CSS3 saranno completamente sviluppati e supportati da tutti browser potremo finalmente gestire questo effetto con una sola regola Css… per ora invece ci tocca doverci rimboccare le maniche e chiarire un paio di cose .

Attualmente se vogliamo ridurre all’osso gli sforzi abbiamo necessariamente bisogno di queste due proprietà per dare una trasparenza da Css cross-browser:

opacity: 0.4;
filter:alpha(opacity=40);

Entrambi renderanno l’oggetto che subisce queste proprietà trasparente al 40%, la differenza sta che la prima riga è la proprietà “universale” e che ovviamente Internet Explorer ignora, mentre la seconda è appunto la proprietà specifica per il browser di casa Microsoft.

Aggiornamento 11/08/2011: dalla versione 9 anche Internet Explorer supporta la proprietà “opacity” degli standard Css, anche per l’hover. Quindi le due proprietà “filter” che cito in questo articolo servono solo per garantire compatibilità per gli effetti di trasparenza con le versioni dall’8 in giù.

Se vogliamo essere ancora più scrupolosi e precisi (e cross-browser) possiamo aggiungere queste altre due proprietà:

-moz-opacity:0.4;
-khtml-opacity: 0.4;

Anche queste due abbassano l’opacità al 40% , ma si riferiscono ai vecchi browser Mozilla (Firefox 1 e Netscape). Safari pre-Webkit (Safari 1) e Konqueror (famoso nell’ambiente Linux).

Per effetti al passaggio del mouse

Le suddette proprietà funzionano anche applicate ad :hover , tranne nel caso di Internet Explorer… per ovviare questo problema dobbiamo aggiungere una proprietà che si occupa di effettuare il cambiamento di opacità per questo browser, la sintassi non è proprio semplice quindi vi suggerisco di copiare-incollare:

...
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
...

Questa proprietà ricordo serve solo se vogliamo applicare effetti di trasparenza al passaggio del mouse, quindi dovremo definire l’opacità iniziale nella regola base dell’oggetto, e l’opacità al passaggio nella regola con :hover. Prova l’effetto!

Se non sapete gia la risposta probabilmente è perche avete sempre realizzato siti dove in tutte le pagine i contenuti riempiono in lunghezza un monitor di dimensione media (15/17 pollici a 1024×768 pixel) e non siete ancora incappati nello sfortunato caso in cui il footer non occupa proprio la posizione di cui prende il nome (piede di pagina)…

Nel caso in cui questo fattaccio capiti in una sola pagina potreste inventarvi da voi delle soluzioni per mettere una “pezza” al problema e risolvere la questione, ma quello che voglio mostrarvi ora è un metodo per rendere questa soluzione dinamica e fare in modo che con qualche regola CSS e un paio di righe markup Html aggiuntivo si possa sistemare la questione in tutte le pagine.

Premessa

Alcune regole CSS che utilizzo in questa soluzione possono sembrare ridondanti, effettivamente lo sono ma servono a fare in modo che questo codice funzioni allo stesso modo su più browser possibili. Quando ti seguito l’ho sperimentato personalmente con esiti positivi su Firefox 3.5, Safari 4, Opera 9 e Internet Explorer 7.

In questa pagina potete vedere un’esempio del caso descritto poco fa, per porre rimedio a questa situazione affronteremo un paio di cosette nuove: i margini negativi e la regola !important ; oltre a questo è tutto CSS “classico”.

La prima cosa da fare è dire al nostro documento che dovrà espandersi al 100% dell’altezza della finestra del browser in cui si trova:

html, body {
	height: 100%;
}

poi dovremo fare in modo che il div contenitore dentro il quale sviluppiamo il nostro sito si espanda anche lui al 100% dello spazio verticale disponibile, e lo costringeremo a farlo imponendogli il valore dell’altezza anche come altezza minima:

#contenitore {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}

Per ora lasciate stare l’ultima riga la spiegherò nel prossimo passo. In questo punto è dove può sembrare un po ridondante il codice: siccome non tutti i browser non reagiscono allo stesso modo abbiamo bisogno per sicurezza una regola che dica che l’atezza di questo div deve essere automatica (cioè in base a quanto concede la finestra del browser) e la indichiamo come regola importante con la parola chiave !important , con !important si fa in modo che una determinata regola prevalga su altre che modificano la stessa proprietà indicata anche se sono “gerarchicamente” superiori.

A questo punto scriviamo i Css anche per il footer e per un’elemento extra che chiameremo “push” (spinta):

#footer , .push {
	height: 30px;
	line-height: 30px;
}

Questa è la parte più interessante… tralasciamo il line-height che serve solo a centrare verticalmente il testo, come potete notare l’altezza di entrambi #footer e .push è uguale al margine inferiore negativo del contenitore. La logica di base inizia a prendere forma, capirete meglio tutto quando vedrete il markup Html:

CSS Tip #7
Footer sempre in fondo

io sono il footer che sta sempre giu

Praticamente cosa abbiamo combinato: documento e div contenitore si espandono al 100% dello spazio verticale, ma il div contenitore avendo un margine negativo di N pixel (nel nostro caso 30) tenderà ad andare ancora più al di sotto di quanto spazio c’è disponibile, il div .push ha l’altezza degli stessi N pixel il che riporta il div contenitore a occupare esattamente lo spazio verticale disponibile, ma permettendoci di inserire un’altro elemento al di sotto di esso, ovvero il footer.

So che la spiegazione può non essere chiara a tutti, io stesso i primi tempi ci ho messo un po’ a capire questo meccanismo, se avete dubbi o perplessità potete sempre scrivermi una mail o postare un commento in fondo all’articolo.

Qui potete trovare la pagina con il codice corretto, vi basterà fare Tasto destro -> Visualizza codice per vedere il tutto, essendo l’esempio molto breve ho incluso i css nel file html, in modo da rendervi la consultazione più rapida.

Concetti chiave

Il documento e il div contenitore devono espandersi al 100% dello spazio verticale che offre il browser.

Il margine inferiore negativo del div contenitore e le altezze di “push” e del footer devono essere uguali.

Facendo riferimento al caso in cui questo non sia l’effetto desiderato, vi propongo un modo semplice per sistemare questa cosa con un paio di righe di jQuery. Considerando che la soluzione che vi sto per illustrare è dinamica, può tornare utile anche nel caso l’elemento contenuto non abbia sempre la stessa altezza, per esempio se al suo interno carica contenuti dinamici che cambiano di volta in volta, impedendo cosi di utilizzare un valore fisso di altezza per sistemare il tutto.

Software Richiesto

Tenicamente anche nessuno… html, css e javascript (e jQuery) si possono editare da un “blocco note”, tuttavia utilizzare editor appositi fa risparmiare tempo e energie. Io utilizzo Dreamweaver CS4 che è a pagamento (potete comunque provarlo gratis per 30 giorni), ma potete anche considerare Aptana che oltre ad essere freeware è maggiormente indicato per scripting.

Prerequisiti

Conoscenza di base di HTML e CSS e il tutorial “iniziamo con jQuery”

Argomenti Trattati

Manipolazione delle proprietà CSS di elementi HTML, aggiunta di contenuti a un documento HTML

1. Creiamo la situazione di partenza

Seguendo rispettivamente il CSS Tip #6 e il tuorial “iniziamo con jQuery” fino al passo 2 (compreso), creiamo la situazione iniziale del “problema” per questo tutorial. Se scaricate il file zip in fondo al tutorial, nella cartella “situazione_iniziale” trovate tutti i file gia pronti.

2. Variabili in jQuery

Nel file dei nostri script scriviamo all’interno della funzione principale la seguente riga di codice:

...
var altezza = $("#oggetto").height();
...

Con il termine “var” facciamo sapere al compilatore che stiamo per definire una variabile (se non sapete cos’è una variabile vi rimando alla definizione di Wikipedia); la parola che segue subito dopo è il nome che decidiamo di dare alla nostra variabile, nel nostro caso “altezza” (in generale è consigliabile usare nomi facili da ricordare o pertinenti a quello che si sta facendo per evitare di incasinarsi da soli!); dopo il simbolo “=” definiamo il valore della variabile, nel nostro caso invece di usare un valore fisso gli diciamo di andarsi a ricavare il valore di altezza del div con id “oggetto” usando il selettore jQuery per prendere quel specifico div ( $("#oggetto") ) e leggendone l’altezza ( .height() ), ricordatevi sempre di chiudere ogni riga di codice con il “;”.

3.  Impostiamo l’altezza del contenitore

Grazie alla prima riga di codice abbiamo anche le conoscenze necessarie per scrivere la seconda:

...
$("#contenitore").height(altezza + 20);
...

Selettore jQuery per div con id “contenitore”, e nella proprietà di height (altezza) gli passiamo come valori la variabile creata nella riga prima + 20 pixel, questa è un’aggiunta personale per fare in modo che il contenitore essendo un po’ più alto dell’oggetto contenuto crei un po di bordo, se questa cosa non vi servisse vi basta cancellare il “+ 20″.

4. La prova del 9 con la proprietà “.append”

Nel caso in cui l’altezza del div “oggetto” non sia specificata da CSS ma dipenda proprio dal ciò che c’è al suo interno (nel file zip da scaricare a fine tutorial vedete la cartella “altezza_variabile”), potreste volere usare queste altre due righe di codice per controllarne l’altezza effettiva:

$("body").append("<h3>L'altezza del div rosso e' " + altezza + "</h3>");
$("body").append("<h3>Il Div nero ora ha un'altezza di " +
 (altezza + 20) + "</h3>");

Con “.append” si aggancia un qualcosa all’elemento selezionato, nel nostro caso attacchiamo delle righe di testo formattate con h3 all’elemento body, il codice va inserito tra virgolette “” e usando l’operatore + gli diciamo di aggiungere la variabile “altezza” che abbiamo definito poco prima, quindi il testo risultante sarà la somma del primo pezzo di codice + il valore della variabile altezza + la seconda parte di codice. Nella seconda riga ripetiamo esattamente quello che accade nella prima, tranne che vogliamo vedere il risultato del valore di “altezza” sommato a 20 pixel, l’espressione “altezza + 20″ la mettiamo tra parentesi tonde per fare in modo che venga visualizzato il risultato di quella somma.

Se aprite ora la vostra pagina nel browser vedrete il div “contenitore” che si adatta all’altezza del div “oggetto” (con qualche pixel in più se avete lasciato il +20) e due righe di testo che vi mostreranno il valore dell’altezza di entrambi i div.

Conclusione

Metto a disposizione un file .zip da scaricare che contiene 3 cartelle, una con la situazione iniziale, una con la soluzione ma dove l’altezza del div “oggetto” è definita da CSS  e una con la soluzione ma senza altezza definita per il div “oggetto”. Ogni cartella contiene 4 file:

• - pagina.html – quella che dovrete lanciare per vedere funzionare il tutto e che contiene i due div “protagonisti”
• - stili.css – dove definisco gli aspetti dei due div
• - jquery.js – il file fondamentale per fare girare il nostro script
• - script.js – il file che contiene lo script ottenuto da questo tutorial

In precedenza avevo accennato al discorso di come posizionare oggetti in modo fisso alla pagina, l’unico problema di quella nozione era che non vi permetteva di posizionare gli oggetti all’interno di blocchi <div>, questo perche il posizionamento assoluto nei Css al momento della visualizzazione “rimuove” l’oggetto con la suddetta proprietà dalla struttura Html (ripeto è una rimozione che avviene solo a livello visivo, il vostro codice rimane inalterato!) e lo posizione liberamente alle coordinate specificate della pagina.

Ma tutto questo accade solo se l’oggetto con proprietà “position: absolute;” si trova all’interno di un oggetto con proprietà “position: static;” , che è il valore di default per il parametro “position” che viene attribuito ad ogni oggetto.

Per fare in modo che un oggetto con posizionamento assoluto venga posizionato relativamente all’interno di un blocco <div> dovremo attribuire all’oggeto “parente” (ovvero quello che nel codice Html è superiore all’oggetto interessato) il parametro di “position: relative;”.

Passiamo a un paio di esempi pratici per rendere meglio l’idea, ipotizziamo di avere due oggetti: “div1″ e “div2″ (notare la fantasia dei nomi) e di applicargli le seguenti regole Css:

#div1 {
	position: relative;
	margin-top: 20px;
	background-color: #fff;
}
#div2 {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #900;
	top: 0;
	right: 0;
}

Il primo concetto chiave da capire è che il posizionamento assoluto va dato all’oggeto da posizionare, mentre quello relativo va dato all’oggetto che conterrà quello da posizionare.

Il secondo concetto chiave riguarda l’ordine Html dei due oggetti, se scriviamo semplicemente <div id=”div1″></div> seguito da <div id=”div2″></div> otterremo quello che gia conoscevamo dal CSS tip #2, ovvero che il div2 con posizionamento assoluto andrà a posizionare all’angolo in’altro a destra della pagina, mentre se scriviamo il div2 contenuto all’interno del div1 (<div id=”div1″><div id=”div2″></div></div>) otterremo il nostro risultato, avere il div2 posizionato all’interno del div1 (come nell’immagine sopra).

Ricordo che potete scaricare il file di referenza per i CSS Tips.

Nota:

Per precedenti nozioni riguardo Z-Index e posizione assoluta date un’occhio al CSS tip #2.

Anche se possiamo ottenere gli stessi effetti , o anche di migliori, tramite linguaggi di script, ricorrere alla parametro :hover ci permette di dipendere un po meno da questi ultimi e di realizzare “anteprime” di pagine web con un minimo di effetti in breve tempo.

Un’anteprima del risultato lo potete vedere in questo esempio.

Sottolineatura e cambio di colore al passaggio

Il primo e più gettonato effetto in :hover dei Css è la sottolineatura dei link che appare al passaggio del mouse. La realizzazione di questo effetto è molto semplice e con la stessa logica si possono applicare altri parametri come il cambio di colore o di dimensione dei font.

.testo a {
color: #09F;
text-decoration: none;
}
.testo a:hover {
color: #FFF;
text-decoration: underline;
}

Praticamente con la prima regola definiamo l’aspetto base del link, creado un duplicato della regola e aggiungendoci alla fine “:hover” possiamo definire la visualizzazione del link al momento in cui il cursore del mouse si posizionerà sopra di esso.

E lo sfondo?

Se invece volete realizzare un qualcosa di visivamente più attraente, si può fare in modo che al passaggio del mouse su un determinato elemento cambi colore oltre che al testo anche lo sfondo.
In questo caso ho aggiunto una regola che va a intervenire su li:hover , semplicemente cambiando il colore di sfondo e del testo (in questo caso li ho invertiti rispetto allo stato normale) a aggiungo lo stile che trasforma il puntatore del mouse:

.provamenu1 li:hover {
color: #1A64FC;
background-color: #FFF;
cursor: pointer;
}

notate che a questo punto non ho ancora definito il link nell’html… il problema è che se mettessi questo stile sull’elemento <a> avremmo l’effeto :hover applicato solo ed esclusivamente nell’area di quel preciso tag, quindi cambierebbe colore si il testo, ma solo lo sfondo intorno ad esso e non in tutta la riga come avviene invece in questo esempio. Per ovviare il problema rendiamo cliccabile e linkabile l’oggetto tramite una banale riga di “classico” Javascript:

<li onclick="location.href='http://www.moebiusmania.net/';">Voce di menu #1</li>

dove dopo .href=’ e prima di ‘;” inserite l’indirizzo che vi serve di linkare da quella voce.

Piccola nota: questa riga di Javascript può essere applicata anche ai <div>!

Per finire…

Da oggi potete scaricare un file .css contenente tutti i tips trattati in questa serie, che include gli stili completi degli esempi scritti qui, che può tornare utile come piccola libreria Css.