De | | CSS | 3165 vizualizari
Tutorial CSS3: Efecte font - umbra, blur, stroke

De multe ori ne confruntam cu neplacuta situatie in care informatia pe care dorim sa o transmitem vizitatorilor nostrii nu este lizibila. Cauzele acestei neplaceri pot fi diverse, font-ul in sine poate fi nepotrivit, marimea text-ului prea mica sau incompatibilitatea culorilor. Ultima situatie poate fi imbunatatita folosind propietatea CSS3 text-shadow.

Text-Shadow

Folosind text-shadow putem realiza 3 efecte distincte: umbra, blur si stroke. Sintaxa este urmatoarea: text-shadow: 1px 2px 10px #FF0000 unde prima variabila (1px) reprezinta umbra pe orizontala, a doua variabila (2px) reprezinta umbra pe verticala, a treia variabila (10px) reprezinta nivelul de blur si ultima variabila (#FF0000) este codul hex pentru culoarea dorita.

Sintaxa CSS

text-shadow: <numar>px <numar>px <numar>px #<cod_hex>;

Exemple

Stroke portocaliu de 1 pixel:

<p style="text-shadow: 1px 1px 0px #ff5a00;">Acest text are stroke</p>

Acest text are stroke
Prin atribuirea valorii de 1 pixel umbrei orizontale cat si celei verticale si valoarea de 0px atributului de blur vom obtine un efect clasic de stroke.

Blur verde de 10 pixeli:

<p style="text-shadow: 1px 1px 10px #91e709;">Acest text este blurat</p>

Acest text este blurat
Prin atribuirea valorii de 1 pixel umbrei orizontale cat si celei verticale si valoarea de 10px atributului de blur vom obtine un efect clasic de blur.

Browsere compatibile:

Google Chrome 4.0+
Internet Explorer 10.0+
Firefox 3.5+
Safari 4.0+
Opera 9.6+

tag
tag
tag
Scris de:
Serban Cioclov

CEO & Founder of SCDesign.ro

Cere Oferta Gratuit

Imaginea afacerii dumneavoastra trebuie sa aiba un impact vizual aparte pentru a oferi din primul moment încredere utilizatorului. Fie ca aveti nevoie de un site web, magazin online, logo ori alt element grafic, calitatea este garantata.

Doriti o evaluare gratuita a unui proiect? Ne puteti trimite detaliile
folosind datele sau formularul de contact.

Vreau oferta

Wordpress
MySQL
cPanel
HTML5
Prestashop
Prestashop
Prestashop
Prestashop