Pages de demo css


Accès rapide :

Exemple d'utilisation de border;
Exemple d'utilisation de border-radius;


Exemples de bordures en CSS




Exemple css

 
CSS

.photo {
border: 3px solid #000;
}

HTML

<img class="photo" src="images/e/exe/Exemple-css-border-solid.png"/>



Un bloc <div> avec une bordure double de 5px verte

CSS

.bloc {
border: 5px double green;
}

HTML

<div class="bloc"> Votre contenu </div>



Un tableau avec une bordure ridge de 5px rouge

CSS

.tableau {
border: 3px ridge rgb(255,0,0);
}

HTML

<table align="center" border="1" cellpadding="1" cellspacing="1" class="tableau" style="width: 370px; height: 100px">
    <tbody>
        <tr>
            <td>
Votre contenu  </td>
        </tr>
    </tbody>
</table>


 

Exemple d'utilisation de border-radius;

Note: Pour plus de lisibilité les propriétés css -moz-border-radius; et -webkit-border-radius; ne sont pas présentés dans les exemples ci-dessous.

Border radius 5px

CSS

.photo1 {
border-radius : 10px; /* Une seul valeur pour arrondir tous les coins */
}

HTML

<img class="photo1" src="images/e/exe/exemple-border-radius.png" />




une <div> avec les coins du haut arrondis de 10px

 

CSS

.bloc1 {
border-radius : 10px 10px 0px 0px; /* les coins du haut sont arrondis de 10px */
}

HTML

<div class="bloc1"> Votre contenu </div>




une <div> avec les coins opposés d'en haut à gauche et en bas à droite arrondis de 5px et les 2 autres de 20px

 

CSS

.bloc2 {
border-radius : 5px 20px; /*les coins opposés d'en haut à gauche et en bas à droite sont arrondis de 5px et les 2 autres de 20px */
}

HTML

<div class="bloc2"> Votre contenu </div>



Panier déroulant Jquery

Retour au tutoriel
 




CSS

/* structure du panier coulissant */

#ensemble {
        position:relative;
        text-align:center;
        width:285px;
        margin: 0 auto;
}

#container {
        margin:0;
        padding:0;
        position:absolute;
        z-index:1;
}
#container li {
        width:280px;
        height:38px;
        color:#191919;
        text-align:center;
        overflow:hidden;  /* à ne pas retirer ! */
        border-radius: 20px 0px;
}


/* Styles des liens et du texte */

#container a {
        color:#000;
        text-decoration:none;
}


#container p {
        padding:0px 5px;
        color:#000;
}


/* Les styles pour l'iframe du panier */

.panier {
        background:#fff;
        margin:10px 3px 5px 0px;
        border-radius: 10px 0px;
        border: 1px solid #fff; 
}


/* Les styles pour le bouton commander */

.commander {
        background: #fff;
        padding:10px;
        text-transform: uppercase;
        border-radius: 10px 0px; 
}

/*classes de couleur pour panier déroulant*/

.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
.white{background:#F3F3F3;}

 

HTML

<div id="ensemble">
<ul id="container">
<li class="yellow">
<p>
<a href="#" title="Cliquez ici pour gérer votre panier">Mon panier</a>
</p>
<p>
<iframe allowtransparency="true" class="panier" frameborder="no" height="120" marginheight="0" marginwidth="0" name="framemod" noresize="noresize" scrolling="auto" src="http://www.wifeo.com/tool/iframe/module_blog.php?idmod=1&amp;nba=3&amp;n_s=ordi-tips" width="250"></iframe>
</p>
<p>
<a class="commander" href="#">Commander</a>
</p>
</li>
</ul>
</div>

JQUERY ( à placer dans le <head> )

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
/* importation de la bibliotheque jquery */

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
/* importation de plugin Jquery Easing ( Le fichier jquery.easing.1.3.js est à télécharger depuis l'archive du panier déroulant et à héberger sur votre site ) */


<script type="text/javascript">
$(document).ready(function(){
   $("a").click(function(){$(this).blur();
    });
      $("#container li").mouseover(function(){$(this).stop().animate({height:'222px'},{queue:false,duration:600,easing:'easeInOutCubic'})
      });
      $("#container li").mouseout(function(){$(this).stop().animate({height:'38px'},{queue:false,duration:600,easing:'easeInOutCubic'})
      });
});
</script>
/* Script de l'animation */