Styler les images insérées dans Jimdo

Et si on mettait un peu de style aux images que vous mettez dans votre site Jimdo ? Avec les codes que je vous propose, basés sur les propriétés "magiques" des CSS3, vous allez relooker vos photos en y ajoutant ombres, arrondis, bordures ou cadres, le tout personnalisable à loisir ! Toutes les images, insérées seules ou avec du texte, seront affectées par l'effet choisi - celles que vous avez déjà postées et celles que vous allez ajouter par la suite, et cela par la vertu d'un simple copier-coller !

 

Merci cependant de prendre note de ces deux limitations :

  • Les effets ne s'appliqueront pas aux miniatures des galeries d'images : en effet, ce sera l'objet d'un autre tuto.
  • La plupart des effets ne seront pas visibles avec le navigateur Internet Explorer, car ce dernier ne reconnaît pas les propriétés des CSS3. Mais les codes restent compatibles avec les autres navigateurs et ne nuisent pas au fonctionnement de IE, donc ne vous en privez pas ;)

Mode d'emploi

Pourquoi 2 codes différents ?

Pour chaque effet, je vous donne 2 codes. Chacun impacte une catégorie d'images. Cela vous permet d'ajouter, si vous le souhaitez, deux effets à votre site, un pour chaque sorte d'images.

  • Le premier code ajoutera l'effet choisi aux images insérées avec l'élément Image :
Elément Images
  • Le second code ajoutera l'effet choisi aux images insérées via l'élément Texte avec Image :
Elément texte avec image
  • Si vous voulez qu'un même effet impacte toutes les images, copiez-collez les 2 codes fournis. L'effet sera appliqué aux images insérées sur votre site via ces 2 boutons :
Les deux éléments
Attention ! Les images insérées dans Jimdo avec l'élément Galeries d'images ne sont pas concernées par ce tutoriel : les effets ne s'appliqueront pas à ces images.
Bouton Galerie d'images

Où insérer les codes dans Jimdo ?

En mode admin, rendez-vous dans la barre d'administration de votre site, cliquez sur Paramètres > Modifier le head et copiez-collez le(s) code(s) dans le cadre de saisie qui apparaît :

Pour valider vos changements, n'oubliez pas de cliquer sur le bouton 

Pour voir l'effet choisi appliqué à vos images, vous devez repasser en mode Aperçu. En mode Admin, vos images restent inchangées.

Le colorpicker : un outil bien pratique pour trouver les couleurs

Utilisez le colorpicker pour trouver les couleurs que vous voulez et récupérer leur traduction hexadécimale.

Flèche vers le haut

Effet n°1 : ajouter une simple bordure

... aux images insérées via l'élément "Image"

Image avec bordure dans Jimdo Image avec bordure dans Jimdo

L'image de gauche a une bordure grise de 8 pixels d'épaisseur ; celle de droite a une bordure orange d'1 pixel d'épaisseur. 

<style type="text/css">
/*<![CDATA[*/

/* Ajouter une bordure aux images */

.j-imageSubtitle .cc-imagewrapper img {
border: 5px solid #ddd;
margin: 10px 5px;
}

/*]]>*/
</style>

Ce code ajoute une bordure (border) de 5 pixels d'épaisseur (5px) et de couleur grise (#ddd) aux images insérées au moyen de l'élément Image.

... aux images insérées via l'élément "Texte avec image"

Image avec bordure dans Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Ajouter une bordure aux textes avec image */

.j-textWithImage .cc-imagewrapper img {
border: 1px solid black;
}

/*]]>*/
</style>

Ce code ajoute une bordure (border) très fine, de 1 pixel d'épaisseur (1px) et de couleur noire (black), aux images insérées au moyen de l'élément Texte avec image.

Comment personnaliser les codes ?

Sur la ligne border, choisissez :

  • l'épaisseur de la bordure : 1px (très fine), 2px (fine), 5px (moyenne), 15px (large), etc...
  • la couleur de la bordure : écrivez le nom de la couleur (black, orange, yellow... ) ou son code hexadécimal (de la forme #xxxxxx) en vous aidant du colorpicker. Exemple : border: 3px solid #efefef;
Flèche vers le haut

Effet n°2 : ajouter un cadre simple

... aux images insérées via l'élément "Image"

Image avec cadre simple dans JimdoImage avec cadre simple dans Jimdo

L'image de gauche a un cadre blanc de 8 pixels d'épaisseur et une bordure grise ; celle de droite a un cadre blanc plus épais de 10 pixels et une bordure grise légèrement plus claire.

<style type="text/css">
/*<![CDATA[*/

/* Ajouter un cadre simple aux images */

.j-imageSubtitle .cc-imagewrapper img {
padding: 12px;
background: #fff;
border: 1px solid #ddd;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Image un cadre blanc (#fff) de 12 pixels d'épaisseur (12px) fermé par une fine bordure grise (1px solid #ddd).

... aux images insérées via l'élément "Texte avec image"

Cadre simple aux images de Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Ajouter un cadre simple aux textes avec image */

.j-textWithImage .cc-imagewrapper {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
margin: 5px 15px 5px 10px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Texte avec image un cadre blanc (#fff) d'une épaisseur de 10 pixels (10px) fermé par une fine bordure grise (1px solid #ccc).

Comment personnaliser les codes ?

Modifier le cadre

  • Pour régler l'épaisseur du cadre, modifiez la ligne padding en remplaçant la valeur exprimée en pixels (10px) par celle de votre choix (5px, 12px, 20px... ) Exemple : padding: 20px;
  • Pour modifier la couleur du cadre, remplacez la couleur blanche (#fff) de la ligne background par celle de votre choix (#xxxxxx) en vous aidant du colorpicker. Exemple : background: #000; donnera un cadre noir.

Modifier la bordure

Sur la ligne border, choisissez la couleur de la bordure : écrivez le nom de la couleur (black, orange, yellow... ) ou son code hexadécimal (#xxxxxx) en vous aidant du colorpicker. Exemple : border: 1px solid #efefef;

Flèche vers le haut

Effet n°3 : arrondir les angles

Note : cet effet ne sera pas visible avec Internet Explorer.

... des images insérées via l'élément "Image"

Image aux coins arrondis dans Jimdo Image aux coins arrondis dans Jimdo

L'image de gauche a un arrondi de 15 pixels ; celle de droite a un arrondi de 10 pixels. 

<style type="text/css">
/*<![CDATA[*/

/* Arrondir les angles des images */

.j-imageSubtitle .cc-imagewrapper img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'arrondis de 15 pixels (15px) les angles (radius) des images insérées avec l'élément Image. Si 3 lignes de code sont nécessaires, c'est parce que j'utilise le code CSS3 "moderne" (border-radius), le code des anciennes versions de Firefox (-moz-border-radius) et le code des anciennes versions des navigateurs "webkit" (-webkit-border-radius), incluant Safari, Chrome, etc.

... des images insérées via l'élément "Texte avec image"

Image arrondie dans Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Arrondir les angles des images avec texte */

.j-textWithImage .cc-imagewrapper img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/*]]>*/
</style>

Ici, j'arrondis de 10 pixels (10px) les angles des images insérées avec l'élément Texte avec image.

Comment personnaliser les codes ?

Vous pouvez choisir le degré d'arrondi des angles des images. Pour cela, modifiez la valeur exprimée en pixels (15px, 10px, 30px... ) associée aux 3 lignes du code qui contiennent le mot radius. Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

Flèche vers le haut

Effet n°4 : ajouter un cadre arrondi

Note : l'arrondi ne sera pas visible avec Internet Explorer. Ce navigateur affichera un cadre simple, comme avec l'effet n°2.

... aux images insérées via l'élément "Image"

image avec cadre arrondi dans Jimdo Image avec cadre arrondi

L'image de gauche a un cadre blanc de 10 pixels d'épaisseur et un arrondi de 18 pixels. L'image de droite a un cadre blanc plus fin de 8 pixels et un arrondi de 15 pixels.

<style type="text/css">
/*<![CDATA[*/

/* Ajouter un cadre arrondi aux images */

.j-imageSubtitle .cc-imagewrapper img {
padding: 12px;
background: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Image un cadre blanc (#fff) de 12 pixels d'épaisseur (12px) fermé par une fine bordure grise (1px solid #ddd) et un arrondi (radius) de 15 pixels (15px).

... aux images insérées via l'élément "Texte avec image"

Image avec cadre arrondi dans Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Ajouter un cadre simple arrondi aux textes avec image */

.j-textWithImage .cc-imagewrapper {
padding: 10px;
background: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 5px 15px 5px 10px;
}

.j-textWithImage .cc-imagewrapper img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Texte avec image un cadre blanc (#fff) d'une épaisseur de 10 pixels (10px) fermé par une fine bordure grise (1px solid #ccc) et un arrondi (radius) de 10 pixels (10px). J'ajoute aussi un arrondi (radius) de 15 pixels (15px) au cadre en lui-même.

Comment personnaliser les codes ?

Modifier le cadre

  • Pour régler l'épaisseur du cadre, modifiez la ligne padding en remplaçant la valeur exprimée en pixels (10px) par celle de votre choix (5px, 12px, 20px... ) Exemple : padding: 20px;
  • Pour modifier la couleur du cadre, remplacez la couleur blanche (#fff) de la ligne background par celle de votre choix (#xxxxxx) en vous aidant du colorpicker. Exemple : background: #000; donnera un cadre noir.

Modifier la bordure

Sur la ligne border, choisissez la couleur de la bordure : écrivez le nom de la couleur (black, orange, yellow... ) ou son code hexadécimal (#xxxxxx) en vous aidant du colorpicker. Exemple : border: 1px solid #efefef;

Modifier l'arrondi

Vous pouvez choisir le degré d'arrondi des angles des images. Pour cela, modifiez la valeur exprimée en pixels (15px, 10px, 30px... ) associée aux 3 lignes du code qui contiennent le mot radius. Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

Flèche vers le haut

Effet n°5 : ajouter une ombre

Note : cet effet ne sera pas visible avec Internet Explorer.

... aux images insérées via l'élément "Image"

Image avec ombre dans Jimdo Image avec ombre dans Jimdo

L'image de gauche a une ombre grise avec un rayon de diffusion floutée de 10 pixels ; celle de droite a une ombre grise légèrement plus foncée avec un rayon de diffusion floutée plus court de 6 pixels.

<style type="text/css">
/*<![CDATA[*/

/* Ajouter une ombre aux images */

.j-imageSubtitle .cc-imagewrapper img {
box-shadow: 0px 0px 6px #666;
-moz-box-shadow : 0px 0px 6px #666;
-webkit-box-shadow : 0px 0px 6px #666;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute une ombre (shadow) grise (#666) d'un rayon de diffusion de 6 pixels (6px) aux images insérées avec l'élément Image.

... aux images insérées via l'élément "Texte avec image"

<style type="text/css">
/*<![CDATA[*/

/* Ajouter une ombre aux textes avec image */

.j-textWithImage .cc-imagewrapper img {
box-shadow: 1px 1px 8px #777;
-moz-box-shadow : 1px 1px 8px #777;
-webkit-box-shadow : 1px 1px 8px #777;
margin: 0px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute une ombre (shadow) grise (#777) d'un rayon de diffusion de 8 pixels (8px) aux images insérées avec l'élément Texte avec image.

Comment personnaliser les codes ?

Si vous le souhaitez, sur les 3 lignes qui suivent l'accolade ouvrante des codes et qui contiennent le mot shadow, vous pouvez modifier :

  • la couleur de l'ombre à la fin en utilisant le colorpicker (#xxx)
  • le rayon de diffusion floutée de l'ombre juste avant (8px)

Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

box-shadow: 1px 1px 10px #777;

-moz-box-shadow : 1px 1px 10px #777;

-webkit-box-shadow : 1px 1px 10px #777;

Flèche vers le haut

Effet n°6 : arrondir les angles et ajouter une ombre

Note : cet effet ne sera pas visible avec Internet Explorer.

... aux images insérées via l'élément "Image"

Image aux coins arrondis et avec ombre dans Jimdo Image aux coins arrondis et avec ombre dans Jimdo

L'image de gauche a un arrondi de 8 pixels et une ombre grise dont la diffusion est de 8 pixels. L'image de droite a un arrondi plus prononcé de 15 pixels et une ombre dont le rayon de diffusion est de 6 pixels.

<style type="text/css">
/*<![CDATA[*/

/* Arrondir les angles des images et ajouter une ombre */

.j-imageSubtitle .cc-imagewrapper img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 8px #aaa;
-moz-box-shadow : 1px 1px 8px #aaa;
-webkit-box-shadow : 1px 1px 8px #aaa;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'arrondis les angles (radius) de 10 pixels (10px) et je crée autour de l'image une ombre (shadow) grise (#aaa) d'un rayon de diffusion de 8 pixels (8px). Les 3 premières lignes du code (après l'accolade ouvrante) créent l'arrondi ; les 3 lignes suivantes créent l'ombre ; la dernière ligne (avant l'accolade fermante) crée une marge autour de l'image.

... aux images insérées via l'élément "Texte avec image"

Image dans Jimdo avec angles arrondis et ombre portée
<style type="text/css">
/*<![CDATA[*/

/* Arrondir les angles des images avec texte et ajouter une ombre */

.j-textWithImage .cc-imagewrapper img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 8px #999;
-moz-box-shadow : 1px 1px 8px #999;
-webkit-box-shadow : 1px 1px 8px #999;
margin: 0px 5px;
}

/*]]>*/
</style>

Ici, je crée un arrondi (radius) de 10 pixels (10px), ainsi qu'une ombre (shadow) grise (#999) d'un rayon de diffusion de 8 pixels (8px) autour des images insérées via l'élément Texte avec image.

Comment personnaliser les codes ?

Modifier l'arrondi

Vous pouvez choisir le degré d'arrondi des angles des images. Pour cela, modifiez la valeur exprimée en pixels (15px, 10px, 30px... ) associée aux 3 lignes du code qui contiennent le mot radius. Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

Modifier l'ombre

Si vous souhaitez modifier l'ombre, travaillez sur les 3 lignes qui contiennent le mot shadow. Vous pouvez modifier :

  • la couleur de l'ombre à la fin en vous aidant du colorpicker (#xxx)
  • le rayon de diffusion floutée de l'ombre juste avant (8px)

Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

box-shadow: 1px 1px 10px #666;

-moz-box-shadow : 1px 1px 10px #666;

-webkit-box-shadow : 1px 1px 10px #666;

Flèche vers le haut

Effet n°7 : ajouter un cadre Polaroïd

Note : cet effet ne sera pas visible avec Internet Explorer.

... aux images insérées via l'élément "Image"

Image avec cadre Polaroid dans Jimdo Image avec cadre Polaroid dans Jimdo

L'image de gauche a un cadre de 8 pixels d'épaisseur et une ombre grise avec un rayon de diffusion de 8 pixels. L'image de droite a un cadre d'une épaisseur de 12 pixels et une ombre grise avec un rayon de diffusion de 6 pixels.

<style type="text/css">
/*<![CDATA[*/

/* Cadre style photo aux images */

.j-imageSubtitle .cc-imagewrapper img {
border: 10px solid #fff;
box-shadow: 1px 1px 8px #ccc;
-moz-box-shadow : 1px 1px 8px #ccc;
-webkit-box-shadow : 1px 1px 8px #ccc;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Image :

  • une bordure (border) blanche (#fff) de 10 pixels d'épaisseur (10px)
  • une ombre (shadow) grise (#ccc) d'un rayon de diffusion de 8 pixels (8px)
  • une marge (margin) nécessaire

... aux images insérées via l'élément "Texte avec image"

Image dans Jimdo avec encadrement photo
<style type="text/css">
/*<![CDATA[*/

/* Cadre style photo aux images avec texte */

.j-textWithImage div.cc-imagewrapper {
border: 10px solid #fff;
box-shadow: 0px 0px 6px #ccc;
-moz-box-shadow: 0px 0px 6px #ccc;
-webkit-box-shadow: 0px 0px 6px #ccc;
margin: 5px 15px 5px 10px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Texte avec image :

  • une bordure (border) blanche (#fff) de 10 pixels d'épaisseur (10px)
  • une ombre (shadow) grise (#ccc) d'un rayon de diffusion de 6 pixels (6px)
  • une marge (margin) nécessaire

Comment personnaliser les codes ?

Modifier le cadre blanc

Pour modifier la taille de la bordure blanche du cadre, remplacez la valeur 10px de la ligne border: 10px solid #fff par une valeur de votre choix (5px, 8px, 15px... ) ce qui donne, par exemple, border: 12px solid #fff;

Modifier l'ombre

Pour modifier l'ombre, reportez-vous aux 3 lignes qui contiennent le mot shadow. Vous pouvez modifier :

  • la couleur de l'ombre à la fin en vous aidant du colorpicker (#xxx)
  • le rayon de diffusion floutée de l'ombre juste avant (6px)

Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

box-shadow: 1px 1px 10px #666;

-moz-box-shadow : 1px 1px 10px #666;

-webkit-box-shadow : 1px 1px 10px #666;

Flèche vers le haut

Effet n°8 : ajouter un cadre Polaroïd arrondi

Note : cet effet ne sera pas visible avec Internet Explorer.

... aux images insérées via l'élément "Image"

Image avec cadre Polaroid arrondi dans Jimdo Image avec cadre Polaroid arrondi dans Jimdo

L'image de gauche a un cadre blanc plus épais de 10 pixels, un arrondi plus prononcé de 15 pixels et une ombre dont le rayon de diffusion est de 6 pixels. L'image de droite a un cadre blanc de 8 pixels d'épaisseur, un arrondi de 8 pixels et une ombre grise dont la diffusion est de 8 pixels. 

<style type="text/css">
/*<![CDATA[*/

/* Cadre style photo avec coins arrondis aux images */

.j-imageSubtitle .cc-imagewrapper img {
border: 10px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 8px #ccc;
-moz-box-shadow : 1px 1px 8px #ccc;
-webkit-box-shadow : 1px 1px 8px #ccc;
margin: 10px 5px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Image :

  • une bordure (border) blanche (#fff) de 10 pixels d'épaisseur (10px)
  • un arrondi (radius) de 10 pixels (10px)
  • une ombre (shadow) grise (#ccc) d'un rayon de diffusion de 8 pixels (8px)
  • une marge (margin) nécessaire

... aux images insérées via l'élément "Texte avec image"

Image avec cadre photo et arrondis dans Jimdo
<style type="text/css">
/*<![CDATA[*/

/* Cadre style photo avec coins arrondis aux images avec texte */

.j-textWithImage .cc-imagewrapper {
border: 10px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 6px #ccc;
-moz-box-shadow : 1px 1px 6px #ccc;
-webkit-box-shadow : 1px 1px 6px #ccc;
margin: 5px 15px 5px 10px;
}

.j-textWithImage .cc-imagewrapper img {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

/*]]>*/
</style>

Avec ce code, j'ajoute aux images insérées via l'élément Texte avec image :

  • une bordure (border) blanche (#fff) de 10 pixels d'épaisseur (10px)
  • un arrondi (radius) de 10 pixels (10px) au cadre et de 8 pixels (8px) aux images
  • une ombre (shadow) grise (#ccc) d'un rayon de diffusion de 6 pixels (6px)
  • une marge (margin) nécessaire

Comment personnaliser les codes ?

Modifier le cadre blanc

Pour modifier la taille de la bordure blanche du cadre, remplacez la valeur 10px de la ligne border: 10px solid #fff par une valeur de votre choix (5px, 8px, 15px... ) ce qui donne, par exemple, border: 8px solid #fff;

Modifier l'ombre

Pour modifier l'ombre, reportez-vous aux 3 lignes qui contiennent le mot shadow. Vous pouvez modifier :

  • la couleur de l'ombre à la fin en vous aidant du colorpicker (#xxx)
  • le rayon de diffusion floutée de l'ombre juste avant (6px)

Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

box-shadow: 1px 1px 10px #666;

-moz-box-shadow : 1px 1px 10px #666;

-webkit-box-shadow : 1px 1px 10px #666;

Modifier l'arrondi

Vous pouvez choisir le degré d'arrondi des angles des images. Pour cela, modifiez la valeur exprimée en pixels (15px, 10px, 30px... ) associée aux 3 lignes du code qui contiennent le mot radius. Vos modifications doivent être identiques d'une ligne à l'autre. Exemple :

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

Questions ? Réponses ? Par ici !

Écrire commentaire

Commentaires : 3
  • #1

    Deken Nathalie (vendredi, 26 avril 2013 13:26)

    Merci beaucoup Isa pour tous ces tuyaux !!!!!
    Cet article, je l'attendais depuis qq temps. Le rendu sur les images est superbe.
    Seul défaut : obligation de faire un choix entre toutes ces options. Dommage que l'on ne puisse mixer selon nos pages.

    A très bientôt, toujours avec beaucoup de plaisirs ;)

  • #2

    AU FIL DE L'EAU (mercredi, 15 mai 2013 23:46)

    merci beaucoup, c'était très facile, même pour moi !
    serait-il possible d'adapter cela pour les photos des articles dans l'e-boutique ?

  • #3

    Isabelle (jeudi, 04 juillet 2013 18:00)

    @aufildel'eau : j'ai réussi à styler les images de l'e-shop, mais c'est une vraie galère au niveau du code !... J'ai créé un template (mon premier "premium template" :D) dans lequel j'ai stylé les images de la boutique, mais c'est vraiment du réglage compliqué à mettre en place. Donc je ne proposerai pas de tuto dessus, car c'est très/trop technique pour les utilisateurs.

Ruban