Elimina! In questo post troverai una mia realizzazione riguardo all’eliminazione di un prodotto da carrello. Ho cercato di riprodurre un’effetto simile a quello della gestione dei brani musicali su iphone, praticamente quando si vuole eliminare una canzone da un album. Vediamo in che modo. Codice Html Come prima cosa ho impostato il codice html. Questa lista [...]
Introduzione In un precedente articolo, ti ho spiegato come affiancare elementi blocco con la proprietà CSS3 column. Voglio ricollegarmi a quella proprietà, molto comoda ma ancora poco supportata per analizzare un metodo un pò più old school ma sicuramente piu retro-compatibile per realizzare un layout multicolonna con larghezze miste. Era da un pò di tempo [...]
Cosi non ci piace! A chi non è mai capitato almeno una volta di affiancare elementi con la proprietà display:inline-block? Questo metodo ha però un piccolo difetto, accostando gli elementi html tramite css si viene a creare un piccolo spazio che li divide. Vediamo di cosa si tratta. Codice html e css Ecco il risultato [...]
L’obiettivo L’obiettivo di questo articolo è quello di aiutarti a creare una thumbnail gallery composta da miniature che occupano tutto lo spazio a disposizione quasiasi sia la risuluzione video o la dimensione del parent. Questa gallery è ottimale per essere utilizzata in tutti quei casi nei quali la dimensione del parent non ha un valore [...]
Il problema! Uno dei grandi problemi di noi WebDesigner è sempre stato quello di dover affiancare elementi blocco di differenti altezza. L’esempio potrebbe essere quello di una normalissima lista nella quale si susseguono più elementi affiancati l’uno all’altro. L’unica proprietà (a parte il position) che consente di affiancare due elementi blocco estraendoli dal normale flusso [...]
Tra grafica e codice Nel web nulla è impossibile da realizzare, spero che in molti condividiate la mia idea, soprattutto quando si tratta di riportare un layout grafico nel suo corrispondente codice html e css. L’abilità di un web designer sta anche in questo, trovare la miglior soluzione strutturale ad una specifica situazione grafica. Leggendo [...]
Che cos’è ClearFix e cosa fa? MicroClearFix è un aggiornamento del codice ClearFix; quest’ultimo è un metodo di annullamento float (qui l’articolo su altri tipi di annullamento) che si basa sullo pseudo-elemento :after, il suo modo di operare consiste nel generare un contenuto posizionato dopo il contenuto dell’elemento stesso, in poche parole è come se [...]
Facciamo pulizia La Proprietà clear, già spiegata nell’articolo inerente alla clearance, consente all’elemento a cui viene applicata di posizionarsi immediatamente dopo un elemento flottante, annulando per esso e per i successivi elementi la regola del float. I principali metodi Ti illustro i principali metodi per mettere in pratica questa proprietà: Questa prima porzione di css [...]
Le dinamiche del clear Oggi voglio parlarti della clearance, un aspetto un pò particolare introdotto nei CSS Versione 2 Revisione 1. Riguarda il clear degli elementi e più in particolare le dinamiche che regolano la spaziatura verticale tra un elemento flottante e un elemento con la proprietà clear impostata. In teoria cosa accade Come ormai [...]