Pat zaļākais dizaineris zina, kā Photoshop izveidot ēnas. Ēnas piešķir dizainam dimensiju, un tagad tās ir ļoti populāras. Tekstu, izvēlnes vienumu un virsrakstu ēnas nav izņēmums. Pietiek atgādināt Apple saskarņu dizainu

Noderēs, ja tehnikas arsenālā ir iemaņas darbā ar teksta ēnām.

Uzdevums

Izveidojiet teksta ēnu, izmantojot CSS, neizmantojot attēlus. Ko mēs ar to sasniegsim?

• elastība - nav nepieciešami attēli, tekstu ir viegli mainīt
• ātrums - mazāk attēlu - mazāks lapas svars, mazāk zvanu uz serveri
• SEO - teksts ir optimizēts labāk nekā attēli, un tas ir uzticamāks nekā teksta aizstāšanas ar attēlu izmantošana

Teksta ēnas parastajām pārlūkprogrammām

Parastās pārlūkprogrammās ietilpst visas mūsdienu pārlūkprogrammas, kas vairāk vai mazāk atbilst W3C ieteikumiem. Šajā gadījumā šīs pārlūkprogrammas saprot CSS3 teksta ēnu rekvizītu, kas tika ieteikts 2003. gadā.

Tātad, šeit ir saraksts ar pārlūkprogrammām, kas atbalsta teksta ēnu īpašumu:

• Safari 3.1 (Mac/Win) - atbalsta, neatbalsta vairākas ēnas
• Safari 4 (Mac/Win) — pilnībā atbalstīts
• Opera 9.5+ (Mac/Win/Lin) - pilnībā atbalsta
• Firefox 3.1/3.5 (Mac/Win/Lin) - pilnībā atbalsta
• Google Chrome 2 (Win) - pilnībā atbalstīts
• Shiira (Mac) - atbalsta, neatbalsta vairākas ēnas
• Konqueror (Lin/Mac/Win) - pilnībā atbalsta
• iCab (Mac) - atbalsta, neatbalsta vairākas ēnas
• Safari iPhone tālrunī — tiek atbalstīts, vairākas ēnas netiek atbalstītas
• Nokia Symbian viedtālruņi (60. sērija) - atbalsta
• Opera Mini 4.1 - atbalsta, neatbalsta ēnu izplūšanu

Šajās pārlūkprogrammās pietiek ar vienu CSS rindiņu, lai aizēnotu tekstu:

H1 (teksta ēna: 0 pikseļi 1 pikseļi 3 pikseļi #000;)

Mēs iegūstam šo izdomāto virsrakstu:

Izmantojot teksta ēnu, varat sasniegt dažādus interesantus efektus.

Izplūdis teksts

H1 (krāsa: #fff; fons: #666; teksta ēna: 0px 0px 3px #fff; )

Dublēts teksts

H1 (teksta ēna: 0 pikseļi 20 pikseļi # 000;)

Vairākas ēnas ļauj sasniegt vēl vairākus efektus:

Padziļināts teksts

H1 (fons: #ccc; krāsa: #ccc; teksta ēna: -1px -1px #666, 1px 1px #FFF; fontu saime: serif;)

Paaugstināts teksts

H1 (fons: #999; krāsa: #999; teksta ēna: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; fontu saime: serif; )

(IE neļaus šeit izbaudīt skaistumu, jo neatbalsta text-shadow). Izmantojot teksta ēnu, varat izdomāt daudz dažādu efektu, vienīgais praktiskais ierobežojums ir jūsu iztēle.

Tagad par skumjo lietu - ko darīt ar ikviena “iemīļoto” IE?

Teksta ēnas IE

Lai gan IE līdz 8. versijai nesaprot teksta ēnu, tai ir daudz savu "zvaniņu un svilpes". Jo īpaši ir dropShadow() filtrs ēnu veidošanai. Lai parādītos ēnas, elementam ir jābūt iestatītam izkārtojumam. Jūs varat instalēt vairākos veidos:

• iestatot elementa īpašības: bloks + augstums () vai platums ())
• dodot elementu : absolūts
• norādot: pa kreisi/pa labi
• tālummaiņas iestatīšana: 1

H1 (filtrs:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); tālummaiņa: 1; )

Likās, ka var kliegt “Urā!!!” un izbaudi dzīvi, bet paskaties, kā šis filtrs darbojas patiesībā:

Tādā veidā teksts parādīsies, ja tam lietosit dropShadow filtru

Tiem, kas nesaprot, šeit ir šī filtra trūkumi:

• ēna izskatās šausmīgi: leņķiska, bez vienmērīgas pārejas fonā ar caurspīdīgumu
• fonta stils ir izkropļots
• ēnu praktiski nav iespējams noregulēt (var kontrolēt tikai ēnas pozīciju) - to var daļēji apiet, dropShadow vietā izmantojot ēnu filtru, taču paliek kritiskie pirmie divi trūkumi
• izkārtojuma obligāta klātbūtne zināmā mērā ierobežo izstrādātāju

Reālos projektos šāds rezultāts nav pieņemams. Kas un kā šādu darbu pārņēma no izstrādātājiem, nav skaidrs.

Kilians Valkhofs ieteica izmantot ēnu emulāciju:

1. nelietojiet filtru tieši tekstam
2. izmantojiet mirdzuma un izplūšanas filtru kombināciju, nevis dropShadow un ēnu

Tas ļaus izvairīties no teksta kropļojumiem un padarīs ēnu elastīgāku.

Testa galveneТестовый заголовок

H1 ( teksta ēna: 3px 3px 3px #cccccc; pozīcija: relatīvā; tālummaiņa: 1; krāsa: #000; ) h1 span ( pozīcija: absolūtā; pa kreisi: -3 pikseļi; augšā: -3 pikseļi; z-indekss: -1; filtrs: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; tālummaiņa: 1; )

Bet pat ar šo pieeju joprojām ir vairāki trūkumi:

• nesemantisks kods ir papildu elements, un pat ar teksta dublēšanu tas vislabāk neietekmēs satura loģisko struktūru un SEO optimizāciju. Šo problēmu var atrisināt, izmantojot javascript, kas lapas ielādes laikā ievietos papildu elementu IE
• neatbilst attēlojumam citās pārlūkprogrammās (kas saprot teksta ēnu) - filtri ļauj atdarināt ēnu ar minimāliem iestatījumiem. Ne vienmēr ir iespējams panākt ēnu līdzību ar citām pārlūkprogrammām
• mazāka elastība - filtri nenodrošinās visas teksta ēnošanas iespējas, piemēram, nebūs iespējams ieviest vairākas ēnas

Lai izveidotu ēnas pārlūkprogrammai IE, varat izmantot javascript (nav pirmā reize, kad javascript ir izglābis dienu).

Teksta ēnas, izmantojot javascript

No pārbaudītajiem skriptiem es izvēlējos jquery spraudni "Drop Shadow". Tās priekšrocības:

• emulē ēnas, ievietojot vairākus konteinerus, t.i. neizmantojot IE filtrus. Tas ļauj padarīt ēnas IE pēc iespējas līdzīgas citām pārlūkprogrammām + nav jāuztraucas par IE izkārtojumu
• rada ēnas ne tikai IE, kas dažkārt var noderēt
• skripts ir viegls - 4Kb (ja noņemat komentārus no koda), un, ja lietosit saspiešanu, tas būs vēl mazāks. Skripta rakstīšanai ir prasības - skripta jquery.dimensions.js klātbūtne, bet es joprojām nesaprotu, kāpēc tas ir vajadzīgs. Ēnas tiek veidotas, dzēstas, definētas pēc id un bez tā.
• vienkārši un skaidri lietojams
• Ar zināmiem panākumiem varat līdzināties vairākām ēnām

Trūkumi:

• jūs nevarat inicializēt skriptu pēc elementa ID
• ja elementam ir dots fons, ēna tiks izveidota nevis tekstam, bet elementam kopumā
• Obligāti jāiekļauj jquery bibliotēka (kas ir lielāka par 50 Kb). Taču jquery popularitāte šo trūkumu praktiski novērš
• Saskaņā ar skripta aprakstu ir nepieciešams arī jquery.dimensions.js savienojums (vēl 2Kb). Bet es nesaprotu, kāpēc šī bibliotēka ir vajadzīga, šķiet, ka bez tās viss darbojas labi

Izmantojot spraudni Drop Shadow

Sintakse:

JQuery(selektors).dropShadow(options); // ēnas izveide uz elementa jQuery(selector).redrawShadow(); // ēnas pārzīmēšana jQuery(selector).removeShadow(); // ēnas noņemšana jQuery(selector).shadowId(); // atgriež elementa ēnas id

Pa kreisi: [vesels skaitlis] (noklusējums = 4) augšā: [vesels skaitlis] (noklusējums = 4) aizmiglojums: [vesels skaitlis] (noklusējums = 2) necaurredzamība: [daļskaitlis] (noklusējums = 0,5) krāsa: [virkne] (noklusējums = " melns") mijmaiņas maiņa: [būla] (noklusējums = nepatiess)

Kreisais un augšējais parametrs ir ēnas sākuma koordinātas attiecībā pret etiķetes (vai objekta) augšējo kreiso stūri. Pozitīvās vērtības pārvieto ēnu pa labi un uz leju, negatīvās vērtības pārvieto ēnu pa kreisi un uz augšu.

CSS teksta ēnas rekvizīts ir atbildīgs par teksta ēnas iestatīšanu. Ļoti līdzīgs box-shadow īpašībai.

CSS teksta ēnu sintakse

teksta ēna : X Y R krāsa ;

• X - ēnas nobīde attiecībā pret tekstu pa X asi (visbiežāk iestatīta pikseļos);
• Y - ēnas nobīde attiecībā pret tekstu pa Y asi (visbiežāk iestatīta pikseļos);
• R - ēnas rādiuss (visbiežāk norādīts px pikseļos);
• krāsa - krāsa (var norādīt jebkurā formātā, skatiet html krāsu nosaukumus)

Teksta ēnu sintakse ļauj norādīt vairākas ēnas, atdalot tās ar komatiem. Piemēram

teksta ēna : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;

Ēnu prioritāte (kura augstāka, kura zemāka) ir atkarīga no konkrētās CSS versijas. CSS3 saraksta pirmā ēna atrodas pašā augšā, pēdējā sarakstā atrodas pašā apakšā. CSS2 ir otrādi.

Piemēri: kā izveidot ēnu tekstam html

Piemērs Nr.1. Vienkārša ēna tekstam html

Tālāk ir sniegts vienkāršākais piemērs ar teksta ēnu. Šeit mēs esam pielietojuši abas nobīdes (X un Y), kā arī izveidojuši izplūšanas rādiusu.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

На странице преобразуется в следующее

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

Двойная тень

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

На странице преобразуется в следующее

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

Пример №5. Вдавленные буквы у текста в html

Небольшой 3D текст

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.margin ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Struktūras teksts

Ar šo metodi izveidotā kontūra ir parādīta attēlā. 1. Kontūra izrādās nedaudz izplūdusi, tāpēc tiem, kas vēlas iegūt skaidru līniju, ir paredzēta otrā metode. Tas sastāv no četru vienas krāsas asu ēnu izmantošanas, tās tiek nobīdītas dažādos leņķos par vienu pikseļu (2. piemērs).

Piemērs 2. Četras ēnas kontūrai

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Struktūras teksts

Šādas kontūras izskats ir parādīts attēlā. 3. Manāms, ka kontūra ir izteiksmīgāka.

Rīsi. 3. Kontūra ar četrām ēnām

Lai pievienotu 3D teksta efektu, kas parādīts attēlā. 4, vienlaikus tiek uzklātas vairākas ēnas, kuras viena pret otru tiek nobīdītas par vienu pikseļu horizontāli un vertikāli.

Rīsi. 4. 3D teksts

Personīgi man šāda veida teksts atgādina retro stila burtus, un atkal tas ir vislabāk piemērots virsrakstiem, nevis tīmekļa lapas pamattekstam.

Ēnu skaits ir atkarīgs no tā, cik ļoti vēlaties tekstu “pavilkt” uz priekšu. Lielāks skaitlis palielina burtu “dziļumu”, mazāks, gluži pretēji, samazina trīsdimensiju. 3. piemērā izmantotas piecas vienas krāsas ēnas.

3. piemērs: Ēna, lai pievienotu trīsdimensiju

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Desmit kameru ledusskapis

Visām ēnām mēs iestatām izplūšanas rādiusu uz nulli un to pašu krāsu. Ēnas atšķiras tikai pēc to nobīdes vērtībām.

Teksta reljefs

Lai radītu teksta reljefa efektu jeb, citiem vārdiem sakot, reljefu, teksta krāsai ir jāsakrīt ar fona krāsu. Viena virs virsmas “izvirzīto” burtu daļa it kā ir izgaismota, bet otra daļa atrodas ēnā (5. att.).

Rīsi. 5. Reljefs teksts

Lai pievienotu līdzīgu efektu, mums ir vajadzīgas divas ēnas - mēs pārvietojam balto ēnu uz augšu pa kreisi par vienu pikseļu un tumši pelēko uz leju pa labi (4. piemērs).

4. piemērs: Reljefs teksts

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Reljefs teksts

Reljefs vislabāk izskatās uz pelēka fona, tāpēc efekts nav piemērots katrai vietnes krāsu shēmai. Starp citu, tekstu ir viegli nospiest, nevis izspiest; vienkārši nomainiet ēnu krāsas.

Teksta ēna: #333 -1px -1px 0, #fff 1px 1px 0;

Mirdzums

Mirdzums ap tekstu ir tāda pati ēna, tikai tā ir spilgta un kontrastējoša. Tādējādi, lai radītu mirdzuma efektu, vienkārši mainiet ēnas krāsu un iestatiet vēlamo izplūšanas rādiusu. Tā kā mirdzumam ap tekstu jābūt vienmērīgam, ēnu nobīdei ir jābūt iestatītai uz nulli. Attēlā 6. attēlā ir parādīts dažādās krāsās spīdēšanas piemērs.

Rīsi. 6. Mirdzošs teksts

Piemērs 5. Mirdzums

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Gaišā puse

Tumšā puse

Aizmiglot

Pati ēna ir izplūdusi, tāpēc, atstājot tikai ēnu un paslēpjot pašu tekstu, mēs iegūsim izplūdušus burtus (7. att.), un izplūduma pakāpi var viegli regulēt, izmantojot parametru text-shadow.

Rīsi. 7. Teksts ar izplūdumu

Lai paslēptu oriģinālo tekstu, vienkārši iestatiet krāsu uz caurspīdīgu (6. piemērs). Ēnu krāsa pēc tam darbojas kā teksta krāsa, un izplūšanas rādiuss nosaka burtu izplūšanas pakāpi.

6. piemērs: aizmiglot tekstu

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Izplūdis teksts

Ēnu un pseidoklases

Ēna nav jāpievieno tieši tekstam; rekvizīts text-shadow lieliski spēlē ar :hover un :first-letter pseidoklasēm. Pateicoties tam, ar tekstu tiek iegūti interesanti efekti, piemēram, rindkopas pirmais burts vai saites mirdzums, novietojot peles kursoru virs tā. 7. piemērs parāda šādas metodes.

7. piemērs: pseidoklases izmantošana

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Nišas projekts bremzē tradicionālo kanālu neatkarīgi no izmaksām. Tirgus struktūra, atmetot detaļas, stabilizē mārketinga un pārdošanas nodaļu, izmantojot iepriekšējo kampaņu pieredzi. Zīmola veidošana, protams, spontāni atgrūž konverģento PR, uzvarot tirgus segmentu. Investīcijas sinhronizē lomu sociālo statusu, palielinot konkurenci. Zīmols dabiski nosaka izvietojuma plānu, izmantojot iepriekšējo kampaņu pieredzi.

Tipogrāfija ir tīmekļa dizaineru iecienītākā rotaļlieta. CSS ir viens ļoti interesants rīks - teksts-ēna(teksta ēna), kas no pirmā acu uzmetiena šķiet pavisam vienkārša, taču ar tās palīdzību var radīt atmiņā paliekošus efektus, ja liek lietā izdomu un izdomu.

Ēnu pamati

Īpašums teksts-ēnaļoti viegli lietojams. To atbalsta visas mūsdienu pārlūkprogrammas un pat neizmantojot prefiksus. Bet IE nav atbalsta (pat IE9). Varat izmantot tādus rīkus kā Modernizr, lai palīdzētu izvilkt CSS3 efektus pat vecākām IE versijām.

Sintakse

Lai izveidotu teksta ēnu, izmantojiet rekvizītu sintaksi teksts-ēna kas ir norādīts zemāk. Ir jādefinē četri parametri: pirmie divi iestata ēnas pozīciju, trešais nosaka izplūšanas līmeni un ceturtais nosaka ēnas krāsu.

Teksta ēna: horizontal_offset vertical_offset blur color;

Tālāk ir sniegts piemērs teksta ēnai, kas ir nobīdīta divus pikseļus uz leju un četrus pikseļus pa labi, izplūdusi par trim pikseļiem un iestatīta uz melnu ar 30% necaurredzamību.

Teksta ēna: 2px 4px 3px rgba(0,0,0,0,3);

Šī īpašuma izmantošanas rezultāts izskatīsies šādi:

Kāpēc tiek izmantots rgba?

Jums nav jāizmanto rgba, lai norādītu ēnas krāsu, definējot īpašumu. Tomēr rgba, definējot ēnu, pievieno vēl vienu dimensiju - caurspīdīguma līmeni.

Šī metode ir daudz vienkāršāka nekā citas krāsas noteikšanas metodes. Jums nav jākoncentrējas uz ēnas krāsas nokrāsas noteikšanu, kas var būt tikai nedaudz tumšāka vai gaišāka par fona krāsu. Izmantojot rgba, varat vienkārši izmantot balto vai melno krāsu un palielināt to necaurredzamību, lai, sajaucot krāsas, sasniegtu vēlamo fona krāsu.

Īpašuma izmantošana teksts-ēna Tekstam var izveidot dažādus efektus, neaprobežojoties ar vienkāršām ēnām. Piemēram, šeit ir kods, lai radītu nomākta teksta ilūziju.

Vispirms teksta krāsa ir jāiestata nedaudz tumšāka par fona krāsu. Un tad jums ir jāizmanto īpašums teksts-ēna ar baltu krāsu un palielinātu caurspīdīgumu.

Fona krāsa ir #222, un teksta krāsa ir iestatīta uz 60% necaurredzamību. Baltā ēna ir novietota nedaudz uz leju un pa labi ar necaurredzamības līmeni 10%.

Pamatteksts (fons: #222; ) #text h1 (krāsa: rgba(0,0,0,0,6); teksta ēna: 2 pikseļi 2 pikseļi 3 pikseļi rgba(255,255,255,0,1); )

Ēnu vispār nav nepieciešams izpludināt. Skaidra ēna var lieliski apvienot vietnes dizainu.

Teksta ēna: 6 pikseļi 6 pikseļi 0 pikseļi rgba(0,0,0,0,2);

Īstā jautrība sākas, kad jūs atmetat ierobežojumu, ka jums ir tikai viena ēna. Izmantojot komatu, lai atdalītu definīcijas, varat izmantot tik daudz ēnu, cik nepieciešams!

Teksts-ēna: shadow1, shadow2, shadow3;

Šeit ir divu ēnu izmantošanas piemērs. Pirmajam ir tāda pati krāsa kā fonam.

Teksta ēna: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0,15);

Pārslēgšanās uz leju lielos attālumos

Kad būsiet iemanījies izmantot vairākas ēnas, rezultāti kļūs arvien dramatiskāki. Tekstam ir ļoti vienkārši izveidot 3D efektu.

Piemērā ir izmantotas četras ēnas, kas ir pārvietotas uz leju dažādos attālumos un izplūdušas.

Teksta ēna: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px, 0,0, rgba );

Pārslēdziet uz leju nelielu attālumu un stipri aizmiglojiet

Šeit ir vēl viens tās pašas idejas iemiesojums. Trīs ēnas ir pārvietotas mazākā attālumā un ir izplūdušas.

Teksta ēna: 0 pikseļi 4 pikseļi 3 pikseļi rgba(0,0,0,0,4), 0 pikseļi 8 pikseļi 13 pikseļi rgba(0,0,0,0,1), 0 pikseļi 18 pikseļi 23 pikseļi rgba(0,0,0,0.1);

Marka Doto 3D teksts

Efekts tiek izmantots vietnē MarkDotto.com. Tas izmanto 12 dažādas ēnas, lai radītu lielisku 3D efektu.

Teksta ēna: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,1). 0 ,0,0,.25), 0 10 pikseļi 10 pikseļi rgba(0,0,0,.2), 0 20 pikseļi 20 pikseļi rgba(0,0,0,.15);

Gordona Hola teksts ar atkāpi

Ievērojiet, ka iepriekš minētajā piemērā es savu tehniku ​​nosaucu par “ātrās un netīrās” augstspiešanas efektu. Tas ir tāpēc, ka ir daudz vairāk iesaistīts veids, kā izveidot nopietni iestrādātu tekstu, kas ir daudz ticamāks.

Gordons izmanto nopietnu CSS voodoo, lai noņemtu ne tikai ārējo, bet arī īstu iekšējo ēnu. Apskatiet viņa emuāra ierakstu, lai iegūtu pilnu skaidrojumu par tehniku.

Fona krāsa: #666666; -webkit-background-clip:text; -moz-background-clip: teksts; fona klips: teksts; krāsa: caurspīdīga; teksta ēna: rgba(255,255,255,0,5) 0 pikseļi 3 pikseļi 3 pikseļi;

Mirdzums

Teksta ēna: 0 pikseļi 0 pikseļi 6 pikseļi rgba(255,255,255,0,7);

Teksta ēna: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Vairāki gaismas avoti

Teksta ēna: 0 pikseļi 15 pikseļi 5 pikseļi rgba(0,0,0,0,1), 10 pikseļi 20 pikseļi 5 pikseļi rgba(0,0,0,0,05), -10 pikseļi 20 pikseļi 5 pikseļi rgba(0,0,0,0,05);

Krāsa: rgba(0,0,0,0,6); teksta ēna: 2 pikseļi 8 pikseļi 6 pikseļi rgba(0,0,0,0,2), 0 pikseļi -5 pikseļi 35 pikseļi rgba(255,255,255,0,3);

Secinājums

Tāpat kā lielāko daļu CSS efektu, arī ēnas ir ļoti viegli ieviest. Taču vienkāršu darbību kombinācija var radīt pārsteidzošus efektus.

Vēl viens veids, kā izrotāt tīmekļa lapu, ir izveidot tekstu ar ēnu CSS. Pareizi izmantojot šo stilu, jūs varat veiksmīgi izcelt virsrakstu, rindkopu vai teksta daļu. Varat pielāgot ēnu krāsu, nobīdi un izplūšanu.

Varat iestatīt teksta ēnu CSS, izmantojot teksta ēnas rekvizītu, ko atbalsta visas pārlūkprogrammas, izņemot Internet Explorer 9. un vecākas versijas. Problēmas ir arī ar Opera Mini - šī pārlūkprogramma tikai daļēji atbalsta īpašumu. Tālāk ir sniegts rakstīšanas stila un īpašuma vērtību piemērs:

H1 (teksta ēna: 3 pikseļi 5 pikseļi 6 pikseļi #6C9;)

Kā redzat, mēs norādījām pat četras vērtības, kas atdalītas ar atstarpi. Iziesim to secībā:

• 3px – pirmā vērtība ir atbildīga par ēnas nobīdi pa X asi (pa labi, pa kreisi). Pozitīva vērtība ēnu pārvieto pa labi, bet negatīva vērtība ēnu pa kreisi.
• 5px – otrā vērtība ir atbildīga par ēnas nobīdi pa Y asi (uz leju, uz augšu). Pozitīva vērtība pārvieto ēnu uz leju, bet negatīva vērtība ēnu uz augšu.
• 6px – trešā vērtība ir atbildīga par ēnas izplūšanas rādiusu. Šis parametrs nav obligāts. Pēc noklusējuma aizmiglojums ir 0 pikseļi, kas padara ēnu skaidru un neizplūdušu.
• #6c9 – ceturtā vērtība ir atbildīga par ēnas krāsu. Šis parametrs nav obligāts. Pēc noklusējuma ēnas krāsa ir iestatīta tādā pašā krāsā kā tekstam, kuram tiek piemērots stils.

Kā ēna izskatās pārlūkprogrammā (ekrānuzņēmums):

Ekrānuzņēmums: teksts ar ēnu, CSS

Vairākas CSS ēnas tekstam

Teksta ēnas rekvizītam ir iespējams izmantot arī vairākas vērtību grupas. Tas nozīmē, ka vienam tekstam varat iestatīt vairākas ēnas. Lai to izdarītu, jums jāraksta vērtību grupas, kas atdalītas ar komatiem.

H1 (teksta ēna: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;)

Šī stila piemērošanas rezultāts ir redzams ekrānuzņēmumā:

Ekrānuzņēmums: vairākas ēnas CSS tekstam

Izmantojot CSS teksta ēnu īpašumu, varat izveidot patiešām skaistas lietas. Varat eksperimentēt: iestatiet lielu skaitu dažādu ēnu, iestatiet krāsu ne tikai heksadecimālā, bet arī RGBA formātā, izmantojot alfa kanālu, lai pielāgotu caurspīdīgumu. Lūk, kas var notikt, ja šim īpašumam pievērsīsit pietiekami daudz uzmanības:

Ekrānuzņēmums: 3D teksta ēna CSS