In questi giorni ho sviluppato una piccola soluzione web per lo split dei file musicali, in particolare dei Full Album ovvero interi dischi rinchiusi in un unico file MP3. Questo strumento si può comunque anche adoperare nel caso si voglia tagliare un qualsiasi file audio in piu parti. Lo stack operativo (tutto realizzato in ambito […]
Archivio:
css3
Oggi voglio condividere con voi un progetto in CSS attraverso il quale è possibile visualizzare e modificare i parametri di una forma a spirale. Nell’esempio che potete vedere sotto, la forma è realizzata interamente in CSS, mentre la serie di eventi e listeners dei cambiamenti dei parametri è stata affidata a poche righe di JQuery. […]
Sono stato ispirato dall”infografica di di Spotify (hai ricevuto via mail il famoso riassunto annuale personalizzato?) nella quale venivano riassunte tutte le abitudini di ascolto musicali personali, attraverso una pagina interattiva e suggestiva. Ho realizzato un menù interattivo che visualizza 5 albums per ogni decade. Ti lascio allegato un video: E’ stato realizzato in puro […]
Qualche anno fa studiavo architettura al Politecnico di Torino, e durante le lezioni di storia rimasi colpito da alcune opere di Santiago Calatrava e Zaha Hadid, architetti-ingegneri esponenti del design parametrico. Questa corrente artistico-architettonica si fonda sul concetto di forma pura ottenuta da algoritmi matematici. Oggi ho provato a generare alcune di queste forme […]
Oggi ho realizzato un’idea per una landing page, puramente immaginata. Tralasciando la composizione artistica, la scelta dei colori e del font, mi vorrei concentrare sulle potenzialità di due funzionalità importanti in CSS: blur(), funzione che permette di sfocare il contenuto, utilizzabile all’interno della proprietà filter. mix-blend-mode, proprietà che consente di specificare in che modo due […]
See the Pen pure CSS gantt chart by Carlo Peluso (@carlo-peluso) on CodePen. Oggi ho sperimentato una soluzione SCSS based per realizzare un grafico a Gantt. L’esempio è stato realizzato utilizzando due diversi layer (con un z-index diverso): griglia per mostrare anno e asse dei mesi barre orizzontali (z-index principale) La prima parte dell’HTML […]
Oggi ho realizzato una card in CSS, utilizzando un tipo di animazione che che definisco “liquida” per via di una serie di accortezze che aumentano la percezione di morbidezza e organicità. See the Pen Waves card by Carlo Peluso (@carlo-peluso) on CodePen. L’esempio è stato realizzato semplicemente utilizzando 2 layers diversi (blu e giallo) con […]
Oggi vi presento il mio menù animato che ho realizzato immaginando una home per un’app di media center. Ecco l’esempio: See the Pen Square menu with animations by Carlo Peluso (@carlo-peluso) on CodePen.
Obiettivo: animare blocchi a comparsa in modo che compaiano in modo sequenziale, con un lieve ritardo nell’animazione di ogni elemento. Nella visualizzazione di liste, icone, menu o blocchi può essere interessante animare la comparsa di questi elementi in modo che entrino “in scena” uno dopo l’altro in istanti di tempo successivi. Fare manualmente questa operazione […]
Partiamo dalla semplice osservazione che “Il fine dell’operazione di scroll è visualizzare uno specifico contenuto”. Nasce quindi l’esigenza di gestire il “target” dello scroll, ovvero il punto esatto di arrivo dell’operazione di scrolling (sia tramite touch sia tramite mouse). Il seguente video fa vedere quanto sia vantaggioso “agganciare” (snap) lo scrolling ad un determinato contenuto (nell’esempio […]