Forum | Gli ultimi tutorial di sviluppo web
 

CSS Esempi


CSS Sintassi

Il selettore elemento
Il selettore id
Il selettore di classe (per tutti gli elementi)
Il selettore di classe (solo per <p> elementi)
Raggruppamento selettori

Sintassi CSS spiegato


Sfondi CSS

Impostare il colore di sfondo della pagina
Impostare il colore di diversi elementi di sfondo
Impostare un'immagine come sfondo di una pagina
Come ripetere un'immagine di sfondo solo orizzontalmente
Come posizionare un'immagine di sfondo
Una immagine di sfondo fisso (questa immagine non scorrere con il resto della pagina)
Tutte le proprietà dello sfondo in una dichiarazione
Esempio sfondo avanzata

Proprietà dello sfondo spiegato


CSS Borders

Impostare la larghezza dei quattro 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 dei quattro 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 dei quattro 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
Tutte le proprietà del bordo in una dichiarazione
Impostare diverse confini su ogni lato
Tutte le proprietà migliori di confine in una dichiarazione
Tutte le proprietà del bordo di fondo in una dichiarazione
Tutte le proprietà del bordo di sinistra in una dichiarazione
Tutte le proprietà del bordo di destra in una dichiarazione

Proprietà del bordo spiegato


Margini CSS

Specifica margini differenti per ogni lato di un elemento
Lasciate che il margine sinistro essere ereditata dall'elemento genitore
La proprietà margine di stenografia
Impostare il margine di auto per centrare l'elemento all'interno del suo contenitore

Proprietà dei margini spiegato


Imbottitura CSS

Impostare il padding sinistro di un elemento
Impostare il padding destro di un elemento
Impostare il padding superiore di un elemento
Impostare il padding inferiore di un elemento
Tutte le proprietà imbottitura in una dichiarazione

Proprietà padding spiegato


CSS Testo

Impostare il colore del testo di elementi diversi
Allineare il testo
Rimuovere la riga sotto link
Decorare il testo
Controllare le lettere in un testo
testo rientro
Specificare lo spazio tra i caratteri
Specificare lo spazio tra le linee
Impostare la direzione del testo di un elemento
Aumentare lo spazio bianco tra le parole
Disabilitare la disposizione del testo all'interno di un elemento
Allineamento verticale di un'immagine all'interno del testo

Proprietà del testo spiegato


CSS Caratteri

Impostare il carattere di un 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
Imposta l'audacia del carattere
Tutte le proprietà del carattere in una dichiarazione

Proprietà dei font spiegato


CSS Links

Aggiungere colori diversi per i link visitati / non visitati
L'uso del text-decoration sui link
Specificare un colore di sfondo per i collegamenti
Aggiungere altri stili di collegamenti ipertestuali
Avanzate - Creare scatole di collegamento
Avanzate - Creare scatole di collegamento con bordi

Proprietà del collegamento spiegato


liste CSS

Tutti i diversi marcatori di voci di elenco in elenchi
Impostare un'immagine come marcatore di lista
Posizionare il marcatore di lista
Tutte le proprietà di elenco in una dichiarazione
Liste stile con i colori
Full-width elenco delimitato

Proprietà elenco spiegato


tabelle CSS

Specificare un bordo nero per la tavola, elementi th e td
L'utilizzo di border-collapse
Bordo unico intorno al tavolo
Specificare la larghezza e l'altezza di un tavolo
Impostare l'allineamento orizzontale del contenuto (text-align)
Impostare l'allineamento verticale del contenuto (vertical-align)
Specificare l'imbottitura per gli elementi th e td
divisori orizzontali
tavolo Hoverable
tavoli a righe
Specificare il colore dei bordi della tabella
Impostare la posizione della didascalia tavolo
Tabella responsive
Creare una tabella di fantasia

Proprietà tabella spiegato


CSS Box Model

Specificare un elemento con una larghezza totale di 250px

Box model ha spiegato


Outline CSS

Tracciare una linea intorno ad un elemento (cenni)
Impostare lo stile di uno schema
Impostare il colore di uno schema
Impostare la larghezza di un contorno

Proprietà dello schema spiegato


CSS Dimension

Impostare l'altezza e la larghezza di un elemento
Impostare max-larghezza di un elemento
Impostare l'altezza e la larghezza di elementi diversi
Impostare l'altezza e la larghezza di un'immagine utilizzando cento
Impostare min-width e max-larghezza di un elemento
Set min-height e max-height di un elemento

Proprietà delle quote spiegato


CSS display

Come nascondere un elemento (visibility:hidden)
Come per non visualizzare un elemento (display:none)
Come visualizzare un elemento a livello di blocco come un elemento in linea
Come visualizzare un elemento inline come un elemento a livello di blocco
Come usare i CSS con Javascript per mostrare contenuti nascosti

Proprietà di visualizzazione spiegato


Posizionamento CSS

Posizionare un elemento relativamente alla finestra del browser
Posizionare un elemento rispetto alla sua posizione normale
Posizionare un elemento con un valore assoluto
elementi sovrapposti
Impostare la forma di un elemento
Come creare una barra di scorrimento quando il contenuto di un elemento è troppo grande per adattarsi
Come impostare il browser per gestire automaticamente trabocco
Impostare il bordo superiore di un'immagine utilizzando un valore di pixel
Impostare il bordo inferiore di un'immagine utilizzando un valore di pixel
Impostare il bordo sinistro di un'immagine utilizzando un valore in pixel
Impostare il bordo destro di un'immagine utilizzando un valore di pixel
Modificare il cursore del testo dell'immagine Posizione (angolo in alto a sinistra)
Testo dell'immagine di posizione (in alto a destra)
Testo dell'immagine Posizione (angolo in basso a sinistra)
Testo dell'immagine di posizione (in basso a destra)
Immagine posizione del testo (centrato)

Le proprietà di posizionamento spiegato


Floating CSS

Una semplice utilizzo della proprietà float
Un'immagine con bordo e margini che galleggia sulla destra in un paragrafo
Un'immagine con una didascalia che galleggia sulla destra
Lasciate che la prima lettera di un paragrafo galleggiante a sinistra
Creare una galleria di immagini con la proprietà float
Spegnimento galleggiante (utilizzando la proprietà chiaro)
Creazione di un menu orizzontale
La creazione di una home page senza tabelle

Proprietà Float spiegato


CSS allineamento Elementi

Centro allineando con un margine
Sinistra / Destra allineamento con la posizione
Sinistra / Destra allineamento con la posizione - soluzione Crossbrowser
Sinistra / Destra allineamento con galleggiante
Sinistra / Destra allineamento con galleggiante - soluzione Crossbrowser

Allineare le proprietà spiegate


CSS combinatori

selettore di discendente
selettore Bambino
Selettore fratello adiacente
Selettore generale Sibling

Selettori Combinator spiegato


CSS Generated Content

Inserire l'URL tra parentesi dopo ogni collegamento con la proprietà dei contenuti
Numerazione sezioni e sottosezioni con "Section 1", "1.1", "1.2" , etc.
Specificare le virgolette con la proprietà citazioni


Le pseudo-classi CSS

Aggiungere colori diversi per un collegamento ipertestuale
Aggiungere altri stili di collegamenti ipertestuali
L'utilizzo di: focus
:first-child - corrisponde al primo elemento p
:first-child - corrisponde al primo elemento che in tutti gli elementi p
:first-child - Trova tutti i gli elementi in tutte le p primi elementi figlio
Utilizzare di :lang

Le pseudo-classi spiegato


CSS Gli pseudo-elementi

Effettuare la prima lettera speciale in un testo
Effettuare la prima linea speciale in un testo
Effettuare la prima lettera e la prima linea speciale
Usa: prima di inserire alcuni contenuti prima di un elemento
Usa: dopo di inserire alcuni contenuti dopo un elemento

Gli pseudo-elementi spiegati


Bar CSS Navigation

Completamente in stile barra di navigazione verticale
Completamente in stile barra di navigazione orizzontale

Navigazione bar spiegato


CSS Dropdowns

testo discesa
Menu a discesa
Menu a discesa allineato a destra
immagine discesa
Barra di navigazione a discesa

menu a discesa spiegato


CSS Tooltips

tooltip destro
tooltip sinistra
Top tooltip
tooltip fondo
Tooltip con la freccia
tooltip animate

Tooltips spiegato


Galleria CSS immagine

Galleria di immagini
Galleria immagini Responsive

Galleria immagini spiegato


CSS immagine Opacità

La creazione di immagini trasparenti - effetto mouseover
Creazione di una scatola trasparente con testo su un'immagine di sfondo

Immagine opacità spiegato


Sprites CSS Immagine

Un sprite immagine
Un sprite immagine - una lista di navigazione
Un sprite immagine con effetto hover

Sprite Immagine spiegato


CSS selettori di attributo

Seleziona tutti <a> elementi con un attributo target
Seleziona tutti <a> gli elementi con un target = "_ blank" attributo
Seleziona tutti gli elementi con un attributo titolo che contiene un elenco separato da spazi di parole, uno dei quali è "fiore"
Seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" (deve essere parola intera)
Seleziona tutti gli elementi con un valore di attributo di classe che inizia con "top" (non deve essere parola intera)
Seleziona tutti gli elementi con un valore di attributo di classe che si conclude con "test"
Seleziona tutti gli elementi con un valore di attributo classe che contiene "te"

I selettori di attributo spiegato


Forme CSS

Campo di input Full-width
Campo di inserimento imbottito
Campo di input delimitato
Fondo campo di input delimitato
Campi di input colorate
Campi di input mirate
Campi di input Focused 2
Ingresso icona / immagine con
Ricerca ingresso animate
textarea styling
Styling selezionare i menu
Styling pulsanti di input

forme spiegato


Contatori CSS

Creare un contatore
Contatori nidificati 1
Contatori nidificati 2

Contatori spiegato


CSS3 angoli arrotondati

Aggiungere angoli arrotondati agli elementi
Turno ogni angolo separatamente
Creare angoli ellittiche

CSS3 angoli arrotondati spiegato


Immagini CSS3 Border

Crea un bordo immagine intorno ad un elemento, utilizzando la parola chiave rotonda
Crea un bordo immagine intorno ad un elemento, utilizzando la parola chiave tratto
Immagine di frontiera - valori diversa sezione

Immagini di confine CSS3 spiegato


CSS3 Backgrounds

Aggiungere più immagini di sfondo per un elemento
Specificare la dimensione di un'immagine di sfondo
Scalare un'immagine di sfondo utilizzando "contenere" e "copertura"
Definire le dimensioni di più immagini di sfondo
Immagine di sfondo Full-size (riempire completamente l'area del contenuto)
Utilizzare background-origine per specificare dove l'immagine di sfondo è posizionata
Utilizzare background-clip per specificare l'area di pittura dello sfondo

Sfondi CSS3 spiegato


CSS3 gradienti

Sfumatura lineare - dall'alto verso il basso
Sfumatura lineare - da sinistra a destra
Sfumatura lineare - diagonale
Sfumatura lineare - con un angolo specificato
Sfumatura lineare - con più interruzioni di colore
Sfumatura lineare - colore di un arcobaleno + testo
Sfumatura lineare - con la trasparenza
Sfumatura lineare - un gradiente lineare ripetizione
Radial Gradient - interruzioni di colore equidistanti
Gradiente radiale - interruzioni di colore diverso distanziati
Radial Gradient - figura insieme
Radial Gradient - parole chiave diverse dimensioni
Gradiente radiale - un gradiente radiale ripetizione

Gradienti di CSS3 spiegato


CSS3 Effetti Ombra

Semplice effetto ombra
Aggiungere un colore alla ombra
Aggiungere un effetto di sfocatura per l'ombra
Il testo bianco con ombra nera
Un bagliore ombra neon rosso
Un bagliore ombra rosso e blu al neon
Il testo bianco con ombra nera, blu e blu scuro
Aggiungere un semplice box-shadow di un elemento
Aggiungere colore al box-shadow
Aggiungere il colore e l'effetto sfocato di box-shadow
Creare schede di carta simil-(testo)
Creare schede di carta simil-(immagini Polaroid)

CSS3 effetti di ombreggiatura spiegato


CSS3 Text

Specificare come nascosto, contenuto traboccato deve essere segnalato per l'utente
Come visualizzare il contenuto in overflow quando il mouse sopra l'elemento
Consentire parole lunghe per poter essere rotto e avvolgere sulla riga successiva
Specificare le regole linea di rottura

Testo CSS3 spiegato


CSS3 Fonts

Usa i tuoi "propri" font in @font-face regola
Usa i tuoi "propri" font in @font-face regola (in grassetto)

Font CSS3 spiegato


Trasformazioni 2D CSS3

translate() - spostare un elemento dalla posizione attuale
rotate() - ruotare un elemento in senso orario
rotate() - ruotare un elemento in senso antiorario
scale() - aumentare un elemento
scale() - diminuire un elemento
skewX() - inclina un elemento lungo l'asse X
skewY() - inclina un elemento lungo l'asse Y
skew() - distorce un elemento lungo X e Y
matrix() - ruotare, scalare, spostare, e l'inclinazione di un elemento

CSS3 2D trasforma spiegato


CSS3 3D Transforms

rotateX() - ruotare un elemento intorno al suo asse X in un dato grado
rotateY() - ruotare un elemento intorno al suo asse Y in un dato grado
rotateZ() - ruotare un elemento intorno al suo asse Z in un dato grado

CSS3 3D trasforma spiegato


CSS3 Transitions

Larghezza di cambiamento di un elemento - Transizione
Transizione - Larghezza cambiamento e l'altezza di un elemento
Specificare diverse curve di velocità per una transizione
Specificare un ritardo per un effetto di transizione
Aggiungere una trasformazione a un effetto di transizione
Specificare tutte le proprietà di transizione in una proprietà abbreviata

Transizioni CSS3 spiegato


CSS3 animazioni

Associare un'animazione a un elemento
Animazione - cambiamento di colore di sfondo di un elemento
Animazione - variazione background-colore e la posizione di un elemento
Ritardo un'animazione
Eseguire l'animazione 3 volte prima di fermarsi
Eseguire animazione per sempre
Animazione Eseguire in senso inverso
Animazione Esegui in cicli alternati
Curve di velocità per le animazioni
Animazione proprietà abbreviata

Animazioni CSS3 spiegato


Immagini CSS3

immagine arrotondata
immagine cerchiata
Immagine in miniatura
Immagine in miniatura come collegamento
immagine responsive
Testo dell'immagine (angolo in alto a sinistra)
Testo dell'immagine (in alto a destra)
Testo dell'immagine (in basso a sinistra)
Testo dell'immagine (in basso a destra)
Testo dell'immagine (centrato)
immagini Polaroid
Filtro immagini in scala di grigi
Avanzate - Immagine modale con i CSS e JavaScript

CSS3 Immagini spiegato


Pulsanti CSS3

Pulsanti di base CSS
colori dei pulsanti
dimensioni Button
bottoni arrotondati
Confini tasto colorato
pulsanti Hoverable
pulsanti ombra
pulsanti disabili
larghezza Button
gruppi di pulsanti
Gruppo di pulsanti Delimitata
Pulsante animato (Hover Effect)
Pulsante animato (Ripple Effect)
Pulsante animato (Pressato Effect)

Pulsanti CSS3 spiegato


CSS3 Impaginazione

impaginazione semplice
Impaginazione attivo e hoverable
Arrotondato impaginazione attiva e hoverable
Effetto di transizione Hoverable
impaginazione delimitata
Arrotondato impaginazione delimitato
Impaginazione con lo spazio tra i link
dimensione impaginazione
Impaginazione con lo spazio tra i link
impaginazione centrato
Briciole di pane

CSS3 paginazione spiegato


CSS3 più colonne

Creazione di colonne multiple
Specificare la distanza tra le colonne
Specificare lo stile della regola tra le colonne
Specificare la larghezza della regola tra le colonne
Specificare il colore della regola tra le colonne
Specificare la larghezza, lo stile e il colore della regola tra le colonne
Specificare il numero di colonne di un elemento dovrebbe estendersi su
Specificare una larghezza ottimale suggerita per le colonne

CSS3 più colonne spiegato


Interfaccia utente CSS3

Sia un utente ridimensionare la larghezza di un elemento
Sia un utente ridimensionare l'altezza di un elemento
Lasciate un utente ridimensionare sia la larghezza e l'altezza di un elemento
Aggiungere spazio tra un profilo e il confine di un elemento

Interfaccia utente CSS3 spiegato


CSS3 Box Dimensionamento

Larghezza di elementi senza scatola-dimensionamento
Larghezza di elementi con box-dimensionamento
Elementi di modulo + box-sizing

Scatola CSS3 dimensionamento spiegato


CSS3 Flexbox

Flexbox con tre elementi flessibili
Flexbox con tre elementi di flessione - direzione rtl
flex-direzione - Row-reverse
flex-direzione - Colonna
flex-direzione - Colonna-reverse
giustificare-content - flex-end
giustificare-content - Centro
giustificare-content - spazio-tra
giustificare-content - spazio-around
align-oggetti - tratto
align-oggetti - flex-start
align-oggetti - flex-end
align-oggetti - Centro
align-oggetti - di base
Flex-wrap - nowrap
Flex-wrap - avvolgere
Flex-wrap - avvolgere-reverse
align-content - Centro
Ordina gli articoli flex
Margin-right: auto;
Margin: auto; = Centraggio perfetto
allineare-auto su elementi flessibili
Specifica la lunghezza dell'elemento flessibile, rispetto al resto degli elementi flessibili
Creare un sito web reattivo con FlexBox

CSS3 FlexBox spiegato


CSS3 Media Queries

Cambiare il colore di sfondo al verde chiaro se la finestra è 480px di larghezza o più largo
Mostra un menu che galleggia sulla sinistra della pagina, se la finestra è 480px di larghezza o più largo

Dei media query CSS3 spiegato


CSS3 Media Queries - altri esempi

La pagina HTML
Larghezza da 520 a 699px - Applicare un'icona e-mail a ogni link
Larghezza da 700 a 1000 px - Prefazione i legami con un testo
Larghezza sopra 1001PX - Applicare indirizzo di posta elettronica per collegamenti
Larghezza sopra 1151px - Aggiungi icona come abbiamo usato prima
Utilizzare l'elenco di link e-mail su una barra laterale in una pagina web

Supporto CSS3 interroga spiegato esempi