creazione siti ferrara

CSS Corso Base – 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.

In CSS le pseudoclassi dinamiche rispondono ad azioni compiute dall’utente, vediamo la pseudoclasse dinamica :hover.

By |CSS, Web Design|Commenti disabilitati su CSS Corso Base – Pseudoclasse dinamica :hover

CSS Corso Base – funzione transition

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

By |CSS, Web Design|Commenti disabilitati su CSS Corso Base – funzione transition

CSS Corso Base – keyframes – animation – webkit

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.

By |CSS, Web Design|Commenti disabilitati su CSS Corso Base – keyframes – animation – webkit

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:

Il contenuto del documento

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.

Il mio sito ufficiale>

By |CSS, Web Design|Commenti disabilitati su CSS Corso Base – Google Web Fonts

HTML Corso Base – input type – month

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”.

By |HTML, Web Design|Commenti disabilitati su HTML Corso Base – input type – month