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.
CSS Corso Base – box-shadow
Il CSS 3 ha introdotto la proprietà box-shadows che serve a generare le ombre per i riquadri HTML.
L’ombra è un effetto che se usato con parsimonia aggiunge un tocco in più alla vostra pagina internet, conferendole un aspetto più professionale.
CSS Corso Base – border-radius
Il CSS 3 ha introdotto la proprietà border-radius che serve a definire la rotondità dei bordi per i riquadri.
L’elemento arrotondato, anche leggero, in generale aggiunge un tocco di professionalità alle vostre pagine web, facendole sembrare meno un foglio di Excel 
CSS Corso Base – Google Web Fonts
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.
CSS Corso Base – Cos’è CSS
CSS Corso Base per principianti: cos’è CSS?
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 CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico che permette di arricchire il linguaggio HTML al fine di fornire una formattazione più varia e ricca di effetti.
