Archivio

Posts Tagged ‘tutorial’
01 Jan

5 Semplici, ma utili proprietà CSS: Cursor

4. Cursor

Per cambiare il comportamento di un bottone, si dovrebbe di conseguenza cambiare il cursore. Per esempio, se un bottone è disabilitato, il cursore dovrebbe essere la freccia di default, ad indicare che non è cliccabile. Quindi la proprietà cursor si rende estremamente utile nello sviluppo di applicazioni Web.

cursor

.disabled {
cursor: default;
}

.busy {
cursor: wait;
}

.clickable:hover {
cursor: pointer;
}

02 Dec

5 Semplici, ma utili proprietà CSS: CSS Clip

Parte Prima: CSS Clip

Questa serie di 5 posts riguarda altrettante utili proprietà con cui essere familiari, ma che vengono usate raramente. Non si tratta di spettacolari proprietà CSS3. Mi riferisco al vecchio CSS2:  clip, min-height, white-space, cursor, e display che sono largamente supportate da tutti i browser. Potresti rimanere sorpreso dalla loro enorme utilità.

Questi tutorial sono tratti (e tradotti) da uno dei migliori siti di risorse per design web e grafico: http://www.webdesignerwall.com/

1. CSS Clip
La proprietà  css “clip” è come una maschera. Ti permette di delimitare il contenuto di un elemento entro una forma  rettangolare. Per delimitare un elemento si deve specificare la posizione su absolute. Quindi specificare I valori “top, right, bottom,  left” relativi ad un elemento. Prosegui la lettura…

24 Oct

CSS Tutorial 04: Font

Lezione 4: Font

Verranno descritte le seguenti proprietà CSS:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

La famiglia dei caratteri [font-family]

La proprietà font-family viene usata per definire le priorità per la lista dei caratteri da usare per visualizzare un elemento o una pagina web. Se il primo font della lista non è stato istallato sul computer che accede al sito, allora verrà provato il secondo font della lista e così via finchè non verrà trovato un fonte disponibile.

Ci sono due tipi di nomi per catalogare i font: i nomi della famiglia e le famiglie generiche. I due termini vengono spiegati sotto.

Nome della famiglia
Esempi di nomi della famiglia (conosciuto spesso con il termine “font”) possono essere per esempio “Arial”, “Times New Roman” o”Tahoma”.
Famiglia generica
Le famiglie generiche possono essere descritte meglio come gruppi di nomi di famiglie con caratteristiche uniformi. Un esemio è il sans-serif (in italiano, senza grazie), che è la collezione dei font senza le cosiddette grazie, o “piedi”.

Di seguito vengono illustrate le differenze:
Prosegui la lettura…

03 Oct

Css Tutorial 02:Come funzionano i Css

La sintassi di base dei CSS

Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:

Usando solo l’ HTML avremmo fatto in questo modo:

 <body bgcolor=”#FF0000″>

Lo stesso risultato con i CSS si ottiene così:

body {background-color: #FF0000;}

Come potrai notare, i codici dell’HTML e del CSS sono più o meno identici. L’esempio sopra ti mostra anche il modello fondamentale dei CSS:

schema css 01

schema css 01

Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.
Prosegui la lettura…

02 Oct

Css Tutorial 01: Cosa sono i css

Cosa sono i CSS?

CSS è l’acronimo di Cascading Style Sheets (in italiano Fogli di stile).

Cosa posso fare con i CSS?

I CSS formano un linguaggio per la definizione del layout dei documenti HTML. Per esempio, i CSS si occupano dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo, del posizionamento e di molte altre cose.

L’HTML può essere usato per aggiungere layout ai siti web. Ma i CSS offrono molte più opzioni, accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.

Dopo sole poche lesioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in modo da dare al tuo sito web un nuovo e grandioso aspetto.

Che differenza c’è tra i CSS e l’HTML?

L’HTML viene usato per strutturare il contenuto. I CSS vengono usati per formattare la struttura del contenuto.
Prosegui la lettura…