Även den grönaste designern vet hur man gör skuggor i Photoshop. Skuggor ger en dimension till designen och är nu mycket populära. Skuggor för texter, menyalternativ och rubriker är inget undantag. Det räcker med att komma ihåg designen av gränssnitt från Apple

Det kommer att vara användbart att ha färdigheter i att arbeta med textskuggor i din arsenal av tekniker.

Uppgift

Gör en skugga för text med CSS, utan att använda bilder. Vad kommer vi att uppnå med detta?

• flexibilitet - inga bilder krävs, text är lätt att ändra
• hastighet - färre bilder - mindre sidvikt, färre anrop till servern
• SEO – text är optimerad bättre än bilder, och är mer tillförlitlig än att använda tekniken att ersätta text med en bild

Textskuggor för vanliga webbläsare

Normala webbläsare inkluderar alla moderna webbläsare som håller sig mer eller mindre i takt med W3C:s rekommendationer. I det här fallet förstår dessa webbläsare egenskapen CSS3 text-shadow, som rekommenderades redan 2003.

Så här är en lista över webbläsare som stöder text-shadow-egenskapen:

• Safari 3.1 (Mac/Win) - stöder, stöder inte flera skuggor
• Safari 4 (Mac/Win) - fullt stöd
• Opera 9.5+ (Mac/Win/Lin) - stöder fullt ut
• Firefox 3.1/3.5 (Mac/Win/Lin) - stöder fullt ut
• Google Chrome 2 (Win) - fullt stöd
• Shiira (Mac) - stöder, stöder inte flera skuggor
• Konqueror (Lin/Mac/Win) - stöder fullt ut
• iCab (Mac) - stöder, stöder inte flera skuggor
• Safari på iPhone - stöds, flera skuggor stöds inte
• Nokia Symbian-Smartphones (Series 60) - stöder
• Opera Mini 4.1 - stöder, stöder inte skuggoskärpa

För dessa webbläsare räcker det med en rad CSS för att skugga text:

H1 (text-skugga: 0px 1px 3px #000; )

Vi får den här snygga rubriken:

Du kan uppnå en mängd intressanta effekter med text-skugga.

Suddig text

H1 (färg: #fff; bakgrund: #666; text-skugga: 0px 0px 3px #fff; )

Duplicera text

H1 (text-skugga: 0px 20px #000;)

Flera skuggor låter dig uppnå flera fler effekter:

Infälld text

H1 ( bakgrund: #ccc; färg: #ccc; text-shadow: -1px -1px #666, 1px 1px #FFF; font-family: serif; )

Upphöjd text

H1 ( bakgrund: #999; färg: #999; text-skugga: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; font-family: serif; )

(IE kommer inte att tillåta dig att njuta av skönheten här, eftersom den inte stöder text-shadow). Du kan komma på många olika effekter med text-skugga, den enda praktiska begränsningen är din fantasi.

Nu om det sorgliga - vad ska man göra med allas "favorit" IE?

Textskuggor i IE

Även om IE upp till version 8 inte förstår text-skugga, har den många egna "klockor och visselpipor". I synnerhet finns det ett dropShadow()-filter för att skapa skuggor. För att skuggor ska visas måste elementet ha en layoutuppsättning. Du kan installera på flera sätt:

• genom att ställa in elementegenskaperna: block + height() eller width())
• ger elementet: absolut
• genom att ange: vänster/höger
• inställning av zoom: 1

H1 (filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom: 1;)

Det verkade som att man kunde ropa "Hurra!!!" och njut av livet, men se hur detta filter fungerar i verkligheten:

Så här kommer texten att se ut om du använder dropShadow-filtret på den

För de som inte förstår, här är nackdelarna med detta filter:

• skuggan ser hemsk ut: kantig, ingen mjuk övergång till bakgrunden med genomskinlighet
• teckensnittet är förvrängt
• skuggan är praktiskt taget omöjlig att justera (du kan bara styra skuggans position) - detta kan delvis kringgås genom att använda skuggfiltret istället för dropShadow, men de kritiska första två nackdelarna kvarstår
• den obligatoriska närvaron av en layout begränsar utvecklaren något

Detta resultat är inte acceptabelt i verkliga projekt. Det är oklart vem och hur som tog över sådant arbete från utvecklarna.

Kilian Valkhof föreslog att använda skuggemulering:

1. använd inte filtret direkt på texten
2. använd en kombination av glöd- och oskärpafilter istället för dropShadow och shadow

Detta kommer att undvika textförvrängning och göra skuggan mer flexibel.

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

H1 ( text-skugga: 3px 3px 3px #cccccc; position: relativ; zoom: 1; färg: #000; ) h1 span (position: absolut; vänster: -3px; topp: -3px; z-index: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; zoom: 1; )

Men även med detta tillvägagångssätt finns det fortfarande ett antal nackdelar:

• icke-semantisk kod är ett extra element, och även med duplicering av text kommer det inte att ha den bästa effekten på den logiska strukturen av innehållet och SEO-optimering. Detta problem kan lösas med javascript, som kommer att infoga ett extra element för IE när sidan laddas
• motsvarar inte visningen i andra webbläsare (som förstår text-shadow) - filter låter dig emulera en skugga med minimala inställningar. Det är inte alltid möjligt att uppnå skugglikhet med andra webbläsare
• mindre flexibilitet - filter ger inte alla funktioner för text-skugga, till exempel kommer det inte att vara möjligt att implementera flera skuggor

För att skapa skuggor för IE kan du använda javascript (inte första gången javascript har räddat dagen)

Textskuggor med javascript

Från skripten som jag testade valde jag jquery-plugin "Drop Shadow". Dess fördelar:

• emulerar skuggor genom att infoga flera behållare, dvs. utan att använda filter för IE. Detta gör det möjligt att göra skuggor i IE så lik andra webbläsare som möjligt + du behöver inte oroa dig för layout för IE
• skapar skuggor inte bara för IE, vilket ibland kan vara användbart
• skriptet är lätt - 4Kb (om du tar bort kommentarer från koden), och om du använder komprimering blir det ännu mindre. Det finns krav på att skriva ett skript - närvaron av skriptet jquery.dimensions.js, men jag förstår fortfarande inte varför det behövs. Skuggor skapas, tas bort, definieras av id och utan det.
• enkel och tydlig att använda
• Du kan emulera flera skuggor med viss framgång

Brister:

• du kan inte initiera ett skript med element-id
• om elementet ges en bakgrund skapas skuggan inte för texten, utan för elementet som helhet
• Obligatorisk inkludering av jquery-biblioteket (som är mer än 50Kb). Men populariteten för jquery eliminerar praktiskt taget denna nackdel
• Enligt skriptbeskrivningen krävs också anslutningen av jquery.dimensions.js (ytterligare 2Kb). Men jag förstår inte varför det här biblioteket behövs, allt verkar fungera bra utan det

Använder plugin-programmet Drop Shadow

Syntax:

JQuery(väljare).dropShadow(alternativ); // skapa en skugga på elementet jQuery(selector).redrawShadow(); // rita om skuggan jQuery(selector).removeShadow(); // ta bort skuggan jQuery(selector).shadowId(); // returnerar id:t för elementets skugga

Vänster: [heltal] (standard = 4) topp: [heltal] (standard = 4) oskärpa: [heltal] (standard = 2) opacitet: [bråktal] (standard = 0,5) färg: [sträng] (standard = " svart") swap: [boolean] (default = false)

De vänstra och översta parametrarna är koordinaterna för början av skuggan i förhållande till det övre vänstra hörnet av etiketten (eller objektet). Positiva värden flyttar skuggan åt höger och nedåt, negativa värden flyttar skuggan åt vänster och uppåt.

CSS-egenskapen text-shadow är ansvarig för att ställa in skuggan av texten. Mycket lik egenskapen box-shadow.

CSS-text-skuggsyntax

text-skugga : X Y R färg ;

• X - förskjutning av skuggan i förhållande till texten längs X-axeln (oftast satt i px pixlar);
• Y - förskjutning av skuggan i förhållande till texten längs Y-axeln (oftast satt i px pixlar);
• R - skuggradie (oftast angiven i px pixlar);
• färg - färg (kan anges i valfritt format, se html-färgnamn)

Text-skuggsyntaxen tillåter att flera skuggor specificeras, separerade med kommatecken. Till exempel

text-skugga : X1 Y1 R1 färg1 , X2 Y2 R2 färg2 , ...;

Skuggprioriteten (som är högre, vilket är lägre) beror på den specifika CSS-versionen. I CSS3 placeras den första skuggan i listan längst upp, den sista i listan placeras längst ner. I CSS2 är det tvärtom.

Exempel: hur man gör en skugga för text i html

Exempel nr 1. Enkel skugga för text i html

Nedan är det enklaste exemplet med en textskugga. Här har vi lagt både offset (X och Y) och även gjort en oskärpa radie.

Текст с тенью

Текст с тенью

Пример №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. Контурный текст

Dispositionstext

Konturen gjord med denna metod visas i fig. 1. Konturen visar sig vara något suddig, så för den som vill få en tydlig linje är den andra metoden avsedd. Den består av att använda fyra skarpa skuggor av samma färg, de flyttas till olika vinklar med en pixel (exempel 2).

Exempel 2. Fyra skuggor för konturen

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Dispositionstext

Utseendet på en sådan kontur visas i fig. 3. Det märks att konturen är mer uttrycksfull.

Ris. 3. Kontur med fyra skuggor

För att lägga till 3D-texteffekten som visas i fig. 4 appliceras flera skuggor samtidigt, vilka förskjuts i förhållande till varandra med en pixel horisontellt och vertikalt.

Ris. 4. 3D-text

Personligen påminner den här typen av text mig om bokstäver i retrostil och, återigen, den är bäst lämpad för rubriker, snarare än brödtexten på en webbsida.

Antalet skuggor beror på hur mycket du vill "dra" texten framåt. Ett större antal ökar "djupet" på bokstäverna, ett mindre antal, tvärtom, minskar tredimensionaliteten. Exempel 3 använder fem skuggor av samma färg.

Exempel 3: Skugga för att lägga till tredimensionalitet

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Tio kammare kylskåp

För alla skuggor ställer vi in ​​oskärpa radien till noll och samma färg. Skuggorna skiljer sig endast i sina offsetvärden.

Textprägling

För att skapa effekten av textprägling eller, med andra ord, relief, måste färgen på texten matcha bakgrundsfärgen. Den ena delen av bokstäverna som "skjuter ut" ovanför ytan tycks vara belyst, medan den andra delen ligger i skuggan (fig. 5).

Ris. 5. Präglad text

För att lägga till en liknande effekt behöver vi två skuggor - vi flyttar den vita skuggan upp till vänster med en pixel och den mörkgrå ner till höger (exempel 4).

Exempel 4: Präglad text

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Präglad text

Reliefen ser bäst ut på en grå bakgrund, så effekten är inte lämplig för alla färgscheman på webbplatsen. Förresten, det är lätt att bli pressad snarare än extruderad text; byt bara ut skuggfärgerna.

Text-skugga: #333 -1px -1px 0, #fff 1px 1px 0;

Glöd

Glödet runt texten är samma skugga, bara det är ljust och kontrasterande. För att skapa en glödeffekt, ändra bara skuggans färg och ställ in önskad oskärpa radie. Eftersom ljuset runt texten ska vara enhetligt bör skuggoffset ställas in på noll. I fig. Figur 6 visar ett exempel på glödande i olika färger.

Ris. 6. Glöd text

Exempel 5. Glöd

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ljusa sidan

Mörk sida

Fläck

Skuggan i sig är suddig, så om vi bara lämnar skuggan och gömmer själva texten kommer vi att få suddiga bokstäver (bild 7), och graden av oskärpa kan enkelt justeras med hjälp av parametern text-shadow.

Ris. 7. Text med oskärpa

För att dölja originaltexten ställer du bara in färgen på transparent (exempel 6). Skuggfärgen fungerar sedan som textfärg, och oskärpa radien anger graden av oskärpa för bokstäverna.

Exempel 6: Suddig text

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Suddig text

Skugga och pseudo-klasser

Skuggan behöver inte läggas till direkt i texten, text-shadow-egenskapen spelar bra med pseudoklasserna :hover och :första bokstaven. På grund av detta erhålls intressanta effekter med text, som den konturerade första bokstaven i ett stycke eller ljuset från en länk när du håller muspekaren över den. Exempel 7 visar sådana tekniker.

Exempel 7: Använda Pseudo-klasser

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ett nischprojekt bromsar den traditionella kanalen, oavsett kostnader. Marknadsstrukturen, som förkastar detaljerna, stabiliserar marknads- och försäljningsavdelningen med hjälp av erfarenheterna från tidigare kampanjer. Varumärkesbyggande, naturligtvis, skjuter spontant bort konvergent PR och vinner ett marknadssegment. Investeringar synkroniserar roll social status, ökar konkurrensen. Varumärket bestämmer naturligtvis placeringsplanen, med hjälp av erfarenheterna från tidigare kampanjer.

Typografi är webbdesigners favoritleksak. CSS har ett mycket intressant verktyg - text-skugga(textskugga), som vid första anblicken verkar ganska enkel, men med dess hjälp kan du skapa minnesvärda effekter om du använder uppfinningsrikedom och fantasi.

Grunderna i skuggan

Fast egendom text-skugga mycket lätt att använda. Det stöds av alla moderna webbläsare och även utan användning av prefix. Men det finns inget stöd i IE (även i IE9). Du kan använda verktyg som Modernizr för att hjälpa till att dra ut CSS3-effekter även på äldre versioner av IE.

Syntax

För att skapa en textskugga, använd egenskapssyntaxen text-skugga som ges nedan. Det finns fyra parametrar att definiera: de två första ställer in skuggans position, den tredje ställer in oskärpa och den fjärde bestämmer färgen på skuggan.

Text-skugga: horizontal_offset vertical_offset oskärpa färg;

Nedan är ett exempel på en textskugga som är förskjuten två pixlar ner och fyra pixlar till höger, suddig med tre pixlar och inställd på svart vid 30 % opacitet.

Text-skugga: 2px 4px 3px rgba(0,0,0,0.3);

Resultatet av att använda den här egenskapen kommer att se ut så här:

Varför används rgba?

Du behöver inte använda rgba för att ange skuggfärgen när du definierar en egenskap. Men rgba lägger till ytterligare en dimension när man definierar en skugga - nivån på transparens.

Denna metod är mycket enklare än andra metoder för att bestämma färg. Du behöver inte fokusera på att bestämma nyansen av skuggfärgen, som kanske bara är något mörkare eller ljusare än bakgrundsfärgen. Med rgba kan du helt enkelt använda vitt eller svart och öka deras opacitet för att uppnå önskad bakgrundsfärg när du blandar färger.

Använda egendom text-skugga Du kan skapa olika effekter för text, inte begränsat till enkla skuggor. Till exempel, här är koden för att skapa en illusion av deprimerad text.

Först måste du ställa in textfärgen lite mörkare än bakgrundsfärgen. Och då måste du använda fastigheten text-skugga med vit färg och ökad transparens.

Bakgrundsfärgen är #222 och textfärgen är inställd på 60 % opacitet. Den vita skuggan är placerad något nedåt och till höger med en opacitetsnivå på 10 %.

Brödtext ( bakgrund: #222; ) #text h1 (färg: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

Det finns ingen anledning att sudda ut skuggan alls. En klar skugga kan passa bra med en webbdesign.

Text-skugga: 6px 6px 0px rgba(0,0,0,0.2);

Det riktigt roliga börjar när du kastar bort begränsningen att bara ha en skugga. Genom att använda ett kommatecken för att separera definitioner kan du använda så många skuggor som du behöver!

Text-shadow: shadow1, shadow2, shadow3;

Här är ett exempel på att använda två skuggor. Den första har samma färg som bakgrunden.

Text-skugga: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Långt skift nedåt

När du väl fått kläm på att använda flera skuggor kommer resultaten att bli mer och mer dramatiska. Det är väldigt enkelt att skapa en 3D-effekt för text.

Exemplet använder fyra skuggor, alla nedskiftade på olika avstånd och suddiga.

Text-skugga: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 0,0px 0,0px 30px 0,0px. );

Växla ner ett litet stycke och sudda kraftigt

Här är en annan inkarnation av samma idé. De tre skuggorna förskjuts ett mindre avstånd och är mer suddiga.

Text-skugga: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D-text av Mark Dotto

Effekten används på webbplatsen MarkDotto.com. Den använder 12 olika skuggor för att skapa en fantastisk 3D-effekt.

Text-skugga: 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,. 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Indragen text av Gordon Hall

Lägg märke till att i exemplet ovan kallade jag min teknik för "snabb och smutsig" boktryckseffekt. Det beror på att det finns ett mycket mer involverat sätt att skapa en seriöst infogad text som är mycket mer trovärdig.

Gordon använder något seriöst CSS-voodoo för att få fram inte bara en yttre skugga utan också en äkta inre skugga. Kolla in hans blogginlägg för en fullständig förklaring av tekniken.

Bakgrundsfärg: #666666; -webkit-bakgrundsklipp:text; -moz-bakgrundsklipp: text; bakgrundsklipp: text; färg: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Glöd

Text-skugga: 0px 0px 6px rgba(255,255,255,0.7);

Text-skugga: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Flera ljuskällor

Text-skugga: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Färg: rgba(0,0,0,0,6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Slutsats

Som de flesta CSS-effekter är skuggor väldigt lätta att implementera. Men en kombination av enkla åtgärder kan resultera i fantastiska effekter.

Ett annat sätt att dekorera en webbsida är att göra text med skugga i CSS. Med korrekt användning av den här stilen kan du framgångsrikt markera en rubrik, ett stycke eller en del av texten. Du kan justera skuggfärg, offset och oskärpa.

Du kan ställa in en textskugga i CSS med egenskapen text-shadow, som stöds av alla webbläsare utom Internet Explorer version 9 och tidigare. Det finns också problem med Opera Mini - den här webbläsaren stöder endast delvis egenskapen. Nedan är ett exempel på skrivstil och egenskapsvärden:

H1 (text-skugga: 3px 5px 6px #6C9; )

Som du kan se angav vi så många som fyra värden separerade med ett mellanslag. Låt oss gå igenom det i ordning:

• 3px – det första värdet är ansvarigt för förskjutningen av skuggan längs X-axeln (höger, vänster). Ett positivt värde flyttar skuggan åt höger och ett negativt värde flyttar skuggan åt vänster.
• 5px – det andra värdet är ansvarigt för förskjutningen av skuggan längs Y-axeln (nedåt, uppåt). Ett positivt värde flyttar skuggan nedåt och ett negativt värde flyttar skuggan uppåt.
• 6px – det tredje värdet är ansvarigt för skuggoskärmens radie. Denna parameter är valfri. Som standard är oskärpan 0 pixlar, vilket gör skuggan klar och oskarp.
• #6c9 – det fjärde värdet är ansvarigt för färgen på skuggan. Denna parameter är valfri. Som standard är skuggfärgen inställd på samma färg som texten som stilen tillämpas på.

Hur skuggan ser ut i webbläsaren (skärmdump):

Skärmdump: text med skugga, CSS

Flera CSS-skuggor för text

Det är också möjligt att använda flera grupper av värden för egenskapen text-shadow. Det betyder att du kan ställa in flera skuggor för en text. För att göra detta måste du skriva grupper av värden separerade med kommatecken.

H1 (text-skugga: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Resultatet av att tillämpa denna stil syns på skärmdumpen:

Skärmdump: Flera skuggor för CSS-text

Du kan skapa några riktigt vackra saker med CSS text-shadow-egenskapen. Du kan experimentera: ställ in ett stort antal olika skuggor, ställ in färgen inte bara i hexadecimal utan även i RGBA-format, med hjälp av alfakanalen för att justera transparens. Detta är vad som kan hända om du är tillräckligt uppmärksam på den här egenskapen:

Skärmdump: 3D-textskugga i CSS