Proprietăți CSS box-shadow și text-shadow

Bună ziua, dragi vizitatori ai TakProstoTak.ru. Internetul, ca orice lucru în viață, se dezvoltă rapid, iar resursele de internet sunt la locul lor. Dezvoltarea merge în mai multe direcții: 1) design, uzabilitate 2) calitatea conținutului, forma de prezentare.

Astăzi, așa cum ați ghicit, vom vorbi despre cum să folosiți CSS pentru a adăugaumbre (box-shadow) pentru a bloca elemente de pe pagină și despre cum să facețiumbră pentru text (text-shaddow).

Designerii avansați sunt foarte pasionați să folosească umbre pentru diferite blocuri , titluri de text în aspectul lor. Codificatorii sunt teribil de nemulțumiți de acest lucru, deoarece nu toate browserele sunt atât de avansate încât să ajungă din urmă cu gândul designerilor care se străduiesc spre înălțimi, în special iubitului Internet Explorer, îi place să arunce tot felul de surprize. Nu știe ceva, nu știe să facă ceva, înțelege unele lucruri în felul lui și nu-i pasă de niciun standard, un fel de lucru în sine și o bătaie de cap pentru toți cei care tipografie.

Desigur, la intersecția dintre incompatibilitatea browserului și dorința designerilor de a desena mai frumos fără să se gândească la implementarea creațiilor lor, designerii de layout își amintesc de designeri și de rudele lor cu un cuvânt bun și, strângând din dinți, termină un alt hack pentru Internet. Explorator.

Din fericire, lucrurile sunt mai roz cu umbrele, cel puțin marele și teribilul IE poate face umbre de bloc, dar nu atât de mult cu textul. Ei bine, browserele obișnuite sunt înarmate până în dinți și țin pasul cu vremurile fără a uita de standardizare, umbrele pot apărea de la sine înțeles.

Umbre CSS pentru casete, proprietate casetă-umbră.

Nu mult mai devreme, într-unul dintre articole, am descris diferența dintre tipurile de aspect bloc și tabel, luând în considerare avantajele și dezavantajelediferite tipuri de layout și unde este de preferat să se folosească unul sau altul tip de layout.

Odată cu apariția CSS 3.0, a apărut proprietatea box-shadow (-moz-box-shadow și -webkit-box-shadow pentru chrome și firefox). IE 7-9 nu cunoaște CSS 3.0, dar nu este înfricoșător, pentru că s-ar face totuși altfel, pe scurt, în versiunile IE sub 10, proprietatea box-shadow nu funcționează. Pentru dreptate, observ că în IE este încă posibil să faci o umbră folosind proprietatea filtrului, nu fără trucuri, desigur. Drept urmare, pentru a obține aceeași umbră ca în Opera, trebuie să transpiri.

Oamenii tind să se străduiască pentru simplitate și, ca răspuns la diferitele tipuri de imperfecțiuni ale browserului IE, apar diverse servicii utile care închid un alt gol. Recent, am terminat de construit o pagină html interesantă, care abundă în diverse umbre, mi-a venit în ajutor un serviciu foarte util, care vă permite să faceți blocuri rotunjite și umbre pentru ele și chiar o umplere cu gradient.

Și așa vom transgresa, vom lua următorul cod ca punct de plecare.

s-a dovedit ca acest dreptunghi gri cu text și un cadru

Să adăugăm acum o umbră acestui bloc. Pentru a face acest lucru, accesați serviciul și faceți ceva de genul următor, așa cum se arată în captura de ecran

Debifați „border-radius” și „linear-gradient” - nu avem nevoie de fileuri și gradient, activați opțiunea „Afișați CSS” pentru a afișa codul CSS. Setați estomparea dorită pentru umbră „Dimensiune estompare”, decalajul umbrei de-a lungul axelor (offset X și Y offset).

Din codul CSS pe care l-a emis serviciul, ne interesează liniile care conțin cuvintele umbră și comportament. și anume

adăugați acest cod la stilurile blocului nostru #block, ca rezultat obținem următoarele.

Notă: această demonstrație va funcționa în toate browserele, cu excepția IE, pentru a vedea cum funcționează în IEdescărcați sursele de la sfârșitul articolului.

Cel mai important, aproape că am uitat, trebuie să descărcați arhiva cu scripturi, puteți face totul pe același serviciu folosind butonul de descărcare din meniul din dreapta. Despachetați arhiva și extrageți fișierul PIE.htc în folderul cu fișierul index.html. Dacă doriți să plasați acest fișier într-o locație diferită, atunci trebuie să specificați calea către el [comportament: url(cale/PIE.htc);]. Apropo, acest fișier cântărește 41 kb, adică cât de mult va fi mai grea pagina din IE.

Cum se face umbră încrucișată pentru text, text-shadow

Aici, ca în orice, cel mai durabil browser IE se află în spatele întregii planete, ei bine, nu poate ascunde textul, chiar dacă crack și din nou un serviciu util vine în ajutorul designerilor de layout, de data aceasta nu fără participarea jQuery.

Extras din pagina de serviciu (Pentru Internet Explorer 6, 7 și 8 aplicați textShadow() cu jQuery după ce DOM-ul este încărcat ) - adică teoretic, puteți desena o umbră pentru text chiar și în IE 6, bravo băieți, s-au străduit foarte mult.

Pe site-ul de serviciu din partea de sus, puteți descărca fișierul script jquery.textshadow.js. Următoarea este o descriere a ceea ce trebuie făcut pentru ca IE să afișeze umbra ca toți ceilalți.

Ce trebuie să faceți pentru a obține o umbră între browsere:

Descărcați scriptul jquery.textshadow.js
Includeți scriptul jquery și jquery.textshadow.js în interiorul etichetelor head
plasați codul Jquery care provoacă redarea umbrelor în IE

Ei bine, hai să o facem.

În rândurile 5-6, conectăm jquery de la serverul Google, precum și scriptul jquery.textshadow.js. În 8-10 linii numim redarea umbră pentru IE. Rezultatul este următorul

Videoclip despre cum să faci o umbră pentru text

Cum să faci textul să strălucească între browsere cu CSS și jQuery

Acest lucru se face foarte simplu, folosind familiarul pentru noiproprietatea text-shadow. Este necesar să te joci cu estomparea umbrei, culoarea și offset-ul de-a lungul axelor, în final vei obține strălucirea de care ai nevoie.

aici modificările au afectat liniile 22-23. În linia 22 facem culoarea albă. În linia 23 modificăm parametrii de umbră text-shadow: 0 0 20px red; - offset-urile de-a lungul axelor sunt zero, estomparea este de 20 de pixeli. culoarea este rosie.

Notă: proprietatea text-shadow acceptă mai multe umbre (text-shadow: 0 0 20px red, 1px 1px 2px #000. ;), dar, din păcate, scriptul acceptă o singură umbră.

De asemenea, puteți descărca o arhivă cu exemple din ceea ce am făcut în timpul scrierii articolului.