Barra-linea colorata php

Barra lineare colorata in SVG per PHP

Se stai cercando una barra colorata personalizzabile da inserire in una pagina web, in un footer o in una sezione grafica del tuo sito, puoi usare il codice SVG qui sotto. La barra è composta da 10 segmenti affiancati, pensati per adattarsi bene anche a layout responsivi.

Puoi modificare facilmente i colori HEX, cambiare il numero dei segmenti oppure regolare lo spessore della linea agendo sul valore height. In questo modo puoi adattarla al design del tuo progetto senza dover ricorrere a immagini esterne.

Anteprima

La barra mostra una sequenza di colori vivaci, utile come elemento decorativo o come separatore visivo tra le sezioni di una pagina.

Nota: essendo realizzata in SVG, mantiene una buona qualità su schermi di ogni dimensione.

Codice SVG

<svg xmlns="http://www.w3.org/2000/svg" class="color-bar-footer" width="100%" height="5" viewBox="0 0 1441 5" preserveAspectRatio="none">
  <g fill="none" fill-rule="evenodd">
    <rect width="144" height="5" fill="#0B88C3"/>
    <rect width="144" height="5" x="144" fill="#00D377"/>
    <rect width="144" height="5" x="288" fill="#00B950"/>
    <rect width="144" height="5" x="432" fill="#FFD247"/>
    <rect width="144" height="5" x="576" fill="#FF9800"/>
    <rect width="144" height="5" x="720" fill="#FF464F"/>
    <rect width="144" height="5" x="864" fill="#FF82B3"/>
    <rect width="144" height="5" x="1008" fill="#FF4385"/>
    <rect width="144" height="5" x="1152" fill="#A47DCC"/>
    <rect width="145" height="5" x="1296" fill="#875BB5"/>
  </g>
</svg>

Come personalizzarla

• Altezza: modifica height="5" per rendere la barra più sottile o più spessa.
• Larghezza: lascia width="100%" se vuoi che occupi tutta la larghezza disponibile.
• Colori: sostituisci i valori fill con i tuoi codici HEX preferiti.
• Numero di segmenti: puoi aggiungere o rimuovere i rect in base al risultato grafico che vuoi ottenere.

Consiglio pratico

Se vuoi usare questa barra come elemento decorativo in un tema WordPress o in un sito custom, prova prima il rendering in una pagina di test. In questo modo puoi verificare che lo spazio e i colori siano coerenti con il resto del layout.

Piccoli elementi grafici ben posizionati possono migliorare molto la percezione visiva di una pagina, soprattutto quando il design è pulito e minimale.

Conclusione

Questa barra lineare colorata è una soluzione semplice, leggera e facilmente adattabile. È utile quando vuoi aggiungere un dettaglio grafico moderno senza appesantire il sito con immagini o plugin inutili.

Se l’articolo ti è stato utile, lascia un dolce ricordo.