Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
In CSS le pseudoclassi dinamiche rispondono ad azioni compiute dall’utente, vediamo la pseudoclasse dinamica :hover.
Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS3 ha introdotto una nuova specifica per gestire le transizioni animate, la funzione transition
Il CSS3 ha inserito una serie di componenti dedicati all’animazione. Le istruzioni keyframes e animation permettono di animare facilmente gli elementi di una pagina web, conferendole un aspetto più professionale e moderno.
Google Web Fonts è un servizio in cloud che ci permette di scaricare fonts gratuiti e open source da inserire nelle nostre pagine web. In questo modo potremo disporre di migliaia di fonts per impaginare in modo professionale le nostre pagine internet.
In tempi passati il web designer era costretto ad utilizzare solo i fonts installati nella macchina che ospitava il browser, incrociando i fonts comuni a Windows e Mac si calcola fossero circa 11 fonts. Per utilizzare fonts differenti era necessario utilizzare immagini, che appesantivano di molto il caricamento delle pagine web.
Google Web Fonts permette con poche istruzioni in CSS di scaricare al volo i fonts che ci servono per impaginare, mantenendo un rendering sempre perfetto della nostra pagina html.
Ecco come inserirli in una pagina HTML tramite CSS:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 {
font-family: 'Monsieur La Doulaise', cursive;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<h1>Il contenuto del documento</h1>
</body>
</html>
Il risultato lo possiamo vedere qui sotto:
Nell’header del documento importo come css il font da Google specificandone il nome alla riga “family=Monsieur+La+Doulaise”, poi assegno a h1 nel CSS il font e le sue proprietà.
Le operazioni da eseguire per ottenere il codice corretto:
1- Reperire i fonts Google al seguente link: http://www.google.com/fonts/
2- Cliccare sul bottene “Add to Collection”.
3- A piè pagina apparirà una fascia con la dicitura “>Collection”, cliccare sul bottone a destra “Use”.
4- Spuntare a sinistra il font che si intende utilizzare, o più font contemporaneamente.
5- In fondo alla pagina si genererà il codice CSS da utilizzare nell’HTML.
6- Ovviamente copiare e incollare come mostrato in precedenza.
I form in HTML ci servono per inviare dati di varia natura attraverso la compilazione di campi all’interno di una pagina internet. Analizziamo l’istruzione input type=”month”.
