Voir un article

CSS : radius sur IE 7 et IE 8

voici une méthode maison en jquery qui fonctionne bien sur des objets à fond plein (background-color) , et qui peut être modifiée/adaptée à d'autres situation si vous touchez un peu le code.

Il suffit de mettre la classe "radius" sur les objets à arrondir , puis d'ajouter ce code dans un de vos fichier js ou dans le code html de la page (de préférence à la fin).

Nécessite d'avoir installer jquery sur votre page.

Le code va tout simplement selectionner tous les objets de classe "radius" , les passer en position relative et ajouter dedans des petits div blanc aux 4 coins.

 <!--[if lte IE 8]>
        <script>$( function() {
          $('.radius').each( function() {
            
             $(this).css('position','relative');

             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:0"></div>');

          });
        });</script>
        <![endif]-->



Pour améliorer et grossir l'arrondis en le lissant, on peut ajouter encore 2 petits points blancs à coté des 4 premiers, puis les rendre semi transparent pour avoir un effet de lissage , voici la version ainsi complétée:


       <!--[if lte IE 8]>
        <script>$( function() {
          $('.radius').each( function() {
            
             $(this).css('position','relative');

             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:0"></div>');
             $(this).append('<div style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:0"></div>');

             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;left:1px"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:0;right:1px"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;left:1px"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:0;right:1px"></div>');         

             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:1px;left:0"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;top:1px;right:0"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:1px;left:0"></div>');
             $(this).append('<div class="semi" style="z-index:1000;background-color:#fff;width:1px;height:1px;position:absolute;bottom:1px;right:0"></div>');         

          });
         $('.semi').fadeTo(0,0.5);

        });</script>
        <![endif]-->



4 590 clics - Créé le 21/12/2010 par Tito - Modifié le 21/12/2010



Réagissez, commentez, discutez ...

Soyez le premier à réagir !



Partager ?

diaspora  G+  facebook  twitter  Digg  Yahoo  Delicious  Technorati  myspace


Voir d'autres articles en rapport avec celui-ci ?



Stats des clics sur cet article : cliquez ici »



Vous voulez contribuer et publier un article dans cette rubrique ?

Merci de vous identifier ou de vous créer un compte si ce n'est pas déjà fait.