Per cominciare un sito web o una applicazione web bootstrap è sempre un buon inizio per la grafica. Spesso ci troviamo nella situazione di dover scegliere i colori dei pannelli (ci riferiamo proprio al componente "panel" di bootstrap), quelli offerti di default sono sicuramente colori piacevoli e facilmente utilizzabili però anche utilizzando un template spesso la scelta è limitata a 5 diverse tonalità. Per poter scegliere da un più ampio range di colori abbiamo creato un semplice css che aggiunge un pannello per quasi tutti i colori standard di Word 2013. Il css è il seguente:


.panel-purple {
    border-color: rgb(112,48,160);
}
 
    .panel-purple .panel-heading {
        background-color: rgb(112,48,160);
        border-color: rgb(112,48,160);
    }
 
.panel-blue {
    border-color: rgb(0,112,192);
}
 
    .panel-blue .panel-heading {
        background-color: rgb(0,112,192);
        border-color: rgb(0,112,192);
    }
 
.panel-cyan {
    border-color: rgb(0,176,240);
}
 
    .panel-cyan .panel-heading {
        background-color: rgb(0,176,240);
        border-color: rgb(0,176,240);
    }
 
.panel-green {
    border-color: rgb(0,176,80);
}
 
    .panel-green .panel-heading {
        background-color: rgb(0,176,80);
        border-color: rgb(0,176,80);
    }
 
.panel-light-green {
    border-color: rgb(146,208,80);
}
 
    .panel-light-green .panel-heading {
        background-color: rgb(146,208,80);
        border-color: rgb(146,208,80);
    }
 
.panel-yellow {
    border-color: rgb(255,255,0);
}
 
    .panel-yellow .panel-heading {
        background-color: rgb(255,255,0);
        border-color: rgb(255,255,0);
    }
 
.panel-orange {
    border-color: rgb(255,192,0);
}
 
    .panel-orange .panel-heading {
        background-color: rgb(255,192,0);
        border-color: rgb(255,192,0);
    }
 
.panel-red {
    border-color: rgb(255,0,0);
}
 
    .panel-red .panel-heading {
        background-color: rgb(255,0,0);
        border-color: rgb(255,0,0);
    }
 
.panel-dark-red {
    border-color: rgb(192,0,0);
}
 
    .panel-dark-red .panel-heading {
        background-color: rgb(192,0,0);
        border-color: rgb(192,0,0);
    }
A seconda della grafica definitiva del progetto può essere necessario definire altre e diverse proprietà come ad esempio il colore del testo nella testata del pannello.
CSS
0 commenti
comments powered by Disqus