yet another web agency

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>

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%);
}

HTML Area

advlink

Per DidaSfera abbiamo utilizzato come editor per i testi l’ultima versione di TinyMCE, ma, nel caso specifico, i metaredattori ci hanno chiesto alcune modifiche, tra le quali la possibilità di inserire una classe css e il title nei link, nulla di complicato ma magari semplifichiamo il lavoro a qualche collega :)

Ecco qui il plugin modificato.

advlink