Esempio di Progetto PHP - CSS (superiori)

CSS pag1 Progetto

CSS intestazione pagina

L’elemento che contiene l’intestazione del nostro sito web si adatta alla risoluzione massima della finestra nel browser, inoltre si comporterà come un vero e proprio elemento <table>, prendendo le sembianze di una tabella.

html, body{
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
background-color: #2CBBBB;
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
display: table-cell;
vertical-align:middle;
}
div.intestazione{
background: #4D4D4D;
color: white;
text-align: center;
border: 3px solid white;
padding:right: 10px;
padding:left: 10px;
width:100%;
}

I blocchi che esibiscono il nome di “messaggio” e “contenuto” presentano un colore bianco, testo allineato al centro, raggruppato in un riquadro che presenta un bordo di 1 px.

div.messaggio, div.contenuto{
color: white;
text-align: center;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
table {
width:100%;
color: white; 
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
border-collapse:
collapse; border-spacing: 0;
}
td, th { border: 1px solid white; height: 30px; } 
th {
background: #4D4D4D; 
font-weight: bold; 
}
td {
background: #797979; 
text-align: center; 
}

Questo è il risultato ottenuto:

intestazione

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;
• È 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;}

È 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

CSS pag3 Progetto

CSS menù di scelta

Questa parte indica una lista in cui sono raggruppati: l’inserimento, la modifica e i progetti del docente, ai quali vengono date delle dimensioni

div.lista {
  width: 700px;
}

Con questo comando le liste non risultano puntate.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Qui invece viene definito il carattere delle voci che fanno parte della lista.

li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}

Si riferisce sempre alla lista e in questa parte del codice possiamo notare che ci sono dei comandi che ci permettono di aumentare la dimensione del carattere e anche della riga quando si passa sopra il cursore del mouse, rimanendo sempre nel posto in cui si trovano.

li a {
  text-decoration: none;
  color: #4D4D4D;
  display: block;
  width: 700px;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;}
li a:hover {
  font-size: 25px;
  background: #f6f6f6;
}

Questo è il risultato ottenuto:

menù1

Qui puoi vedere il funzionamento della funzione:

menù2

CSS pag4 Progetto

CSS piè di pagina

È la parte della pagina in cui vi è la firma di colui che ha progettato l’ha progettata e tale parte ha uno sfondo grigio scuro con scritte bianche, testo allineato al centro e presenta dei bordi bianchi.

div.fine{
background: #4D4D4D;
color: white;
text-align: center;
border: 3px solid white;
padding:right: 10px;
padding:left: 10px;
padding-bottom: 10px;
paddin-top: 10px;
width:100%;
}

Questo è il risultato ottenuto:

piè di pagina