Share
Vi siete mai chiesti come un particolare effetto è stato ottenuto in un web design e, dopo aver ingrandito alcuni click, avete scoperto che l'autore ha aggiunto ombre, bordi, sfumature, ecc.? In passato, ciò era ottenuto semplicemente tagliando un'immagine e impostandola come sfondo di qualche elemento. Fortunatamente, con i CSS3, possiamo permetterci molta più flessibilità. Ora, mentre il codice per un effetto così semplice potrebbe essere un po 'noioso, ne vale la pena, ed è quello che esamineremo nel suggerimento scritto e video di oggi!
Piuttosto guarda questo screencast su Screenr.com?
È sorprendente che qualcosa di così semplice richieda tanto codice, ma non è troppo approssimativo e può essere facilmente estratto in un frammento per un uso futuro.
Per rendere il nostro progetto il più semplice possibile, stiamo lavorando solo con un div vuoto. Crea un nuovo file index.html e incolla quanto segue:
Successivamente, aggiungeremo uno stile di base per l'elemento del corpo. Questo è solo per la presentazione e può essere facilmente rimosso. All'interno di tag di stile nella tua intestazione, aggiungi:
/ * Niente di speciale qui. Solo la tela * / body width: 500px; margine: 60px auto 0; sfondo: # 666;
Ora creeremo la nostra scatola, fornendo una larghezza e un'altezza.
#box / * Solo una casella * / larghezza: 500px; altezza: 500 px;
Dovremmo sapere tutti gli angoli arrotondati CSS ormai. Andiamo avanti e implementalo.
/ * Angoli arrotondati * / -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
Nota che forniamo anche le specifiche finali, di "border-radius", oltre alle versioni di Mozilla e Webkit.
Mozilla offre una proprietà utile, chiamata "-moz-border - * - colors". Questo ci permette di impostare un numero infinito di colori per un bordo. Per ottenere un effetto "doppio confine" sottile, implementiamo questa proprietà.
/ * Imposta un bordo base e un colore * / bordo: 2 px bianco solido; / * Colori di bordi multipli in Gecko * / -moz-border-top-colors: # 292929 bianco; -moz-border-right-colors: # 292929 bianco; -moz-border-bottom-colors: # 292929 bianco; -moz-border-left-colors: # 292929 bianco;
Nota come il numero di colori che forniamo è uguale alla larghezza del bordo che abbiamo impostato all'inizio (2px). Inoltre, non mettere virgole dopo ogni valore esadecimale; All'inizio ho commesso questo errore!
Per quanto ne so, al momento webkit non supporta i colori di bordo, anche se è possibile che io abbia torto. Se lo sono, per favore lascia un commento e fammi sapere! In ogni caso, per imitare questo effetto nel miglior modo possibile in Safari e Chrome, utilizzeremo box-shadow.
/ * Compensa per Webkit. Non è bello, ma funziona. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Si noti che i valori forniti si riferiscono rispettivamente all'offset X, all'offset Y, alla sfocatura e al colore dell'ombra. Passando -1px come offset Y, possiamo spingere l'ombra verso l'alto.
Il passo finale è fornire un gradiente di sfondo sottile per la nostra scatola. Tuttavia, dobbiamo essere sicuri di fornire un colore solido di fallback per i browser che non supportano i gradienti CSS.
/ * Sottile sfumatura di sfondo, con fallback su tinta unita * / sfondo: # e3e3e3; background: -moz-linear-gradient (in alto, # a4a4a4, # e3e3e3); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# a4a4a4), a (# e3e3e3));
Sfortunatamente, Mozilla e Webkit non sono del tutto d'accordo sulla sintassi per i gradienti, il che rende il processo estremamente irritante. Se è troppo confuso, puoi usare un nuovo servizio chiamato CSS3 Si prega di generare automaticamente la sintassi di ogni browser; è molto bello!
È fantastico; guardando la nostra immagine finale, è difficile dire cosa abbiamo effettivamente fatto! Ma questa è una buona cosa; la sottigliezza è la chiave in tutti gli aspetti del design. Grazie per la lettura / visualizzazione!
/ * Niente di speciale qui. Solo la tela * / body width: 500px; margine: 60px auto 0; sfondo: # 666; #box / * Solo una casella * / larghezza: 500px; altezza: 500 px; / * Angoli arrotondati * / -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; bordo: 2px bianco solido; / * Colori di bordi multipli in Gecko * / -moz-border-top-colors: # 292929 bianco; -moz-border-right-colors: # 292929 bianco; -moz-border-bottom-colors: # 292929 bianco; -moz-border-left-colors: # 292929 bianco; / * Compensa per Webkit. Non è bello, ma funziona. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Sottile sfumatura di sfondo, con fallback su tinta unita * / sfondo: # e3e3e3; background: -moz-linear-gradient (in alto, # a4a4a4, # e3e3e3); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# a4a4a4), a (# e3e3e3));
Accentsconagua