X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Premium Accesso libero

Accedere alla nostra libreria di articoli Hub Premium, file di progetto e il primo 10% di ogni tutorial-video dalla libreria di tutorial online .

Crea un account gratuito ora!

Come creare le ombre del testo in CSS3
Tradotto da Google Translate

Come ho detto nel mio tutorial sulla creazione di angoli arrotondati, CSS3 offre un sacco di impressionante nuove caratteristiche, come il più colonne, le pendenze, e, naturalmente, gli effetti di confine. In questo tutorial, daremo uno sguardo a un'altra nuova caratteristica, la creazione di ombre esterne sul testo.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Fase 1

Per iniziare con questo effetto, trovare o creare una regola CSS che si desidera applicare l'ombra di testo. Probabilmente il modo migliore per fare uso di questo sarebbe quello di creare una regola di classe appositamente per l'applicazione di questo effetto. Questo è quello che ho intenzione di fare comunque. Ho applicato anche un po 'di formattazione al mio testo utilizzando un elemento paragrafo ridefinito.

Fase 2

Successivamente, aggiungere la proprietà "text-shadow" per la regola. Ci sono quattro valori che possiamo applicare alla proprietà "text-shadow". In primo luogo, aggiungere in un colore. È possibile utilizzare qualsiasi colore che si desidera, anche se le ombre sono di solito abbastanza scuro. Se si salva il file e controllare il vostro lavoro nel vostro browser, noterete che non succede nulla. Ecco perché dobbiamo impostare alcune proprietà aggiuntive per primo.

Fase 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

Il secondo valore controlla la posizione verticale dell'ombra. Un valore positivo qui si sposta verso il basso ombra, mentre un valore negativo si muove verso l'alto.

Il terzo valore controlla la quantità di sfocatura sulle ombre. Utilizzare un valore inferiore per un'ombra nitida, o un valore più alto per l'ombra più sfocata. Come potete vedere, io preferisco usare valori piuttosto bassi.

E questo è tutto quello che c'è da creare Text-ombre in CSS3! Continua il viaggio di apprendimento CSS, consulta il tutorial di seguito:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link