Web Design

Le proprietà box-sizing e overflow di CSS possono essere utilizzate per definire velocemente dei div-box anche nel caso in cui si preveda un annidamento; nel caso speficico di questo post utilizzeremo i costrutti basati su di esse per realizzare due contenitori, uno vuoto e l’altro destinato a contenere un ulteriore div-box avente la medesima distanza (margine) da tutti i lati del box nel quale è stato inserito. Sostanzialmente il nosto obiettivo sarà quello di ottenere un output come il seguente:
Continua a leggere →

Quando si linkano delle risorse all’interno di una pagina Internet, queste divengono generalmente scaricabili se non sono state salvate in un formato leggibile tramite browser Web o attraverso un plugin integrato in esso, si pensi per esempio al caso delle immagini o dei file PDF; l’attributo download di HTML5 è stato introdotto proprio per distinguere le risorse linkate da quelle scaricabili, risolvendo così un problema precedentemente lasciato alla gestione da parte degli utilizzatori se non degli sviluppatori.

Continua a leggere →

Nell’articolo precedente abbiamo descritto la procedura necessaria per ottenere una doppia colorazione dei caratteri utilizzando esclusivamente regole di stile CSS; come sottolineato, data una stringa da formattare, tale approccio impone di stilizzare un elemento alla volta tra quelli che la compongono, un’eventuale classe dovrà quindi essere applicata a ciascun carattere nell’ordine in cui esso si presenta nel temine da modificare.

Continua a leggere →

In questo articolo vedremo come sia possibile utilizzare due colorazioni per il medesimo carattere tramite alcune semplici regole di stile CSS; nello specifico prenderemo come riferimento una stringa di testo scelta arbitrariamente, ogni carattere che compone quest’ultima verrà colorato per metà di grigio e per il restante 50% di verde; sostanzialmente il nostro obiettivo sarà quello di ottenere un output come quello raffigurato nell’immagine seguente.

Continua a leggere →

Esistono numerosi sistemi per associare nomi alle classi CSS, in alcuni casi gli sviluppatori preferiscono utilizzare la notazione “CamelCase”, cioè scrivere termini ottenuti dall’unione di diverse parole lasciando le iniziali maiuscole (ad esempio: “.DivBox”), in altri essi fanno ricorso a separatori come i trattini (“.div-box”) o gli underscore (“.div_box”); per ottenere lo stesso risultato è però possibile adottare anche i simboli Unicode.

Continua a leggere →

La proprietà CSS text-decoration, attualmente supportata da tutti i browser Web più diffusi, consente di formattare un testo aggiungendo ad esso delle decorazioni mirate a migliorarne la resa a livello grafico; i costrutti basati su di essa sono disponibili a partire dalla prima release per le specifiche relative ai fogli di stile, ma grazie a CSS3 essi hanno subito un’evoluzione.

Continua a leggere →

La proprietà visibility viene largamente utilizzata nei fogli di stile per definire regole CSS, generalmente ad essa vengono associati i valori visible, che è poi il valore predefinito per tutti gli elementi di pagina, e hidden, che consente di nascondere un elemento pur conservando lo spazio occupato da esso e, per questo motivo, si pone come alternativa a display: none che invece determina la perdita dello spazio destinato all’elemento coinvolto.

Continua a leggere →

La durata delle transizioni può essere gestita tramite la proprietà transition-duration di CSS3, essa infatti si comporta come una sorta di funzione per il timing che accetta come argomento un valore numerico espresso in secondi (rappresentati dal simbolo s). Sostanzialmente, con il termine transizione viene indicato il completamento di un passaggio di stato per una specifica componente di pagina.

Continua a leggere →

La funzione calc() di CSS3 è uno strumento nativo che permette di eseguire calcoli matematici di vario tipo, attualmente essa non gode di un diffuso supporto cross-browser, ma in futuro potrà risultare particolarmente comoda per i fogli di stile che faranno un uso esteso delle variabili; ad oggi calc() è adottabile per determinare valori da associare ad altezza, larghezza, padding, dimensione dei font e margini, il suo campo d’azione può essere però più ampio.

Continua a leggere →

Alcune applicazioni interpretano parte delle istruzioni per la formattazione degli elementi di pagina sulla base dello UA Style Sheet dove “UA” è un acronimo che sta per “User Agent“; in pratica, si tratta di un insieme di regole di stile CSS standard che un User Agent, ad esempio un browser, adotterà nel momento in cui gli verrà inviata una richiesta per la visualizzazione di un contenuto.

Continua a leggere →