UUUP Tools

Outils de design

Générateur de ruban CSS — Styles de badges de coin

Générez visuellement du CSS de ruban de coin incliné pour les cartes. Modifiez le texte, les couleurs, le décalage, la largeur et la taille de la police pour les badges de statut de vente, épuisé et similaires.

Accès rapide→Générateur d'ombres de boîte CSS
CSSBadgeRuban
Accès rapide:Générateur d'ombres de boîte CSSChemin de clip CSSGénérateur de dégradé CSS

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

  • Ajouter un ruban promo vers un coin de la fiche produit
  • Marquer l'état épuisé ou nouveau
  • Déplacer le décalage pour que le badge ne couvre pas l'image principale

Mode d’emploi

  1. Saisir le texte du ruban et choisir un coin
  2. Ajuster la couleur, le décalage, la largeur et la taille de la police
  3. Confirmer le parent paramètres de débordement, puis copiez le CSS

Exemples d’entrée et de sortie

Config

Texte PROMO, position en haut à droite, fond rouge / texte blanc

CSS

.ribbon { position: absolute; transform: rotate(45deg); ... }

FAQ

Pourquoi les coins du ruban sont-ils coupés ?

Les rubans inclinés débordent souvent de la boîte. Le parent a besoin de position : relative et de débordement : masqué dépend du bouton d'aperçu.

Puis-je personnaliser les sélecteurs ?

Oui. Les sélecteurs de cartes et de rubans sont modifiables ; l'extrait généré utilise les sélecteurs que vous entrez.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

Générateur d'ombres de boîte CSS

Générateur d'ombres de boîte CSS – Commandes visuelles

Disponible

Ajustez visuellement le décalage, le flou, la répartition, la couleur, l'opacité et l'encart. Prévisualisez en direct et générez du CSS box-shadow pour les cartes, les boutons et les superpositions.

CSS Ombre box-shadow
Ouvrir l’outil

Chemin de clip CSS

Chemin de clip CSS — Générateur de formes

Disponible

Générez des formes de chemin de clip CSS à partir de préréglages et de contrôles simples avec un aperçu en direct – utile pour les cartes inclinées, les badges, les recadrages d'images et les mises en page décoratives.

CSS chemin de clip Forme
Ouvrir l’outil

Générateur de dégradé CSS

Générateur de dégradé CSS – Linéaire, Radial, Conique

Disponible

Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajustez l'angle et les positions des arrêts, ajoutez plusieurs arrêts et copiez le CSS pour les arrière-plans, les boutons et les transitions de marque.

CSS Dégradé Arrière-plan
Ouvrir l’outil