Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag2 Progetto

CSS inserimento dati personali

Questo codice CSS lo troviamo nelle seguenti pagine del progetto: inserimento di un nuovo insegnante e di un progetto, la modifica e la visualizzazione di un progetto, la gestione di un progetto (visualizzazione, modifica e cancellazione) e le credenziali del capo progetto. Ecco riportato il codice: Nel primo riquadro notiamo che i comandi si riferiscono a ciascuna classe che si chiama form, i quali gli conferiscono un carattere helvetica (oppure Verdana o sans-serif) e delle dimensioni ben precise. Presenta inoltre dei margini. Essendo una classe, tutte le voci in essa raggruppate, sono raccolte in un box che a sua volta presenta delle sfumature (box-shadow) e tutti i numeri che vengono di seguito rappresentano delle parti fondamentali: il primo indica la posizione dell’ombra da sinistra a destra, il secondo indica sempre lo spostamento dell’ombra ma in questo caso in alto o in basso, il terzo numero indica la messa a fuoco dell’ombra cioè la sfumatura, mentre i numeri tra parentesi vanno ad indicare il colore che si vuole ottenere per l’ombra.

.form{
    font-family: 'Helvetica', Verdana, sans-serif;
    width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 50px auto;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
}

La seconda parte del codice fa riferimento a tutte le classi che hanno il nome “form p”, ovvero tutte le classi che fanno riferimento ad un particolare paragrafo. Anche in questo caso, come nel precedente, vengono utilizzati dei caratteri particolari, la classe presenta dei margini e una grandezza dei caratteri con le apposite dimensioni.

.form p{
    background: #4D4D4D;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding: 20px;
    margin: -30px -30px 30px -30px;
}

Questa parte riguarda una classe chiamata “select” e presenta le seguenti caratteristiche:

• La proprietà box-sizing viene utilizzata per indicare al browser quali sono le proprietà di ridimensionamento che dovrebbe includere;
• Un display che è bloccato anche se si scorre verso il basso o alto;
• E’ un blocco che non presenta alcun blocco e il suo sfondo non ha alcun colore, infatti è trasparente;

.form select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
}

Questo blocco prensenta due proprietà:

• La proprietà “resize” che specifica se un elemento è ridimensionabile dall'utente;
• La proprietà “overflow”: per ritagliare i contenuti o per raggiungere le barre di scorrimento quando il contenuto di un elemento è troppo grande per entrare in un’area specifica.

.form textarea{
    resize:none;
    overflow: hidden;}

E’ la sezione che riguarda i bottoni che inviano i dati una volta scritti. Essi sono allineati al centro.

.form input[type="submit"]{
    -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    box-shadow: inset 0px 1px 0px 0px #45D6D6;
    background-color: #2CBBBB;
    border: 1px solid #27A0A0;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 14px;
    padding: 8px 18px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

In questa classe la funzione “input[type="submit"]:hover” fa sì che quando si passa sopra al bottone questo cambi colore.

.form input[type="submit"]:hover {
    background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
    background-color:#34CACA;
}

Questo è il risultato ottenuto:

inserimento dati