Category Archives: html

CSS3 – Effetto polaroid

  
L’idea di oggi era quella di trovare un metodo per presentare in modo carino ed affascinante le immagini all’interno di una pagina web. Stanco dei soliti sistemi troppo “potenti”, volevo qualcosa che fosse tanto semplice quanto d’impatto visto che un cliente aveva chiesto questo per il suo sito.
La prima idea che mi è balzata in mente è stata quella di creare un effetto polaroid sulle foto che mi erano state inviate ma questa volta non avrei usato GIMP come sono solito fare ma avrei creato il tutto con CSS3 in modo da applicare l’effetto a qualsiasi immagine in mio possesso. Visto il grande ritorno del vintage e il successo di Instagram, l’idea mi pareva molto bella per un sito moderno e giovane.
Partendo dal presupposto che una foto nel vecchio formato polaroid ha di per sè una base estetica molto semplice, vediamo come strutturare l’idea e come svilupparla in poche righe di CSS.
fonte: http://media.photobucket.com/image/recent/labelle_7/polaroid.jpg
Si vede facilmente come la struttura della foto sia composta dall’immagine principale (centrata in orizzontale), un contorno bianco che presenta, rispetto al bordo esterno, due distante diverse: una è data dalla distanza maggiore del lato inferiore rispetto al corpo centrale vero e proprio mentre gli altri tre lati hanno pari distanza.
Inoltre per rendere l’immagine più “dinamica” si potrebbe pensare di aggiungere una lieve ombra che da sicuramente un tocco più realistico alla composizione.
Vediamo il codice CSS usato per dare l’effetto voluto:
Il codice è molto semplice. Analizzando il tag della classe .polaroid, con le prime tre righe si crea il bordo bianco intorno all’immagine, le quattro che seguono creano una lieve ombra intorno al contenitore (cercando di mantenere la compatibilità con tutti i browser) che nel nostro caso rappresenta l’intera foto, mentre l’ultimo rigo serve a mantenere l’immagine vera e propria centrata nel bordo bianco. Per quanto riguarda il tag img, invece, si è semplicemente detto al css di fare in modo che l’immagine si adatti al contenitore in cui viene inserita.
Ora vediamo il codice HTML per creare la foto nelle nostre pagine web:
Sicuramente con poche righe di codice è possibile avere un effetto molto carino e di impatto senza dover ricorrere a programmi di fotoritocco o pesanti righe di codice javascript.
Per visualizzare un esempio potete visitare questa pagina.
 

ElRTE: fantastico WYSIWYG Open source per il web


Sono sempre andato alla ricerca di un buon editor WYSIWYG open source poiché tali strumenti aiutano indubbiamente il lavoro o perlomeno favoriscono la progettazione di semplici comparti web. Il problema di tali software però è che spesso sono o troppo pesanti o dotati di troppi strumenti a me poco utili. Quello che voglio presentare oggi, invece, è, secondo me, fantastico sia per il suo sistema di uso che per la sua semplicità.

ELRTE, sviluppato da Studio42, è un editor WYSIWYG pensato per il web scritto in JavaScript e JQuery. Esso permette di strutturare l’aspetto della propria pagina web, post di un blog o topic di un forum e di prelevarne il codice HTML da usare.

La cosa, a mio avviso, fantastica di elRTE è che esso non necessita di installazione ma è una semplice pagina web da aprire con il proprio Browser e da utilizzare come meglio si crede. È anche possibile, ad esempio, caricare il file sul proprio spazio web e permetterne l’uso ai propri utenti per offrire, sicuramente, un ottimo servizio.

Tra le sue funzionalità troviamo:
  • Gestione avanzata dei CSS
  • Leggerezza e semplicità di implementazione e di uso
  • Possibilità di lavorare su editor o direttamente sul codice
  • Localizzazione per diverse lingue
  • Gestione immagini, animazioni, tabelle, …
CI tengo a precisare che elRTE è rilasciato sotto licenza BSD e può essere utilizzato in progetti sia commerciali che non.

Il software promette davvero bene e lo sto iniziando ad usare con soddisfazione. Consiglio a tutti gli interessati di provarlo e magari di condividere le proprie impressioni in un commento...

Notizia appresa da Linux Freedom for life

Tabulazioni e spazi nell’HTML


Quando si gestisce un blog o un sito come questo è di notevole importanza postare codice per chiarire al meglio gli argomenti trattati ai lettori.
Ogni buon programmatore sa che per avere un codice leggibile e chiaro è fondamentale usare l’indentazione, ovvero l’inserimento di spazi bianchi (o tabulazioni) che precedono alcune parti di codice per creare un effetto grafico che evidenzia dove inizia e dove finisce un blocco di codice. Al fine della compilazione del codice, l’uso di questa tecnica non è fondamentale ma rende sicuramente il codice più “pulito” e più “chiaro” per se e per gli altri.

Lavorando su piattaforma blogger/blogspot ho notato che quando si scrive una frase preceduta da una tabulazione o da alcuni spazi bianchi, nel momento in cui si visualizza il post essi vengono ignorati e il codice risulta piatto, più simile ad una lista della spesa che ad un lavoro di altissima programmazione ingegneristica :-).

Ecco allora che giungono in aiuto i tag html.

Esiste un particolare elemento html che permette di interpretare tutto ciò che è inserito tra i tag così come si presenta. Questo vuol dire che se una frase è preceduta da spazi bianchi allora nel post essa si presenterà così com’è. Tutto ciò è di particolare importanza per chi scrive codice poichè racchiudendo il listato tra i tag pre e /pre (ovviamente chiusi tra parentesi angolari ) esso si presenterà così come lo avete scritto.

Ecco la differenza tra un codice con il tag pre e il codice senza pre

CON PRE


if (a==b)
{
printf("a uguale a b"\n);
return 1;
}

SENZA PRE


if (a==b)
{
printf("a uguale a b"\n);
return 1;
}

Converrete con me che la differenza in fatto di chiarezza è rilevante già su quattro righe di codice. Non pensate che su un programma intero la cosa lo renderebbe più chiaro?