Esempio CSS
- Pagina precedente Elemento di griglia CSS
- Pagina successiva Quiz CSS
Selettore CSS
Uso CSS
Colori CSS
Sfondo CSS
- Impostare il colore di sfondo della pagina
- Impostare il colore di sfondo di diversi elementi
- Impostare l'immagine come sfondo della pagina
- Come ripetere l'immagine di sfondo solo nella direzione orizzontale
- Come posizionare l'immagine di sfondo
- Immagine di sfondo fissa (l'immagine non ruota con il resto della pagina)
- Tutte le proprietà di sfondo in una singola dichiarazione
- Esempio avanzato di sfondo
Bordo CSS
- Impostare la larghezza di tutti i bordi
- Impostare la larghezza del bordo superiore
- Impostare la larghezza del bordo inferiore
- Impostare la larghezza del bordo sinistro
- Impostare la larghezza del bordo destro
- Impostare lo stile di tutti i bordi
- Impostare lo stile del bordo superiore
- Impostare lo stile del bordo inferiore
- Impostare lo stile del bordo sinistro
- Impostare lo stile del bordo destro
- Impostare il colore di tutti i bordi
- Impostare il colore del bordo superiore
- Impostare il colore del bordo inferiore
- Impostare il colore del bordo sinistro
- Impostare il colore del bordo destro
- Tutti i bordi in una singola dichiarazione
- Aggiungere angoli arrotondati all'elemento
- Impostare bordi diversi per ogni lato
- Tutti i bordi superiore in una singola dichiarazione
- Tutti i bordi inferiore in una singola dichiarazione
- Tutti i bordi sinistra in una singola dichiarazione
- Tutti i bordi destra in una singola dichiarazione
Margine CSS
- Definire margini esterni diversi per i lati dell'elemento
- Usare il margine abbreviato con quattro valori
- Usare il margine abbreviato con tre valori
- Usare il margine abbreviato con due valori
- Usare il margine abbreviato con un valore
- Impostare il margine esterno su auto per centrare gli elementi all'interno del contenitore
- Fare ereditare il margine esterno sinistro dall'elemento padre
- Unione dei margini esterni
Padding CSS
- Definire margini interni diversi per i lati dell'elemento
- Usare il margine interno abbreviato con quattro valori
- Usare il margine interno abbreviato con tre valori
- Usare il margine interno abbreviato con due valori
- Usare il margine interno abbreviato con un valore
- Margine interno e larghezza dell'elemento (non impostare box-sizing)
- Margine interno e larghezza dell'elemento (impostare box-sizing)
- Impostare il margine interno sinistro dell'elemento
- Impostare il margine interno destro dell'elemento
- Impostare il margine interno superiore dell'elemento
- Impostare il margine interno inferiore dell'elemento
Altezza/larghezza CSS
- Impostare l'altezza e la larghezza dell'elemento
- Impostare la larghezza massima dell'elemento
- Impostare l'altezza e la larghezza di diversi elementi
- Usare il cento per cento per impostare l'altezza e la larghezza dell'immagine
- Impostare la larghezza minima e massima dell'elemento
- Impostare l'altezza minima e massima dell'elemento
Modello di contenitore CSS
Contorno CSS
- Disegnare una linea intorno all'elemento (contorno)
- Impostare lo stile del contorno
- Impostare il colore del contorno
- Usare outline-color: capovolgere il contorno
- Impostare la larghezza del contorno
- Utilizzare l'attributo di contorno abbreviato
- Aggiungere spazio tra il contorno dell'elemento e il bordo
Testo CSS
- Impostare il colore del testo di diversi elementi
- Allineamento del testo
- Eliminare la linea sotto il link
- Decorare il testo
- Controllare la maiuscolizzazione del testo
- Indentare il testo
- Stabilire l'intervallo di carattere
- Stabilire l'intervallo di riga
- Impostare la direzione del testo dell'elemento
- Aumentare lo spazio tra le lettere
- Stabilire l'ombra del testo dell'elemento
- Disabilitare il riempimento del testo all'interno dell'elemento
- Allineamento verticale dell'immagine nel testo
Font CSS
- Impostare il tipo di carattere del testo
- Impostare la dimensione del carattere
- Impostare la dimensione del carattere in px
- Impostare la dimensione del carattere in em
- Impostare la dimensione del carattere in percentuale e em
- Impostare lo stile del carattere
- Impostare la variante del carattere
- Impostare la spessore del carattere
- Tutti gli attributi dei caratteri in una dichiarazione
Link CSS
Elenco CSS
- Tutti i segni di elenco diversi nella lista
- Impostare l'immagine come segno di elenco dell'elemento elenco
- Posizionare il segno di elenco dell'elemento elenco
- Eliminare la configurazione predefinita della lista
- Tutti gli attributi della lista in una dichiarazione
- Impostare lo stile della lista con il colore
- Lista con bordi larghi
Tabella CSS
- Stabilire il bordo nero di table, th e td
- Utilizzare border-collapse
- Bordo singolo della tabella
- Stabilire la larghezza e l'altezza della tabella
- Impostare allineamento orizzontale del contenuto (text-align)
- Impostare allineamento verticale del contenuto
- Stabilire il margine interno di th e td
- Separatore orizzontale
- Tabella hover
- Tabella a barre
- Stabilire il colore del bordo della tabella
- Impostare la posizione del titolo della tabella
- Tabella responsive
- Creare tabelle belle
Visualizzazione CSS
Posizionamento CSS
- Posizionare l'elemento rispetto alla finestra del browser
- Posizionare l'elemento rispetto alla sua posizione normale
- Posizionamento assoluto dell'elemento
- Posizionamento adesivo
- Elementi sovrapposti
- Impostare la forma dell'elemento
- Impostare il margine superiore dell'immagine utilizzando il valore dei pixel
- Impostare il margine inferiore dell'immagine utilizzando il valore dei pixel
- Imposta l'ANGOLO sinistro dell'immagine utilizzando valori in pixel
- Imposta l'ANGOLO destro dell'immagine utilizzando valori in pixel
- Posizionamento dell'immagine del testo (angolo in alto a sinistra)
- Posizionamento dell'immagine del testo (angolo in alto a destra)
- Posizionamento dell'immagine del testo (angolo in basso a sinistra)
- Posizionamento dell'immagine del testo (angolo in basso a destra)
- Posizionamento dell'immagine del testo (centrato)
CSS Overflow
- Utilizzo di overflow: visible - Il contenuto non è tagliato. Viene visualizzato al di fuori del riquadro dell'elemento.
- Utilizzo di overflow: hidden - Il contenuto è tagliato, e il resto del contenuto è nascosto.
- Utilizzo di overflow: scroll - Il contenuto è tagliato, ma è aggiunta una barra di scorrimento per vedere il resto del contenuto.
- Utilizzo di overflow: auto - Se il contenuto è tagliato, aggiungi una barra di scorrimento per vedere il resto del contenuto.
- Utilizzo di overflow-x e overflow-y
CSS Fluttuante
- Utilizzo semplice dell'attributo float
- Fai fluttuare l'immagine con bordi e margini a destra del paragrafo
- Fai fluttuare l'immagine con il titolo a destra
- Fai fluttuare la prima lettera del paragrafo a sinistra
- Chiudi il flusso (utilizzando l'attributo clear)
- Chiudi il flusso (utilizzando il hack clearfix)
- Creazione di caselle fluttuanti
- Creazione di immagini affiancate
- Creazione di caselle di altezza uguale (tramite flexbox)
- Creazione di un menu orizzontale
- Esempio di creazione di layout web
CSS Inline-block
Allineamento degli elementi CSS
- Allineamento centrale tramite margini
- Allineamento centrale del testo
- Allineamento centrale dell'immagine
- Allineamento a sinistra/destra tramite position
- Allineamento a sinistra/destra tramite position - soluzione cross-browser
- Allineamento a sinistra/destra tramite float
- Allineamento a sinistra/destra tramite float - soluzione cross-browser
- Allineamento verticale tramite padding
- Allineamento verticale e orizzontale
- Allineamento verticale tramite line-height
- Allineamento verticale e orizzontale tramite position
Combinatore CSS
Pseudo-classe CSS
- Aggiungi colori diversi ai link
- Aggiungi altri stili ai link
- Utilizzo di :focus
- :first-child - Corrisponde al primo elemento p
- :first-child - Corrisponde al primo elemento i all'interno di un elemento p
- :first-child - Corrisponde a tutti gli elementi i all'interno del primo figlio di un elemento p
- Usare :lang
Pseudo-elemento CSS
Generazione del contenuto CSS
Opacità CSS
Barra di navigazione CSS
- Barra di navigazione verticale con stili completi
- Barra di navigazione orizzontale con stili completi
- Barra di navigazione verticale fissa a piena altezza
- Barra di navigazione orizzontale fissa
- Barra di navigazione adesiva (non funziona in IE o Edge 15 e versioni precedenti)
- Barra di navigazione superiore responsive
- Barra di navigazione laterale responsive
Elenco a discesa CSS
Galleria di immagini CSS
Image sprite CSS
Selettore di attributo CSS
- Selezionare tutti gli elementi <a> con l'attributo target
- Selezionare tutti gli elementi <a> con l'attributo target="_blank"
- Selezionare tutti gli elementi con l'attributo title che contiene una lista di parole separate da spazi, una delle quali è "flower"
- Selezionare tutti gli elementi con l'attributo class che inizia con "top" (deve essere una parola intera)
- Selezionare tutti gli elementi con l'attributo class che inizia con "top" (non può essere una parola intera)
- Selezionare tutti gli elementi con l'attributo class che termina con "test"
- Selezionare tutti gli elementi con l'attributo class che contiene "te"
Formulario CSS
- Campo di input a piena larghezza
- Campo di input riempito
- Campo di input con bordo
- Campo di input con bordo inferiore
- Campo di input con colore
- Campo di input con fuoco
- Campo di input con fuoco 2
- Campo di input con icona
- Casella di ricerca con animazione
- Impostare lo stile del campo di testo
- Impostare lo stile del menu a scelta
- Impostare lo stile del pulsante
- Modulo responsive
Contatore CSS
Layout del sito CSS
Angolo arrotondato CSS
Immagine di bordo CSS
Sfondo CSS
- Aggiungere più immagini di sfondo all'elemento
- Definire la dimensione dell'immagine di sfondo
- Utilizzare "contain" e "cover" per ridimensionare l'immagine di sfondo
- Definire la dimensione dell'immagine di sfondo
- Immagine di sfondo a piena dimensione (copre interamente l'area del contenuto)
- Utilizzare background-origin per definire la posizione di posizionamento dell'immagine di sfondo
- Utilizzare background-clip per definire l'area di disegno dello sfondo
Gradiente CSS
- Gradiente lineare - Da alto a basso
- Gradiente lineare - Da sinistra a destra
- Gradiente lineare - Diagonale
- Gradiente lineare - Angolo specifico
- Gradiente lineare - Marche di colore multiple
- Gradiente lineare - Arcobaleno + testo
- Gradiente lineare - Opacità
- Gradiente lineare - Gradiente lineare ripetuto
- Gradiente radiale - Marche di colore distribuite uniformemente
- Gradiente radiale - Marche di colore con spazi diversi
- Gradiente radiale - Impostare la forma
- Gradiente radiale - Dimensioni diverse delle parole chiave
- Gradiente radiale - Gradiente radiale ripetuto
Effetto ombra CSS
- Effetto ombra semplice
- Aggiungere colore all'ombra
- Aggiungere un effetto sfocatura all'ombra
- Testo bianco con ombra nera
- Ombra luminosa rossa neon
- Ombra luminosa rossa e blu neon
- Testo bianco con ombra nera, blu e blu scuro
- Aggiungere un box-shadow semplice all'elemento
- Aggiungere colore a box-shadow
- Aggiungere colore e effetto sfocatura a box-shadow
- Creare un'ombra simile a una carta di carta (testo)
- Creare un'ombra simile a una carta di carta (immagine Polaroid)
Effetti di testo CSS
- Specificare come presentare al utente il contenuto overflow non visualizzato
- Come visualizzare il contenuto overflow quando il mouse è sopra l'elemento
- Permettere che i testi lunghi possano essere spezzati e riportati alla riga successiva
- Definire le regole di rinvio
- Definire il modo di scrittura del testo (orizzontale o verticale)
Carattere web CSS
Trasformazioni 2D CSS
- translate() - Rimozione dell'elemento dalla posizione corrente
- rotate() - Rotazione oraria dell'elemento
- rotate() - Rotazione antioraria dell'elemento
- scale() - Ingrandisci un elemento
- scale() - Riduci un elemento
- skewX() - Inclina un elemento lungo l'asse X
- skewY() - Inclina un elemento lungo l'asse Y
- skew() - Inclina un elemento lungo l'asse X e Y
- matrix() - Ruota, ingrandisce, muove e inclina un elemento
Trasformazioni 3D CSS
Transizioni CSS
- Transizione - Cambia la larghezza di un elemento
- Transizione - Cambia la larghezza e l'altezza di un elemento
- Definire diverse curve di velocità per la transizione
- Definire un ritardo per l'effetto di transizione
- Aggiungere una trasformazione all'effetto di transizione
- Definire tutte le proprietà di transizione in una breve proprietà
Animazioni CSS
- Leggi l'animazione a un elemento
- Animazione - Cambia il colore di sfondo di un elemento
- Animazione - Cambia il colore di sfondo e la posizione di un elemento
- Animazione con ritardo
- Esegui l'animazione tre volte prima di fermarsi
- Animazione infinita
- Animazione in senso inverso
- Animazione alternata
- Curva di velocità dell'animazione
- Proprietà abbreviate dell'animazione
Suggerimenti CSS
Immagine con stile CSS
- Immagine con angoli arrotondati
- Immagine circolare
- Anteprima
- Anteprima come link
- Immagine responsiva
- Testo dell'immagine (angolo in alto a sinistra)
- Testo dell'immagine (angolo in alto a destra)
- Testo dell'immagine (angolo in basso a sinistra)
- Testo dell'immagine (angolo in alto a destra)
- Testo dell'immagine (centrato)
- Immagine Polaroid
- Filtro di immagine in scala di grigio
- Avanzato - Modale di immagine implementata con CSS e JavaScript
Object-fit CSS
Pulsanti CSS
- Pulsante CSS di base
- Colore del pulsante
- Dimensione del pulsante
- Pulsante arrotondato
- Bordo del pulsante con colore
- Pulsante hoverabile
- Pulsante con ombra
- Pulsante disabilitato
- Larghezza del pulsante
- Gruppo di pulsanti
- Gruppo di pulsanti con bordi
- Pulsante con animazione (effetto hover)
- Pulsante con animazione (effetto pulsante)
- Pulsante con animazione (effetto ondulazione)
Pagine CSS
- Pagina di navigazione semplice
- Pagina di navigazione attiva e hoverabile
- Pagina di navigazione attiva con angoli arrotondati e hoverabile
- Effetto di transizione hoverabile
- Pagina di navigazione con bordi
- Pagina di navigazione con angoli arrotondati e bordi
- Pagina di navigazione con link separati da spazi
- Dimensione della pagina di navigazione
- Pagina di navigazione centrata
- Fuscioli
Colonne multiple CSS
- Crea colonne multiple
- Definisci lo spazio tra le colonne
- Definisci lo stile delle linee tra le colonne
- Definisci lo spessore delle linee tra le colonne
- Definisci il colore delle linee tra le colonne
- Definisci lo spessore, lo stile e il colore delle linee tra le colonne
- Definisci quante colonne l'elemento dovrebbe coprire
- Definisci la larghezza ottimale per le colonne
Interfaccia utente CSS
Variabili CSS
Box Sizing CSS
CSS Box Sizing
- Box flessibile con tre elementi flessibili
- Box flessibile con tre elementi flessibili - direzione rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Ordinamento degli elementi flessibili
- Margin-right:auto;
- Margin:auto; = centratura perfetta
- Imposta align-self sugli elementi flessibili
- Definisci la lunghezza degli elementi flessibili, rispetto al resto degli elementi
- Crea una galleria di immagini responsive utilizzando il flexbox
- Crea un sito responsive utilizzando il flexbox
Query di media CSS
Query di media CSS - Altri esempi
- Impostare diversi colori di sfondo in base alla larghezza dello schermo
- Menu di navigazione rispondente
- Colonne rispondenti utilizzando il浮动
- Colonne rispondenti utilizzando Flexbox
- Nascondere gli elementi tramite query di media
- Dimensione del font responsiva
- Galleria di immagini responsiva
- Sito web responsivo
- Modifica della layout della pagina in base alla direzione del browser
- Larghezza minima a larghezza massima
Progettazione del sito web responsivo CSS
- Visualizzazione a griglia responsiva
- Aggiungi breakpoint per desktop, laptop e cellulare
- Breakpoint tipici
- Immagine responsiva
- Video responsivo
- Frame di progettazione responsiva: W3.CSS
- Frame di progettazione responsiva: Bootstrap
Spiegazione dell'esempio: Progettazione del sito web responsivo CSS
Griglia CSS
- Pagina precedente Elemento di griglia CSS
- Pagina successiva Quiz CSS
