Flying memes

Archive for the ‘Interfaccie’ Category

In Browser Real Time Object Detection From an HTTP Live Stream

Friday, July 2nd, 2021

This experiment combines hsl.js and tensorflow.js to perform real time object detection from a browser. When the mouse hovers the canvas the entire stream is shown, with the detected object framed in a black box, otherwise only the parts of the stream corresponding to detected objects are displayed.

(more…)

A pure CSS3 driven overlay

Tuesday, February 11th, 2014

During my last workshop with Gabriele Lana I’ve started a nice conversation with Fabio Fabbrucci on how to recreate the perfect overlay effect using as less JavaScript as possible.

(more…)

Dealing with stripe patterns and scrolling

Sunday, September 22nd, 2013

Recently I’ve been dealing with a page containing a stripe pattern as following:

(more…)

How to create a fully customizable pure CSS drop down select

Thursday, April 25th, 2013

I was working on a new project that uses a highly customised select; as you might know CSS and <select> doesn’t work well together. In fact only a small subset of the CSS properties are accepted by a <select> element and, even worse, this subset vary from one browser to another.

(more…)

How to dog-ear a div hovering a pattern without adding extra tags

Saturday, April 20th, 2013

Today I come up with a way to dog-ear a div without adding extra tags. Basically we can take advantage to both :after and :before pseudo selectors to extend the div element and then use this technique to create the dog-ear with borders.

(more…)

Building a company logo using CSS3

Thursday, March 15th, 2012

I’ve recently left my job to found a new company called ‘Comparto Web‘; to showcase some of our CSS3 skills I decided to implement the logo using only HTML elements and taking advantage of some new properties such as transitions and animations.

(more…)

Real time twitter data visualization with Processing.js

Tuesday, October 25th, 2011

Lately I’ve been pretty busy enjoying some real time data visualization examples and demo. To have some data to work with I decided to use Twitter API, in particular I rely on jQuery LiveTwitter plugin by elektronaut; next I built a stack chart like visualization in which every new tweet of a chosen topic is dropped over its language column.

(more…)

Using the :required pseudo selector to enhance forms

Sunday, August 14th, 2011

Lately I come up with this idea on how to enhance a form by using the :required pseudo element. What you can do is mix this new pseudo element with the ‘+’ selector in order to modify elements that are adjacent to your input tag, such as the label.

(more…)

A pure CSS3 coverflow effect for Chrome, Firefox and Safari

Friday, August 5th, 2011

I’ve been recently playing with some of the newest CSS3 features, such as pseudoclasses selectors, transition and transform properties and attr(). In order to have something concrete on which test these features  I created a coverflow effect that works only out of CSS instructions without the use of javascript.

(more…)

Playing with media queries

Saturday, July 9th, 2011

I recently created a small website called ‘La piccola biblioteca della natura’ to showcase some of my girlfriend watercolors. I decided to go for a responsive design and set up some nice media-query statements. If you try to resize the browser window you surely notice how the structure of the fruits change in response to this operation.

(more…)