yet another web agency

Superga Store

Superga tienda online

Online l’ecommerce per Superga Spain.

Committente: Franic 21, S.l. Madrid.

Grafica: Identità creative Prato (FI).

Software proprietario.

Milano Motors 4×4

VetroScientifica, aggiornamento

vetro

Upgrade per VetroScientifica.com, aggiunta una sezione dedicata allo shop online, anche se in verità si tratta di un vero e proprio sito.

Piattaforma proprietaria: CMLite v1.0

css3 keyframes

carrito

target



<style>
.target {
-webkit-animation: target-fade 6s 1;
-moz-animation: target-fade 6s 1;
}
@-webkit-keyframes target-fade {
0% { background-color: rgba(203,229,158,1);}
100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
0% { background-color: rgba(203,229,158,1); }
100% { background-color: rgba(0,0,0,0); }
}
</style>
<script>
$("#myButton").click(function(){
$("#h2").addClass('target');
});
</script>

Eurotax

Vom Verb zum Satz

Copertina realizzata per il testo digitale di grammatica tedesca, su DidaSfera.

cut off

Piccolo esperimento in css

Hello,
I’m a pure css cut off rectangle :)


.left {
border-color:#ffcc00;
border-style: solid;
border-width: 100px 200px 20px 20px;
height:0px;
width:0px;
position:absolute;
}
.right {
border-color:transparent #ffcc00;
border-style: solid;
border-width: 0px 0px 20px 20px;
height:100px;
width:0px;
position:absolute;
left:228px
}
.content {
position:relative;
padding:10px;
width:220px
}


<div class="left"></div>
<div class="right"></div>
<div class="content">Hello,<br />I'm a pure css cut off rectangle :) </div>

In attesa di…

Flip me

flip


img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
display: block;
height:340px;
width:340px;
-webkit-transition: all .6s;
-moz-transition: all .6s;
}
img.flip:hover {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
filter: FlipH;
-ms-filter: "FlipH";
}

css counter reset

copnuova

Ovvero, come resettare il contatore in una lista, utilizzato nel testo A Christmas Carol (C. Dickens) pubblicato su DidaSfera.

  1. First of all Marley was dead, no doubt about that. Really, as
  2. dead as a door-nail. This must be distinctly understood, or nothing
  3. wonderful will ever come of this story.
  4. Scrooge, however, had not painted out Old Marley’s name.
  5. Seven years after his death, his partner’s name still stood above the
  6. warehouse door: Scrooge and Marley. People who did not know the
  7. company sometimes called Scrooge “Scrooge”, sometimes called him
  8. Marley. But Scrooge did not mind what he was called.
  9. He was a hard man, as hard as stone, with a lot of money, but no
  10. friends, and always lived alone. His heart was frozen, and so was his


ol.verse { font-style:italic; counter-reset: line; width: auto; margin: 0 auto; }
ol.verse li { display: block; }
ol.verse li:before { counter-increment: line 1; content: counter(line); width: 2em; display: block; float: left; margin-left: -2em; }
ol.verse li:not(:nth-child(5n)):before {
visibility: hidden;
}

Maggiori info qui

B&W2clr

Margherita-600 

Questa la classe css utilizzata per il mouseOver sulle immagini qui su ADVidea.


img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}