Vai al contenuto

Archivio:

design

Una web app per gestire le videoproiezioni di un evento TEDx

Durante quest’anno di pandemia ho avuto occasione di collaborare all’organizzazione di un evento TEDx nel mio paese, Leverano (LE). TEDx è un format americano che consiste in una giornata durante la quale si susseguono sul palco diversi personaggi, ciascuno dei quali porta sul palco uno speech di massimo 20 minuti riguardante scienza, spettacolo, arte, idee […]

Creare un podcast in automatico a partire da audio vocali e musica

Nel 2011, mentre studiavo architettura al Politecnico di Torino e vivevo nel collegio universitario di Grugliasco, mi sono imbattuto in una delle più belle esperienze della mia vita. Insieme al mio amico Angelo ho progettato e realizzato una webradio studentesca che trasmetteva direttamente dal collegio. Il progetto, durato 5 anni è stato di grande scuola […]

Semplici gallerie immagini animate in puro CSS

Oggi voglio condividere diversi esempi di gallerie immagini realizzati con l’utilizzo di meno di 20 righe CSS, senza l’ausilio di Javascript. E’ una buona base di partenza per progettare delle gallery piu avanzate. Enjoy the copy paste. Layout verticale: See the Pen Simple image magnificator in CSS vertical by Carlo Peluso (@carlo-peluso) on CodePen. Layout […]

CSS Spiral Path, un esempio interattivo

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. […]

Interactive music showreel, in puro CSS/Less

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 […]

Parametric CSS, animazioni e forme generate.

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 […]

Blob animato con funzione blur() e mix-blend-mode.

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 […]

Realizzare un grafico Gantt senza Javascript.

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 […]

Realizzare un grafico a nodi con Less e SVG path

Oggi ho realizzato un widget per visualizzare una struttura ad albero (costituita da rami e nodi) in puro CSS ed SVG, senza l’ausilio di JS. See the Pen Pure CSS tree graph by Carlo Peluso (@carlo-peluso) on CodePen. Vi spiego brevemente quali strumenti ho utilizzato: LESS, utile per parametrizzare la “latitudine” dei rami dell’albero, tramite […]

Card con animazione liquida in CSS.

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 […]