Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

SwfIR : En attendant les CSS3 ?

SwfIR n’est pas une marque de produits nettoyant révolutionnaire mais une methode pour appliquer des styles originaux à vos images en passant par un JavaScript et un peu de Flash. Vous connaissiez sIFR, découvrez SwfIR…

SwfIR est un script non intrusif, c’est-à-dire qu’outre le fait que vous devez linker un fichier JavaScript à votre page, vous n’avez pas besoin de modifier le code XHTML de votre page.

Ce script permet à vos images d’appliquer des styles inexistants en CSS2 : ombres portées, bordures arrondies, coins arrondis, rotation.

Le principe est que SwfIR va remplacer les images que vous aurez spécifiées par un Flash qui intégrera ces images pour leur appliquer ces styles.

Petit exemple :

Voir la demo

Vous pouvez consulter les quelques démos misent à disposition sur le site de SwfIR :

Comment l’utiliser ?

Vous n’avez besoin que de déterminer des styles spécifiques à appliquer en JavaScript via la fonction specify et de déterminer à quels éléments les appliquer via un selecteur CSS avec la fonction swap.

  1. Télécharger swfIR (11.89 KB)
  2. Transférez swfir.js and swfir.swf dans un même répertoire sur votre serveur
  3. Incluez le fichier JavaScript swfIR entre les balises <head> de votre page via cette ligne de code :
    <script type="text/javascript" src="/wp-content/images/developpement-web/swfir-en-attendant-les-css3/swfir.js"></script>
  4. Choisissez les effets à appliquer à vos images :
     var borders = new swfir(); borders.specify("border-radius", "15"); borders.swap("#content img");
  5. Vous avez le choix parmi tous ces paramètres :
    • border-radius
    • border-width
    • border-color
    • shadow-offset
    • shadow-angle
    • shadow-alpha
    • shadow-blur
    • shadow-blur-x
    • shadow-blur-y
    • shadow-strength
    • shadow-color
    • shadow-quality
    • shadow-inner
    • shadow-knockout
    • shadow-hide
    • rotate
    • overflow
    • link
    • elasticity

Quelques inconvénients tout de même

Voici quelques bugs reportés :

  • Le redimensionnement/zoom sous opera crashe le navigateur.
  • Les textes alternatifs ne sont pas repris.
  • Le menu contextuel (clic-droit) est inactif.
  • Ne fonctionne pas avec les images distantes pour raisons de sécurité dans Flash.

Ce que nos lecteurs en disent :

  1. Adysone

    Ça m’a l’air d’être un petit gadget intéressant ça :)
    Mais la rotation d’image existe en CSS 3 ? :|

    Merci !

    • Shemu

      Non, cela n’existera pas en CSS3…

  2. FREUD

    Bien sympa mais je vois un inconvénient majeur : ben c’est du flash…
    Mais bon, ça c’est plus un préjugé bien incrusté au fond de mon cerveau…

    • Shemu

      C’est sûr, c’est l’inconvénient !

  3. Laurent

    Moi j’ai un problème de "rognage des coins " lors de la mise en rotation des images. J’ai essayé d’agrandir la place nécessaire avec css mais en vain. Quelqu’un aurait une idées?

  4. jparia

    Merci pour ce lien,
    au niveau de la licence , peux-t-on inégrer ce source dans une application web destinée à la vente?

Les commentaires sont clos.