Typografia to ulubiona zabawka projektantów stron internetowych. CSS ma jedno bardzo interesujące narzędzie - cień tekstu(cień tekstu), co na pierwszy rzut oka wydaje się dość proste, ale przy jego pomocy można stworzyć zapadające w pamięć efekty, jeśli użyje się pomysłowości i wyobraźni.

Podstawy cieni

Nieruchomość cień tekstu bardzo łatwy w użyciu. Jest obsługiwany przez wszystkie nowoczesne przeglądarki i nawet bez użycia przedrostków. Ale w IE nie ma wsparcia (nawet w IE9). Możesz użyć narzędzi takich jak Modernizr, aby pomóc w wyciągnięciu efektów CSS3 nawet w starszych wersjach IE.

Składnia

Aby utworzyć cień tekstu, użyj składni właściwości cień tekstu co podano poniżej. Do zdefiniowania są cztery parametry: pierwsze dwa określają położenie cienia, trzeci poziom rozmycia, a czwarty określa kolor cienia.

Cień tekstu: przesunięcie poziome przesunięcie pionowe rozmycie koloru;

Poniżej znajduje się przykład cienia tekstowego przesuniętego o dwa piksele w dół i cztery piksele w prawo, rozmytego o trzy piksele i ustawionego na kolor czarny przy kryciu 30%.

Cień tekstu: 2px 4px 3px rgba(0,0,0,0.3);

Wynik użycia tej właściwości będzie wyglądał następująco:

Dlaczego używa się RGB?

Nie musisz używać rgba do określenia koloru cienia podczas definiowania właściwości. Jednak rgba dodaje inny wymiar przy definiowaniu cienia - poziom przezroczystości.

Ta metoda jest znacznie prostsza niż inne metody określania koloru. Nie musisz skupiać się na określeniu odcienia koloru cienia, który może być jedynie nieco ciemniejszy lub jaśniejszy od koloru tła. Dzięki rgba możesz po prostu użyć bieli lub czerni i zwiększyć ich przezroczystość, aby uzyskać pożądany kolor tła podczas mieszania kolorów.

Korzystanie z własności cień tekstu Możesz tworzyć różne efekty dla tekstu, nie ograniczając się do prostych cieni. Na przykład tutaj jest kod tworzący iluzję przygnębionego tekstu.

Najpierw musisz ustawić kolor tekstu nieco ciemniejszy niż kolor tła. A potem musisz skorzystać z nieruchomości cień tekstu o białym kolorze i zwiększonej przezroczystości.

Kolor tła to #222, a kolor tekstu jest ustawiony na 60% krycia. Biały cień jest umieszczony nieco w dół i w prawo, a poziom krycia wynosi 10%.

Treść ( tło: #222; ) #tekst h1 ( kolor: rgba(0,0,0,0.6); cień tekstu: 2px 2px 3px rgba(255,255,255,0.1); )

Nie ma potrzeby rozmywania cienia. Wyraźny cień może dobrze pasować do projektu strony internetowej.

Cień tekstu: 6px 6px 0px rgba(0,0,0,0.2);

Prawdziwa zabawa zaczyna się, gdy pozbędziesz się ograniczenia posiadania tylko jednego cienia. Używając przecinka do oddzielenia definicji, możesz użyć dowolnej liczby cieni!

Cień tekstu: cień1, cień2, cień3;

Oto przykład użycia dwóch cieni. Pierwsza ma ten sam kolor co tło.

Cień tekstowy: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Przesunięcie w dół na dużą odległość

Kiedy już opanujesz używanie wielu cieni, rezultaty będą coraz bardziej dramatyczne. Tworzenie efektu 3D dla tekstu jest bardzo łatwe.

W przykładzie wykorzystano cztery cienie, wszystkie przesunięte w dół w różnych odległościach i rozmyte.

Cień tekstowy: 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 rgba(0,0,0,0.1 );

Przesuń w dół na niewielką odległość i mocno rozmyj

Oto kolejne wcielenie tego samego pomysłu. Trzy cienie są przesunięte na mniejszą odległość i bardziej rozmyte.

Cień tekstowy: 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);

Tekst 3D autorstwa Marka Dotto

Efekt jest stosowany w serwisie MarkDotto.com. Wykorzystuje 12 różnych cieni, aby stworzyć wspaniały efekt 3D.

Cień tekstowy: 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 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);

Tekst z wcięciem autorstwa Gordona Halla

Zauważ, że w powyższym przykładzie nazwałem moją technikę „szybkim i brudnym” efektem typografii. Dzieje się tak, ponieważ istnieje znacznie bardziej złożony sposób na utworzenie poważnie wstawianego tekstu, który jest znacznie bardziej wiarygodny.

Gordon używa poważnego voodoo CSS, aby uzyskać nie tylko cień zewnętrzny, ale także prawdziwy cień wewnętrzny. Pełne wyjaśnienie tej techniki znajdziesz w jego poście na blogu.

Kolor tła: #666666; -klip-tła-webkit:tekst; -moz-background-clip: tekst; klip w tle: tekst; kolor: przezroczysty; cień tekstowy: rgba(255,255,255,0,5) 0px 3px 3px;

Blask

Cień tekstu: 0px 0px 6px rgba(255,255,255,0,7);

Cień tekstowy: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Wiele źródeł światła

Cień tekstowy: 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);

Kolor: rgba(0,0,0,0,6); cień tekstowy: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255.255.255,0.3);

Wniosek

Podobnie jak większość efektów CSS, cienie są bardzo łatwe do wdrożenia. Jednak połączenie prostych działań może dać niesamowite efekty.

W tym samouczku przedstawiono kilka technik CSS umożliwiających tworzenie różnych efektów dla konturów elementów.

Prosty efekt jasnego cienia można uzyskać, używając szarości na pociągnięciu. CSS3 ma możliwość tworzenia prawdziwego cienia za pomocą tej właściwości pudełko-cień, ale prosty sposób będzie działać we wszystkich przeglądarkach:

Cień (wypełnienie: 20px; obramowanie: 1px pełny #f0f0f0; obramowanie-dół: 2px pełne #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-promień: 5px; )

Efekt wgniecionego bloku jest również bardzo łatwy do osiągnięcia. Dodanie zaokrąglonych narożników CSS3 wzmacnia efekt:

Wciśnięty ( kolor: #fff; dopełnienie: 20 pikseli; tło: #111; obramowanie: 1 piks. pełne #000; obramowanie po prawej: 1 piks. ciągłe #353535; obramowanie dolne: 1 piks. ciągłe #353535; -webkit-border-radius: 5 pikseli; -moz-border-radius: 5px; border-promień: 5px; )

Efekt ten jest bardzo podobny do podwójnego pociągnięcia, które jest często używane w przypadku obrazów. Stosowane są ustawienia wcięcia i obrysu, co daje efekt podwójnej krawędzi.Dodatkowa praca z ustawieniami i wykorzystanie właściwości konturu pozwala uzyskać efekt fazowanych krawędzi.

Img.light (kontur: 1px pełny #ddd; górna granica: 1px stała #fff; dopełnienie: 10px; tło: #f0f0f0; ) img.dark (kontur: 1px stały #111; górna granica: 1px stała #555; dopełnienie: 10px; tło: #333; )

Efektu tego można używać w menu lub listach. Jest to proste połączenie pociągnięć górnych i dolnych z różnymi odcieniami koloru tła. Należy pamiętać, że selektory pierwszego i ostatniego dziecka CSS nie są obsługiwane przez starsze przeglądarki. Aby obejść tę nieprzyjemną sytuację, możesz użyć jQuery.

#indented ul(margines: 20px 0; dopełnienie: 0; styl listy: brak; ) #indented ul li (border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (border-top: brak;) #indented ul li:last-child (border-bottom: brak;) #indented ul li a ( padding: 10px; display: block; color: #fff; dekoracja tekstu: brak ;) #indented ul li a:hover (tło: #111;)

Czy miałeś kiedyś nieprzyjemne uczucie, gdy Twoje podpisy nie pasowały kolorystycznie do przycisków, paneli lub po prostu tekst słabo kontrastował z tłem strony? Używając Cienie CSS Problem ten można łatwo rozwiązać, używając właściwości text-shadow w celu poprawy czytelności i kontrastu tekstu.

W podanych przykładach stosujemy cienie tekstu w różnych sytuacjach, co da Ci niezbędną podstawę do samodzielnego dalszego studiowania tego zagadnienia.

1. Konfiguracja podstawowa

Utwórz nowy plik HTML i dodaj do niego następujący kod HTML I CSS:

W sekcji HTML dodaj tag

z klasą tekstową:

Miłośnicy kodów internetowych

Dla tego elementu dodamy cień tekstowy CSS. Ustawiłem początkowe właściwości tego elementu, aby ładnie wyglądał na ekranie:

Teraz ustawmy atrybut text-shadow na tekst. Ale najpierw zastanówmy się, jakie wartości przyjmuje ten atrybut:

Cień tekstowy: 4px 4px 4px #ccc;

1. 4px - przesunięcie X ( poziomy);
2. 3px - przesunięcie osi Y ( pionowy);
3. 2px - wartość rozmycia;
4. #ccc - kolor.

Ustawia się to w następujący sposób:

Cień tekstu: kolor rozmycia z przesunięciem poziomym i przesunięciem w pionie;

de kolor może być reprezentowany przez kod szesnastkowy #ccc lub RGBA (0,0,0,0.3); . W CSS możemy zastosować wewnętrzny cień CSS do naszego tekstu w następujący sposób:

.tekst(
rozmiar czcionki: 5em; /* powiększ tekst */
cień tekstowy: 4px 3px 2px #ccc;
}

Reprezentacja tego cieniowanego tekstu w przeglądarce wyglądałaby następująco:

PRZYKŁADOWA witryna

Następnie na różne sposoby zmienimy kolor tła elementu body. Robimy to, ponieważ niektóre cienie CSS wymagają określonego tła, w przeciwnym razie nie będą zauważalne. Aby tekst wyglądał ładniej, ustawimy go wielkimi literami.

2. Efekt nadruku

Ustaw kolor tekstu na nieco ciemniejszy odcień niż tło. Następnie zastosuj mały biały cień tekstowy ze zmniejszonym kryciem:

Ciało (
tło: #222;
}
.tekst(
rozmiar czcionki: 5em;
kolor: rgba(0,0,0,0,6); /* kolor tekstu */
cień tekstowy: 2px 2px 3px rgba(255,255,255,0,1); /* dodanie cienia */
}

Za pomocą kodu RGBA możesz ustawić przezroczystość koloru. Zauważ, że kolor tekstu ma krycie 60% (0,6), a cienie CSS div mają krycie 10% (0,1).

PRZYKŁADOWA witryna

3. Efekt retro cienia

Cienie w stylu retro nie zawsze muszą być rozmyte. Weźmy na przykład ten cień w stylu retro:

Ciało (
}
.tekst(
rozmiar czcionki: 5em;
kolor biały; /* zmień kolor tekstu na biały */
cień tekstowy: 6px 6px 0px rgba(0,0,0,0.2); /* dodanie cienia retro */
}

PRZYKŁADOWA witryna

4. Efekt podwójnego cienia

Co ciekawe, możesz dodać więcej niż jeden cień czcionki CSS. Można to zrobić w następujący sposób: tekst-cień: cień1, cień2, cień3; Dodajmy dwa cienie, jeden z kolorem tła, a drugi nieco ciemniejszy:

Tekst(
rozmiar czcionki: 5em;
cień tekstowy: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* daje dwa cienie */
}

Nasze tło jest białe, więc nie potrzebujemy do tego innego koloru. W przeglądarce efekt będzie wyglądał następująco:

PRZYKŁADOWA witryna

5. Zdalny efekt cienia

Efekt ten opiera się na funkcji definiowania kilku pięknych cieni CSS. Poniżej możecie zobaczyć efekt z czterema cieniami rzucanymi w dół o różnym stopniu intensywności:

Ciało (
tło: #fff3cd; /* zmień kolor tła */
}
.tekst(
rozmiar czcionki: 5em;
kolor biały;
cień tekstowy: 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 rgba(0,0,0,0.1);
}

PRZYKŁADOWA witryna

6. Efekt 3D autorstwa Marka Dotto

Ciało (
tło: #3495c0; /* zmień kolor tła */
}
.tekst(
rozmiar czcionki: 5em;
kolor biały;
cień tekstowy: 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 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);
}

Zobacz teraz, jak te wewnętrzne cienie tekstu CSS wyglądają w przeglądarce:

PRZYKŁADOWA witryna

7. Realistyczny efekt tekstowy Gordona Halla

Gordon używa zaawansowanej magii CSS, aby uzyskać nie tylko cień zewnętrzny, ale także realistyczny cień wewnętrzny:

Ciało (
tło: #cbcbcb; /* zmień kolor tła */
}
.tekst(
rozmiar czcionki: 5em;
kolor: przezroczysty;
kolor tła: #666666;
-klip-w tle-webkit: tekst;
-moz-background-clip: tekst;
klip w tle: tekst;
cień tekstowy: rgba(255,255,255,0,5) 0px 3px 3px;
}

A to tworzy efekt wyciętego tekstu.

PRZYKŁADOWA witryna

8. Efekt blasku tekstu

ciało(
tło: #992d23; /* zmień kolor tła */
}
.tekst(
rozmiar czcionki: 5em;
kolor biały;
cień tekstowy: 0px 0px 6px rgba(255,255,255,0,7);
}

Ten cień tworzy efekt świecenia tekstu:

PRZYKŁADOWA witryna

9. Podniesiony efekt tekstowy

ciało(
tło: #629552; /* zmień kolor tła */
}
.tekst(
rozmiar czcionki: 5em;
kolor: rgba(0,0,0,0,6);
cień tekstowy: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255.255.255,0.3);
}

PRZYKŁADOWA witryna

10. Efekt długiego cienia

Efekt ten można uzyskać za pomocą

Kolor tła: rgb(147, 201, 67);
tekst-cień: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 9px rgb(131, 179, 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(131, 179, 60), 14px 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 18px 18px rgb(131, 179, 60 ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 23px 23px rgb( 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 27px 27px rgb(131, 179, 60) ;
kolor: #eaeaea;

PRZYKŁADOWA witryna

Wniosek

Jak widać, właściwość text-shadow jest bardzo łatwa w użyciu i można jej używać do tworzenia własnych, kreatywnych cieni CSS.

Opis

Dodaje cień do tekstu, a także ustawia jego parametry: kolor cienia, przesunięcie względem napisu oraz promień rozmycia. Właściwość text-shadow może działać w połączeniu z pseudoelementami :first-letter i :first-line.

Składnia

cień tekstowy: brak | cień [,cień]*
gdzie jest cień:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Wartości

Brak Anuluje dodanie cienia. kolor Kolor cienia w dowolnym dostępnym formacie CSS. Domyślnie kolor cienia odpowiada kolorowi tekstu. Parametr opcjonalny. x-shift Poziome przesunięcie cienia względem tekstu. Dodatnia wartość tego parametru przesuwa cień w prawo, ujemna wartość przesuwa go w lewo. Wymagany parametr. przesunięcie y Pionowe przesunięcie cienia względem tekstu. Dopuszczalne jest także zastosowanie wartości ujemnej, która podnosi cień wyżej niż tekst. Wymagany parametr. promień Ustawia promień rozmycia cienia. Im wyższa wartość, tym cień jest bardziej wygładzony, staje się szerszy i jaśniejszy. Jeśli ta opcja nie jest określona, ​​wartość domyślna jest ustawiona na 0. Należy pamiętać, że algorytm antyaliasingu zazwyczaj różni się w zależności od przeglądarki, więc wygląd cienia może się nieznacznie różnić w zależności od określonych ustawień antyaliasingu.

Można określić kilka parametrów cienia, oddzielając je przecinkiem. CSS3 uwzględnia następującą kolejność: pierwszy cień na liście umieszczany jest na samej górze, ostatni na liście na samym dole. W CSS2 kolejność jest odwrotna: pierwszy cień umieszczany jest na samym dole, a ostatni na samej górze.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Czy cytrusy żyłyby w zaroślach południa? Tak, ale fałszywa kopia!

Wynik przykładu pokazano na ryc. 1.

Ryż. 1. Widok cieni w przeglądarce Safari

Przeglądarki

Opera obsługuje maksymalnie 6–9 opcji cieni. Zwiększenie tej wartości, a także zwiększenie promienia rozmycia powyżej 100px, wpływa na wydajność przeglądarki. Wersje Opery 9.5–10 korzystają z wyświetlania wielu cieni podobnego do CSS2.

Safari przed wersją 4.0 obsługuje tylko jedną opcję cienia, pozostałe są ignorowane. Od wersji 4.0 wiele cieni już działa.

Internet Explorer obsługuje właściwość text-shadow tylko od wersji 10.0. Zamiast tego używana jest właściwość filter: Shadow(parameters) . Na przykład poniższa konstrukcja określa kolor cienia (#666666), jego kierunek (45° od pionu) i wielkość przesunięcia (4 piksele).

filtr: Cień(Kolor=#666666, Kierunek=45, Siła=4);

Nawet najbardziej ekologiczny projektant wie, jak tworzyć cienie w Photoshopie. Cienie dodają wymiaru projektowi i są teraz bardzo popularne. Cienie tekstów, pozycji menu i nagłówków nie są wyjątkiem. Wystarczy przypomnieć sobie projektowanie interfejsów od Apple

Przydatne będzie posiadanie umiejętności pracy z cieniami tekstu w swoim arsenale technik.

Zadanie

Utwórz cień dla tekstu za pomocą CSS, bez użycia obrazów. Co dzięki temu osiągniemy?

• elastyczność - nie są wymagane żadne obrazy, tekst można łatwo zmienić
• prędkość - mniej obrazów - mniejsza waga strony, mniej wywołań do serwera
• SEO - tekst jest lepiej zoptymalizowany niż obrazki i jest bardziej niezawodny niż zastosowanie techniki zastępowania tekstu obrazem

Cienie tekstowe dla zwykłych przeglądarek

Do normalnych przeglądarek zaliczają się wszystkie nowoczesne przeglądarki, które mniej więcej odpowiadają rekomendacjom W3C. W tym przypadku przeglądarki te obsługują właściwość Text-Shadow CSS3, która była zalecana w 2003 roku.

Oto lista przeglądarek obsługujących właściwość Text-Shadow:

• Safari 3.1 (Mac/Win) - obsługuje, nie obsługuje wielu cieni
• Safari 4 (Mac/Win) – w pełni obsługiwane
• Opera 9.5+ (Mac/Win/Lin) - w pełni obsługuje
• Firefox 3.1/3.5 (Mac/Win/Lin) - w pełni obsługuje
• Google Chrome 2 (Win) - w pełni obsługiwane
• Shiira (Mac) - obsługuje, nie obsługuje wielu cieni
• Konqueror (Lin/Mac/Win) - w pełni obsługuje
• iCab (Mac) - obsługuje, nie obsługuje wielu cieni
• Safari na iPhonie — obsługiwane, wiele cieni nie jest obsługiwanych
• Smartfony Nokia z systemem Symbian (seria 60) - obsługuje
• Opera Mini 4.1 - obsługuje, nie obsługuje rozmycia cieni

W przypadku tych przeglądarek wystarczy jedna linia CSS, aby zacienić tekst:

H1 (cień tekstowy: 0px 1px 3px #000; )

Dostajemy taki fantazyjny nagłówek:

Za pomocą cienia tekstowego można uzyskać wiele ciekawych efektów.

Zamazany tekst

H1 ( kolor: #fff; tło: #666; cień tekstowy: 0px 0px 3px #fff; )

Zduplikowany tekst

H1 (cień tekstu: 0px 20px #000; )

Wiele cieni pozwala uzyskać jeszcze kilka efektów:

Wgłębiony tekst

H1 ( tło: #ccc; kolor: #ccc; cień tekstowy: -1px -1px #666, 1px 1px #FFF; rodzina czcionek: serif; )

Podniesiony tekst

H1 ( tło: #999; kolor: #999; cień tekstu: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; rodzina czcionek: serif; )

(IE nie pozwoli ci cieszyć się tutaj pięknem, ponieważ nie obsługuje cienia tekstowego). Za pomocą cienia tekstowego możesz uzyskać wiele różnych efektów, jedynym praktycznym ograniczeniem jest Twoja wyobraźnia.

A teraz smutna rzecz – co zrobić z „ulubionym” IE wszystkich użytkowników?

Cienie tekstu w IE

Chociaż IE aż do wersji 8 nie rozumie cienia tekstowego, ma mnóstwo własnych „dziwaków i ciekawostek”. W szczególności istnieje filtr dropShadow() do tworzenia cieni. Aby pojawiły się cienie, element musi mieć ustawiony układ. Możesz zainstalować na kilka sposobów:

• ustawiając właściwości elementu: blok + wysokość() lub szerokość())
• podając element: absolutny
• określając: lewy/prawy
• ustawienie powiększenia: 1

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

Wydawało się, że można krzyknąć „Hurra!!!” i ciesz się życiem, ale spójrz jak ten filtr sprawdza się w rzeczywistości:

Tak będzie wyglądać tekst, jeśli zastosujesz do niego filtr dropShadow

Dla tych, którzy nie rozumieją, oto wady tego filtra:

• cień wygląda okropnie: kanciasty, bez płynnego przejścia w tło z przezroczystością
• styl czcionki jest zniekształcony
• regulacja cienia jest praktycznie niemożliwa (można jedynie kontrolować położenie cienia) - można to częściowo obejść, stosując filtr cienia zamiast dropShadow, ale pierwsze dwie krytyczne wady pozostają
• obowiązkowa obecność układu nieco ogranicza dewelopera

Wynik ten jest nie do przyjęcia w rzeczywistych projektach. Nie jest jasne, kto i w jaki sposób przejął takie prace od deweloperów.

Kilian Valkhof zasugerował użycie emulacji cienia:

1. nie stosuj filtra bezpośrednio do tekstu
2. użyj kombinacji filtrów blasku i rozmycia zamiast dropShadow i cienia

Pozwoli to uniknąć zniekształceń tekstu i sprawi, że cień będzie bardziej elastyczny.

Nagłówek testowyТестовый заголовок

H1 ( cień tekstowy: 3px 3px 3px #cccccc; pozycja: względna; zoom: 1; kolor: #000; ) h1 span ( pozycja: bezwzględna; lewa: -3px; góra: -3px; z-index: -1; filtr: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, Enabled="true" ; zoom: 1; )

Ale nawet przy takim podejściu nadal istnieje wiele wad:

• kod niesemantyczny jest elementem dodatkowym i nawet przy powielaniu tekstu nie będzie miał najlepszego wpływu na logiczną strukturę treści i optymalizację SEO. Ten problem można rozwiązać za pomocą JavaScript, który wstawi dodatkowy element dla IE podczas ładowania strony
• nie odpowiada wyświetlaniu w innych przeglądarkach (które rozumieją cień tekstowy) - filtry pozwalają na emulację cienia przy minimalnych ustawieniach. Nie zawsze możliwe jest osiągnięcie podobieństwa cieni z innymi przeglądarkami
• mniejsza elastyczność - filtry nie zapewnią wszystkich możliwości cienia tekstowego, np. nie będzie możliwości zaimplementowania wielu cieni

Aby utworzyć cienie dla IE, możesz użyć javascript (nie po raz pierwszy javascript uratował dzień)

Cienie tekstowe przy użyciu JavaScript

Z testowanych przeze mnie skryptów wybrałem wtyczkę jquery „Drop Shadow”. Jego zalety:

• emuluje cienie, wstawiając wiele pojemników, tj. bez użycia filtrów dla IE. Dzięki temu możliwe jest uczynienie cieni w IE możliwie najbardziej podobnymi do innych przeglądarek + nie trzeba martwić się o układ dla IE
• tworzy cienie nie tylko dla IE, co czasami może się przydać
• skrypt jest lekki - 4Kb (jeśli usuniesz komentarze z kodu), a jeśli zastosujesz kompresję, będzie jeszcze mniej. Istnieją wymagania przy pisaniu skryptu - obecność skryptu jquery.dimensions.js, ale nadal nie rozumiem, dlaczego jest on potrzebny. Cienie są tworzone, usuwane, definiowane przez identyfikator i bez niego.
• prosty i przejrzysty w użyciu
• Z pewnym sukcesem możesz emulować wiele cieni

Wady:

• nie można zainicjować skryptu według identyfikatora elementu
• jeśli element otrzyma tło, cień zostanie utworzony nie dla tekstu, ale dla elementu jako całości
• Obowiązkowe włączenie biblioteki jquery (która ma ponad 50 KB). Ale popularność jquery praktycznie eliminuje tę wadę
• Zgodnie z opisem skryptu wymagane jest również połączenie jquery.dimensions.js (kolejne 2Kb). Ale nie rozumiem, po co ta biblioteka jest potrzebna, wszystko wydaje się działać dobrze bez niej

Korzystanie z wtyczki Drop Shadow

Składnia:

JQuery(selektor).dropShadow(opcje); // utworzenie cienia na elemencie jQuery(selector).redrawShadow(); // przerysowanie cienia jQuery(selector).removeShadow(); // usunięcie cienia jQuery(selector).shadowId(); // zwraca identyfikator cienia elementu

Po lewej: [liczba całkowita] (domyślnie = 4) u góry: [liczba całkowita] (domyślnie = 4) rozmycie: [liczba całkowita] (domyślnie = 2) krycie: [liczba ułamkowa] (domyślnie = 0,5) kolor: [ciąg] (domyślnie = " czarny”) zamiana: [boolean] (domyślnie = fałsz)

Parametry lewy i górny to współrzędne początku cienia względem lewego górnego rogu etykiety (lub obiektu). Wartości dodatnie przesuwają cień w prawo i w dół, wartości ujemne przesuwają cień w lewo i w górę.