PROJET AUTOBLOG


Shaarli - Les discussions de Shaarli

Archivé

Site original : Shaarli - Les discussions de Shaarli

⇐ retour index

Say hi to CSS3 filter in Firefox!

mercredi 7 janvier 2015 à 14:29
KraZhtest - Liens utiles - C'est le bordel 07/01/2015
Firefox 35 qui viens dans quelques jours va supporter les filtres CSS3. J'ai fait un petit git avec un bookmarklet , et un bouton à basculement à intégrer dans une page, pour faire un effet de negatif.

Basic demo for invert any webpage like a negative effect.. Firefox 35 public release (17 January 2015) is going to fully support CSS3 filters
Bookmarklet for invert any webpage:

javascript:void(document.body.style.filter="invert(100%)");

For add an Invert button to your page or website:
Script:

function invert() {
  var invrt = document.body;
  if(invrt.style.filter == '' || invrt.style.filter == 'invert(100%)')
     invrt.style.filter = 'invert(0%)';
  else
    invrt.style.filter = 'invert(100%)'};

Button html:

<button onclick="invert()">Invert</button>

Yes! That's all!

KraZhtest - Liens utiles - C'est le bordel 10/01/2015
[Repost suite effacement]
Firefox 35 qui vient dans quelques jours va supporter les filtres CSS3. J'ai fait un petit git avec un bookmarklet , et un bouton à basculement à intégrer dans une page, pour faire un effet de negatif.

Basic demo for invert any webpage like a negative effect.. Firefox 35 public release (17 January 2015) is going to fully support CSS3 filters
Bookmarklet for invert any webpage (C'est quoi un bookmarklet: https://support.mozilla.org/fr/kb/utiliser-marque-pages-scriptes ):

javascript:void(document.body.style.filter="invert(100%)");

For add an Invert button to your page or website (reversible):
Script:

// Créer une nouvelle fonction
function invert() {    
 // Créer une variable document.body pour eviter de le réecrire 3 fois, avec un nom peu commun pour la compatibilité.
    var invrt = document.body;
// Si le corps du document contient dans son style la proprièté CSS filter mais est absente :) ou vide OU si elle contient filter:invert(100%)
    if(invrt.style.filter == '' || invrt.style.filter == 'invert(100%)')
// Alors remplacer ou ajouter au style la proprièté css filter:invert(0%), normal
    invrt.style.filter = 'invert(0%)';
// Mais sinon..
 else
//  ajouter au style la proprièté css filter:invert(100%), inversé
   invrt.style.filter = 'invert(100%)';
// Et fermer la fonction ;)
   };

Button html:

<button onclick="invert()">Invert</button>

Yes! That's all!