Share
Il CSS è un linguaggio ben noto e ampiamente utilizzato per lo stile di siti Web. Con la terza versione in lavorazione, saranno implementate molte funzionalità per risparmiare tempo. Sebbene solo i browser più moderni attualmente supportino questi effetti, è comunque divertente vedere cosa c'è dietro l'angolo! In questo tutorial ti mostrerò cinque tecniche.
Prima di iniziare con questo tutorial, creiamo il markup di base con cui lavoreremo durante il tutorial.
Per il nostro xHTML, avremo bisogno dei seguenti elementi div:
Per questo, il nostro xHTML sarà:
Un'introduzione al CSS3; Un tutorial di Nettuts 
Nel nostro documento HTML, abbiamo creato alcuni elementi div, con gli ID indicati sopra.
Creiamo rapidamente un file CSS di base.
body background-color: #fff; #wrapper width: 100%; altezza: 100%; div width: 300px; altezza: 300 px; margine: 10px; fluttuare: a sinistra; / * il resto del codice verrà qui, più tardi * /
Come puoi vedere, abbiamo assegnato a tutti i tag div una larghezza e un'altezza di 300 px ciascuno. Li abbiamo anche costretti a fluttuare a sinistra, lasciandoci una pagina piena di div da giocare.
Può essere una seccatura creare angoli arrotondati. Innanzitutto, è necessario creare le immagini. Successivamente, devi creare più elementi per impostare gli spigoli arrotondati come sfondi. Conosci il trapano.
Questo problema può essere facilmente risolto con CSS3, con la proprietà chiamata "border-radius".
Per prima cosa creeremo un elemento div in nero e gli diamo un bordo nero.
Il confine è lì perché dobbiamo "eseguire" il confine-raggio di proprietà.
Lo facciamo così:
#round background-color: # 000; border: 1px solid # 000;
Una volta creato il div, aggiorna la pagina. Ora dovresti vedere un div quadrato nero con una larghezza e un'altezza di circa 300 px. Ora, lavoriamo sugli angoli arrotondati. Questo può essere realizzato con solo due linee di codice.
#round background-color: # 000; border: 1px solid # 000; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Come puoi vedere, abbiamo aggiunto due linee quasi identiche, con l'unica differenza "-moz" e "-webkit". -moz fa riferimento a Mozilla Firefox e Safari / Google Chrome utilizzano il prefisso -webkit.
Aggiorna il tuo documento HTML e vedrai un div arrotondato - bello e scorrevole. Bene, liscio ... In Firefox e Safari, sì, ma Chrome rende un margine leggermente pixelato.
Torna al nostro codice "border-raggio"ha bisogno di un valore Questo valore determina la nitidezza dell'angolo, maggiore è il valore, più arrotondato l'angolo, proprio come in Photoshop. Per quanto ne so, non c'è un valore massimo per questo elemento.
La creazione di angoli arrotondati tradizionali può drenare la giornata. Fortunatamente, CSS3 lo risolve!
Questa proprietà è abbastanza simile alla nostra precedente. Utilizza anche "border-radius", tuttavia modificheremo leggermente il nostro codice.
Lo facciamo in questo modo:
#indie background-color: # 000; border: 1px solid # 000; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;
Abbiamo aggiunto "topright" e "bottomright" al nostro codice; questo si riferisce all'angolo superiore e inferiore destro dell'elemento div. Con queste nuove proprietà, è possibile implementare facilmente una funzionalità "tab-like".
Le aggiunte da utilizzare sono "topright", "bottomright", "bottomleft" e "topleft".
Attualmente, è necessario scrivere diverse righe di CSS per regolare l'opacità degli elementi (hack). Ancora una volta, CSS 3 semplifica il processo.
Questa linea è facile da ricordare, è solo "opacità: valore;". Facile?
Il nostro codice sarà:
#opacity background-color: # 000; opacità: 0.3;
In Photoshop, è un compito banale creare ombre esterne. Tuttavia, quando li implementate nelle tue applicazioni web, probabilmente salverei l'ombra come un'immagine, e poi usarla come sfondo. Non piu! (Almeno per i browser moderni.) Sfortunatamente, solo Safari e Chrome supportano la funzione in questo momento.
Il codice richiede solo una riga, ma è piuttosto lungo e ha 4 valori diversi!
-webkit-box-shadow: 3px 5px 10px #ccc;
Per il primo valore, ho usato 3px. Questo determina il orizzontale distanza tra l'ombra esterna e l'elemento div. Andando avanti, il secondo valore, 5px, determina il verticale distanza tra l'ombra e la scatola.
Eppure c'è un altro valore px, 10px. Questo è il raggio dell'ombra - che in inglese significa la sfocatura dell'ombra, o quanto è "ampia" la sfumatura.
Infine, l'ultimo valore determina il colore dell'ombra. Ciò significa che l'ombra non è limitata solo alla scala di grigi; possiamo anche usare il rosso (# f00) come valore, che rende un'ombra luminosa e rossa.
Per il nostro codice finale, si riduce a quanto segue:
#shadow background-color: #fff; border: 1px solid # 000; -webkit-box-shadow: 3px 5px 10px #ccc;
Come puoi vedere, ho dato al div uno sfondo bianco, un bordo nero e un'ombra grigio chiaro.
Con la versione più recente di CSS, è possibile ridimensionare gli elementi. (Attualmente funziona solo in Safari.)
Con questo codice, è possibile fare apparire un piccolo triangolo nell'angolo in basso a destra di un elemento. È quindi possibile trascinarlo per ridimensionare. Il codice da seguire è ancora molto semplice, richiede solo una riga ed è supportato da alcuni elementi precedenti che potresti già conoscere. Questi sono "max-width", "max-height", "min-width" e "min-height".
Il codice è il seguente:
#resize background-color: #fff; border: 1px solid # 000; ridimensiona: entrambi; overflow: auto;
Nel codice ho usato 2 linee aggiuntive per il nostro normale CSS, "ridimensiona: entrambi;" e "overflow: auto;". La linea con overflow è necessaria per rendere il lavoro di ridimensionamento, può essere qualsiasi tipo di valore "overflow", purché sia lì.
L'altra linea che ho usato è "ridimensiona: entrambi;". Questa riga specifica che l'elemento può essere ridimensionato in entrambi orizzontale e verticale indicazioni.
Cosa dovresti prendere da questo articolo? Nei prossimi anni, il tuo lavoro diventerà più semplice, le pagine web verranno caricate più velocemente e ti resterà più tempo per la tua famiglia! Sebbene non si possa fare affidamento su questi effetti per funzionare in tutti i browser, non c'è assolutamente nulla di sbagliato nell'applicare un angolo arrotondato a un div in un browser e non nell'altro. Consideralo un aggiornamento!
Per ulteriori informazioni su CSS3, è possibile visitare http://www.css3.info.
Accentsconagua