Vai al contenuto

Archivio:

css3

Prototipo di “Bubble menu” animato.

Il “Bubble Menù” (menù a bolle) permette di visualizzare voci di menu a partire da un singolo bottone (un’estensione del floating action button per gli amanti del Material Design), un ottimo modo per “esplodere” o ramificare delle sotto-voci di menu a partire da una singola voce. Ne ho realizzato un esempio: See the Pen Bubble […]

Layout in stile “Masonry Grid” usando la proprietà css-column.

Il layout in stile “Masonry” è molto popolare nel web, in quanto una delle più versatili soluzioni per la visualizzazione di card ad altezza variabile. La libreria che da il nome al layout, “Masonry Grid”, è stata rimpiazzata dalle proprietà native di CSS3. Ho realizzato un semplice prototipo utilizzando la proprietà columns-*. column-count: 5; column-gap: 5px; TIP: Utilizzando […]

Uno strumento per ascoltare la propria libreria musicale.

L’ascolto della musica è stata da sempre la mia attività celebrale preferita. Per questo ho avuto la necessità di organizzare la mia collezione privata di cd rippati in mp3 realizzando un prototipo di Web Media Player, sviluppato in AngularJS, CSS3, Slim (libreria in Php per la realizzazione di Rest API). Il lettore è organizzato in artisti ed […]

Un esempio di CSS3 morphing.

Questo loader animato è stato realizzato con la tecnica morphing CSS, usando il trick della sfocatura contrastata (applicata ad ogni singolo div), ovvero l’istruzione: filter: blur(10px) contrast(86); Aprire CodePen per ottenere il codice di questo esempio. See the Pen Morphing animated pattern pure CSS by Carlo Peluso (@carlo-peluso) on CodePen.

Creatura organica utilizzando SVG.

SVG è capace di grandi cose. Per sperimentare le sue possibilità iniziali, ho realizzato questa sorta di creatura organica utilizzando esclusivamente: SVG CSS3 (+ animations) HTML Cliccare su Edit on Codepen per visualizzare il codice. See the Pen SVG Organic Creature by Carlo Peluso (@carlo-peluso) on CodePen.