All Articles Web
Come creare le ombre del testo in CSS3
Geoff Blake on Wed, March 30th 0 comments
As I mentioned in my tutorial on creating rounded corners, CSS3 is offering up a lot of awesome new features, like multiple columns, gradients, and of course, border effects. In this tutorial, we'll t

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:

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: