o identyfikatorze #logo ma wymiary 100x300 pikseli, możesz dodać następującą deklarację: #logo { width: 300px; height: 100px; background-image: url(logo.png); background-size: contain; /* Lub */ background-size: 300px 100px; } @media screen and (-w ebkit-m in-device-pixel-ratio: 2), screen and (m in--m oz-device-pixel-ratio: 2), screen and (-m in-m oz-device-pixel-ratio: 2), screen and (-o -m in -d evice-p ixel-ratio : 2/1), screen and (m in-d evice-pixel-ratio: 2), screen and (m in-resolution: 192dpi), screen and (m in-resolution: 2dppx) { #logo { background-image: url(hidpi/logo.png); } } Dzięki deklaracji backg ro u n d -size: co n ta in ; (lub backgrou n d -size: 300px 100px; — obie te deklaracje działają tak samo) szerokość i w ysokość elementu
będą odpowiadały po żądanym wymiarom grafiki. Stosow anie w łaściw ości b a ck g ro u n d -size m a jednak pew ną w adę — w yśw ietlanie grafiki z ustawioną tą właściwością trwa dwa razy dłużej niż zwykle. Potrzebny jest czas na odko dowanie grafiki i zm ianę jej rozmiaru. Kilka dodatkowych m ilisekund m oże się stać proble mem, jeśli tworzysz animację z wykorzystaniem dużych rysunków lub z innych powodów potrzebujesz często zm ieniać układ i wygląd strony.
276
|
Rozdz ał 9. CSS3 — moduły, modele graf ka
Gradienty z paskami Omówiłam już w iększość zagadnień związanych z grafiką tła z fikcyjnej aplikacji dla syste mu iOS. Jak jednak utw orzyć znane z tego system u tło w paski? Czy potrzebny jest do tego plik GIF? Niekoniecznie. Jak wcześniej wspomniałam , paski można uzyskać za pom ocą gra dientów CSS-a. Tło aplikacji dla systemu iOS to w łaśnie gradient z paskami. Jeśli zadeklarujesz dwa punkty zmiany koloru w tym samym miejscu, nie uzyskasz stopniowego przejścia jednego koloru w inny (gradientu). Zamiast tego powstanie linia. Jest to sztuczka przy datna przy tworzeniu kształtów. Aby utworzyć paski, możesz zastosować następujący kod: background-image: -w ebkit-gradient(linear, O O, 1OO% O, color-stop(O .4, # f f f f f f ) , color-stop(O .4, #OOOOOO), color-stop(O .6, #OOOOOO), color-stop(O .6, # f f f f f f ) ) ; background-image: -w ebkit-linear-g rad ien t(rig ht, # f f f f f f 4O%, #OOOOOO 4O%, #OOOOOO 6O%, # f f f f f f 6O%); background-image: lin ear-g rad ien t(to l e f t , # f f f f f f 4O%, #OOOOOO 4O%, #OOOOOO 6O%, # f f f f f f 6O%); Ten gradient biegnie od praw ej do lew ej. Na początku i na końcu kolor jest biały. Pośrodku (od 40% do 60% szerokości) znajduje się czarny pasek. Przedstaw ia to rysunek 9.11.
Rysunek 9.11. Paski utworzone za pomocą gradientu liniowego z „twardymi" punktami zmiany koloru W gradiencie dla grafiki tła ciała strony używ ane są „tw arde" punkty zm iany koloru. Aby uzyskać pożądany efekt, należy utworzyć punkty, w których jeden kolor się kończy, a zaczyna drugi (bez stopniowego przejścia między nimi). Powstaje w ten sposób powtarzana na stronie grafika tła o szerokości 7 pikseli: 1 2 3 4 5
background-color: #CSCCD4; background-image: -w ebkit-gradient(linear, O O, 1OO% O, color-stop(O .yi42, #CSCCD4), color-stop(O .yi42, #CBD2DB));
Grad enty w C SS- e
j
277
6 7 8 9 10 11 12 13 14 15
background-image: -w e b k it-lin ear-g rad ien t(left, #C5CCD4 0.7142%, #CBD2D8 0.7142%); background-image: lin ear-g rad ien t(to righ t, #C5CCD4 0.7142%, #CBD2D8 0.7142%); background-size: 7px 2px;6 background-repeat: repeat;
Ponieważ punkty zmiany koloru znajdują się w tym samym m iejscu, pierwszy kolor szybko przechodzi w drugi. Powstaje w ten sposób linia. Do pierwszego punktu zm iany używany jest pierwszy kolor. Po ostatnim punkcie zm iany używany jest ostatni kolor. Kod gradientu z w ierszy od 2 do 13 tworzy grafikę tła, która domyślnie zajmuje 100% obszaru powiązanego elementu. Grafika tła dla ciała omawianej aplikacji sieciowej ma być pow tarza na, tak aby powstały kolumny (paski). Aby uzyskać ten efekt, trzeba określić wielkość grafiki i pow tarzać rysunek w poziom ie i pionie (lub przynajmniej w poziomie). Służą do tego wła ściwości backgrou n d -rep eat i backg ro u n d -size. Ponieważ szerokość tła jest zadeklarowana na 7 pikseli, grafika tła obejmuje pięciopikselow y pasek w kolorze #C5CCD4 i dwupikselowy pasek w kolorze #CBD2D8. Ten niewielki rysunek jest pow tarzany w pionie i poziom ie. G radient m ożna też utw orzyć za pom ocą pikseli zam iast procentów: background-image: -w ebkit-gradient(linear, 0 0, 100% 0, color-stop(5px, #C5CCD4), color-stop(5px, #CBD2D8)); background-image: -w e b k it-lin ear-g rad ien t(left, #C5CCD4 5px, #CBD2D8 5px); background-image: lin ear-g rad ien t(to righ t, #C5CCD4 5px, #CBD2D8 5px); Ponadto zamiast stosować właściwości background -size i background-repeat, można utwo rzyć powtarzający się gradient przy użyciu funkcji r e p e a t in g -lin e a r -g r a d ie n t( ).
Powtarzanie gradientów liniowych CSS3 udostępnia w łaściw ości b ack g ro u n d -size i b ack g ro u n d -rep eat, które um ożliw iają tworzenie ciekawych efektów (w tym: tła w paski). Jednak w CSS3 dostępna jest też funkcja r e p e a t in g -lin e a r -g r a d ie n t: background-image: -w eb k it-rep eatin g -lin ear-g rad ien t(left, #C5CCD4 0, #C5CCD4 5px, #CBD2D8 5px, #CBD2D8 7px); 6 Wysokość tła ustawiono na 2 piksele (zamiast na jeden; można tu ustawić także dowolną większą wysokość) z uwagi na błąd w przeglądarce Chrome, która nie wyświetla poprawnie gradientów o wysokości mniejszej niż 2 piksele.
278
I
Rozdz ał 9. CSS3 — moduły, modele graf ka
background-image: repeatin g -linear-g rad ien t(to righ t, #C5CCD4 0, #C5CCD4 5px, #CBD2D8 5px, #CBD2D8 7px); background-size: 7px 7px; background-repeat: repeat; Powtarzanie gradientów wiąże się z pewnymi kruczkami. Szerokość gradientu to wartość ostat niego punktu zm iany koloru (tu w artość ta wynosi 7 pikseli). Trzeba zadeklarow ać w artość 0 oraz ostatnią wartość gradientu. Inaczej niż w zwykłych gradientach liniowych potrzebne warto ści domyślnie nie są ustawiane. Ponadto nie wszystkie przeglądarki mają wbudowany mecha nizm zarządzania wielkością powtarzanych gradientów7. Jeśli stosujesz powtarzane gradienty liniowe, to do czasu rozwiązania wszystkich problemów podawaj właściwość background-size i powtarzaj gradient za pomocą właściwości background-repeat. Tak działają wiersze 14 i 15 z kodu. Powtarzane gradienty liniowe są obsługiwane w podobnych przeglądarkach co zw ykłe gra dienty liniowe bez przedrostka. Obecnie oba rodzaje gradientów są obsługiwane w e w szyst kich popularnych przeglądarkach od system ów BlackBerry 10, iOS 5 oraz w ersji Safari 5.1 i Chrome 10. W niektórych przeglądarkach opartych na silniku W ebKit nadal trzeba stosować przedrostki producentów. Jak w cześniej wspomniałam, pow tarzane gradienty liniow e nie są poprawnie wyświetlane w przeglądarkach Chrome i Chrome for Android. Jednak zwykle po doba mi się efekt, jaki pow staje z pow odu niepoprawnej obsługi takich gradientów w prze glądarce Chrome. Gradienty w grze CubeeDoo Choć przeglądarka Chrome for Android niepoprawnie wyświetla pow tarzane gradienty li niowe, zastosowałam taki gradient jako tło aplikacji CubeeDoo. Podoba m i się efekt dziwacz nego w yśw ietlania takich gradientów w przeglądarce Chrom e i nie przeszkadza m i to, że w różnych przeglądarkach tło wygląda nieco inaczej (pod warunkiem jednak że wszystkie przeglądarki poprawnie obsługują witrynę). W mniejszych urządzeniach plansza gry CubeeDoo zajm uje całe okno robocze. W większych gra jest w yśw ietlana tylko w części ekranu, a tło strony (jak rów nież samej planszy) to po w tarzany gradient liniowy: body { background-color: #eee; background-image: -w ebkit-repeating-linear-gradient(-135deg, transparent 0, transparent 4px, white 4px, white 8px), -w ebkit-repeating-linear-gradient(135deg, transparent 0, transparent 4px, white 4px, white 8px); 7 Na przykład w przeglądarce Chrome występuje niezrozumiały błąd. Wydaje się, że ta przeglądarka przyj muje, iż wielkość tła powinna wynosić 110 pikseli, poza tym obszarem powtarza gradient w błędny sposób, a dodatkowo czasem działa niepoprawnie przy wyświetlaniu powtarzanych gradientów liniowych o szero kości większej niż 100 pikseli.
Grad enty w C S S - e
I
279
background-image: repeating-linear-gradient(-13Sdeg, transparent O, transparent 4px, white 4px, white Bpx), repeating-linear-gradient(13Sdeg, transparent O, transparent 4px, white 4px, white Bpx); } W arto zauważyć, że jako grafika tła używane są tu dwa gradienty, które dają coś, co przy pomina romb. Kilka grafik tła Jak można dodać dwa gradienty? CSSS umożliwia przypisanie kilku grafik tła do jednego węzła modelu DOM. W ystarczy rozdzielić różne grafiki tła (ich typ nie ma tu znaczenia) prze cinkami. W przedstawionym przykładzie w jednej deklaracji background-im age znajdują się dwa pow tarzane gradienty liniowe rozdzielone przecinkiem. Ponadto dw a gradienty są używ ane jako grafika tła planszy, co daje efekt szachow nicy. G radient tła dla planszy jest tak szczegółow y, że nie jest dobrze w idoczny w urządzeniach o niskiej w artości DPI, jed nak tw orzy teksturę w e w szystkich urządzeniach: #board { color: # f ff ; height: 4OOpx; width: 1OO%; flo a t: l e f t ; te x t-a lig n : center; background-color: #eee; background-image: -w ebkit-gradient(linear, O O, 1OO% 1OO%, color-stop(O .S, r g b a ^ S G S S G S S ^ )), color-stop(O .S, r g b a G S S ^ S ^ S ^ . S ) ) ) , -w ebkit-gradient(linear, O 1OO%, 1OO% O, color-stop(O .S, r g b a ^ S G S S G S S ^ )), color-stop(O .S, r g b a G S S ^ S ^ S ^ . S ) ) ) ; background-image: -w ebkit-linear-gradient(-13Sdeg, r g b a G S S ^ S ^ S ^ ) SO%, r g b a G S S ^ S ^ S ^ .S ) SO%), -w ebkit-linear-gradient(13Sdeg, rgba(255,255,255,0) SO%, r g b a G S S ^ S ^ S ^ .S ) SO%); background-image: linear-gradient(-13Sdeg, rgba(255,255,255,0) SO%, rgba(255,255,255,0.5) SO%), linear-gradient(13Sdeg, rgba(255,255,255,0) SO%, rgba(255,255,255,0.5) SO%); background-size: 2px; }
280
i
Rozdz ał 9. CSS3 — moduły, modele graf ka
Zauważ, że także tu dla jednego węzła zadeklarowanych jest kilka grafik tła, przy czym poda na jest tylko jedna w artość właściwości b ackg ro u n d -size. Jeśli dla tej właściwości ustawiona jest tylko jedna wartość, określa ona zarówno wysokość, jak i szerokość. Gdy dla w szystkich grafik tła używana jest jedna wartość określająca wielkość, każda grafika ma te same wymiary. Gdyby grafiki tła m iały różną w ielkość, należałoby zadeklarow ać kilka wielkości rozdzielo nych przecinkami. Kolejność deklaracji b ackg ro u n d -size m usi w tedy odpowiadać kolejności deklaracji background-image. Nie zalecam stosowania skróconej właściwości background, ponieważ pow oduje ona przy wrócenie w artości domyślnych w szystkich ustaw ień tła (nawet jeśli tego nie chcesz). Jeśli sto sujesz zapis skrócony i kilka grafik tła, ustaw właściwość background -color tylko w ostatniej deklaracji background. Atrakcyjne przyciski i „tw arde" punkty zm iany koloru Skoro wiesz już, jak uzyskać „tw arde" punkty zm iany koloru w gradientach, pora wrócić do tworzenia atrakcyjnych przycisków. W cześniej zastosow ałam właściw ość b ackg ro u n d -size do uzyskania jednolitych pasków w gradiencie, jednak rów nie dobrze m ożna w ykorzystać gradient z „tw ardym i" punktami zm iany koloru: background-image: -w ebkit-gradient(linear, 0% 0%, 0% 100%, co lo r-sto p (.5 , rgba(255, 255, 255, 0 ) ), co lo r-sto p (.5 , rgba(255, 255, 255, 0 .1 ) ) , color-stop (1, rgba(255, 255, 255, 0 .4 ) ) ) ; background-image: -w ebkit-linear-gradient(bottom , rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0 .4 ) ) ; background-image: lin ear-g rad ie n t(to top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0 .4 ) ) ; Jak widać, wiele dróg prowadzi do celu lub — w tym przypadku — do utworzenia gradientu. Narzędzia do tw orzenia gradientów Choć um iejętność tw orzenia gradientów liniow ych jest w ażna (to dlatego tak szczegółow o omawiam to zagadnienie), czasem łatwiej jest w ykorzystać narzędzie. W internetow ych ma teriałach do tego rozdziału (http://www.standardista.com/mobile/) znajdziesz odnośniki do zaso bów, narzędzi i bibliotek gradientów, które pom ogą Ci w pracy. M oże zauważyłeś, że w kodzie ustawiony jest kolor tła. Zawsze warto go podawać, ponieważ witryna z pewnością będzie wyświetlana w przeglądarkach bez obsługi gradientów. M ożliwe też, że popełnisz literówkę w kodzie gradientu lub jego powtarzanie się nie powiedzie. Dzięki kolorowi tła m ożesz zapobiec efektowi braku kontrastu między tekstem a tłem, gdy w yświe tlanie grafiki tła lub gradientu się nie uda. Jeśli używasz gradientu dla punktów dla pozycji listy, nie można określić wielkości grafiki w przeglądarkach z silnikiem WebKit. Takie przeglądarki domyślnie ustawiają grafikę z gradientem na wielkość dostosowaną do rozmiaru czcionki pozycji listy.
Grad enty w C S S - e
|
281
Cienie Skoro już dobrze poznałeś gradienty liniowe, właściw ość b ackg ro u n d -size i zaokrąglone na rożniki, pora wrócić do przycisków i nadać im trójwym iarowy wygląd. Omówiłam już więk szość nowych funkcji CSS-a z wyjątkiem cieni i gorzej znanej właściwości te x t-o v e rflo w . Oto kod używany do tworzenia przycisków: 1 .button { 2 background-color: #4A6C9B; 3 background-image: 4 -w ebkit-gradient(linear, 0 100%, 0 0%, 5 from (rgba(255,255,255,0.1)), 6 to (rg b a (2 5 5 ,2 5 5 ,2 5 5 ,0 .4 ))); 7 background-image: 8 -w ebkit-linear-gradient(bottom , 9 rgba(255, 255, 255, 0 .1 ), 10 rgba(255, 255, 255, 0 .4 ) ) ; 11 background-image: 12 lin ear-g rad ient(to top, 13 rgba(255, 255, 255, 0 .1 ), 14 rgba(255, 255, 255, 0 .4 ) ) ; 15 background-size: 100% 50%; 16 background-repeat: no-repeat; 17 color: #FFFFFF; 18 border: 1px solid #2F353E; 19 border-color: #2F353E #375073 #375073; /* G LP D */ 20 border-radius: 4px; 21 text-d ecoration : none; 22 font-fam ily: Helvetica; 23 fo n t-siz e : 12px; 24 font-weight: bold; 25 height: 30px; 26 padding: 0 10px; 27 text-shadow: 0 1px 0 rgba(0, 0, 0, 0 .6 ); 28 overflow: hidden; 29 max-width: 80px; 30 white-space: nowrap; 31 text-overflow : e llip s is ; 32 -webkit-box-shadow: 33 0 1px 0 rgba(255,255,255, 0 .4 ); 34 -webkit-box-shadow: 35 0 1px 0 rgba(255,255,255, 0 .4 ), 36 in set 0 1px 0 rg ba(255,255,255,0.4); 37 box-shadow: 38 0 1px 0 rgba(255,255,255, 0 .4 ), 39 in set 0 1px 0 rg ba(255,255,255,0.4); 40 } To dużo kodu! Dzięki cennym nowym um iejętnościom z zakresu tworzenia gradientu więk szość tego kodu (do wiersza 26) powinna być dla Ciebie zrozum iała. M ożliwe jednak, że nie znasz kilku właściwości, takich jak: text-shadow , box-shadow i te x t-o v e rflo w . Nie obawiaj się! Zaraz je wyjaśnię. Utworzyłam przycisk z kolorami od niebieskiego do ciemnoniebieskiego. Kolor tła prześwituje przez półprzezroczysty biały gradient. Wiersze od 18 do 20 tworzą obramowanie o różnych od cieniach niebieskiego i promieniu równym 4 pikselom. Wiersz 15 zawiera definicję wielkości gra dientu. Górną część przycisku zajmuje gradient, a w dolnej widoczny jest prześwitujący pełny ko lor tła. Dlatego grafika gradientu zajmuje pełną szerokość elementu, ale tylko pół jego wysokości.
282
I
Rozdz ał 9. CSS3 — moduły, modele graf ka
Ponieważ grafika gradientu nie zajmuje 100% powierzchni elementu, domyślnie byłaby powta rzana w pionie. Nie jest to pożądany efekt. Dzięki deklaracji backgrou n d -rep eat: n o -rep ea t z w iersza 16 grafika się nie pow tarza. Gdybym zdefiniow ała grafikę o szerokości 2 pikseli (b a ck g ro u n d -size: 2px 50%; ) konieczne byłoby pow tarzanie grafiki w poziom ie za pomocą instrukcji b ack g ro u n d -rep eat: r e p e a t - x ;. Dalszy fragment (do wiersza 26) określa kolor, krój, wagę i wielkość czcionki. Ponadto usuwane jest podkreślenie odnośników. Choć przykładowy kod w HTML-u nie zawiera odnośników, często ich styl jest ustaw iany w taki sposób, aby przypom inały przyciski. Jednak domyślnie odnośniki są podkreślone. Gdybym użyła odnośnika zamiast elementu < li> , odnośniki byłyby w yświetlane domyślnie jak elementy liniowe, dlatego ich w ysokość nie miałaby znaczenia. Tu jednak przyciski m ają być pływ ającym i elementami systemu nawigacji, dlatego znaczniki z klasą c a n c e l i done są w yśw ietlane jak elementy blokowe. Instrukcja text-shadow z wiersza 27 jest czymś nowym w tej książce, nie jest jednak nowością w specyfikacji CSS. Warto omówić tę instrukcję.
Cienie dla tekstu Cienie dla tekstu pojaw iły się w specyfikacji CSS 2, jednak zostały usunięte z CSS 2.1. Teraz je przywrócono, jednak działają w inny sposób. Firma Apple lubi, gdy tekst w jej produktach się wyróżnia. W w itrynie http://www.apple.com/ wyróżniający się tekst utworzono za pom ocą grafiki w tekście, dzięki czemu firma zapewniła podobny w ygląd w itryny w e w szystkich przeglądarkach. U żyw any jest tu sprite dla tekstu w system ie naw igacji i inna grafika dla w idocznego w tle szarego paska naw igacji. A pple zm usza użytkow ników do pobierania przy pierw szym w czytyw aniu strony ponad 3,5 M B grafiki, ponieważ chce zagwarantować, że w szyscy użytkownicy (nawet korzystający z In ternet Explorera 6, przy czym nie sądzę, że osoby używ ające 10-letnich kom puterów zdecy dują się na zakup M aca) zobaczą to samo. W świecie mobilnym nie trzeba przejm ow ać się niskiej jakości przeglądarkam i stacjonarnymi takimi jak starsze w ersje Internet Explorera bez obsługi właściwości text-sh ad ow . N ie trzeba też używ ać sprite'ów w nawigacji. W ystarczy zastosow ać właściw ość text-sh ad ow zamiast grafiki. Pozwala to ograniczyć liczbę żądań HTTP i ułatw ić internacjonalizację. W łaściwość text-shadow określa cień dodawany do tekstu elementu. W tej właściwości należy podać rozdzielone przecinkami w artości p rzesu n ięcieP o zio m e, p rzesu n ięcieP ion ow e, r o z mycie i k o lo rC ie n ia . W artości przesunięcia są wym agane. Rozm ycie i kolor są opcjonalne. text-shadow:
[, ][, ]; Należy podać dwie wartości przesunięcia: (1) odległość w poziom ie (w prawo od tekstu, jeśli w artość jest dodatnia, lub w lew o, jeżeli w artość jest ujem na); (2) odległość w pionie (w dół względem tekstu, jeśli w artość jest dodatnia, lub w górę, jeżeli w artość jest ujemna). Trzecia wartość określa szerokość rozmycia. Im większe rozmycie, tym większy i bardziej prze zroczysty jest cień. W artości ujem ne nie są dopuszczalne. Jeśli nie podasz tej w artości, roz mycie domyślnie w ynosi zero; cień ma wtedy ostrą krawędź.
C en e
| 283
Przesunięcia są potrzebne, ale m ogą być równe zero. Jeśli oba przesunięcia m ają tę wartość, cień wygląda jak poświata i jest równomiernie widoczny ze wszystkich stron tekstu. Można to wykorzystać razem z właściwością cu rrentC olor (rozdział 8.) do uzyskania ciekawych efektów. Niektóre czcionki (np. Helvetica Neue Light) w urządzeniach o wysokiej wartości DPI są zbyt wąskie, aby były czytelne. Dzięki deklaracji: text-shadow: 0 0 1px currentColor; można popraw ić czytelność tekstu. Powyższy w iersz w CSS-ie tworzy bezpośrednio za tek stem pośw iatę o szerokości 1 piksela i w bieżącym kolorze czcionki. Za pom ocą w łaściwości cu rre n tC o lo r można utw orzyć dla całego tekstu jedną deklarację właściw ość - w artość bez martwienia się o to, że różne elementy będą m iały odmienny kolor tekstu. Jeśli ustaw ionych jest kilka cieni, są one dodawane w kolejności odwrotnej od ich podania. Ostatni cień jest wyświetlany jako pierwszy, a nad nim um ieszczane są wcześniejsze. Cień tekstu może być bardzo, bardzo szeroki. Jednak naw et w tedy nie ma wpływu na model pudełkow y. C ień tekstu m oże w ykraczać poza granice elem entu nadrzędnego, jed n ak nie zw iększa to w ielkości tego elem entu. Dlatego dodanie bardzo szerokiego cienia o ujem nym przesunięciu w pionie m oże prow adzić do przypadkowego zasłonięcia wcześniejszego tek stu. Przykład takiego rozwiązania znajdziesz w internetowych materiałach do tego rozdziału (http://www.standardista.com/mobile/). Istnieje sztuczka, która pomaga utworzyć atrakcyjny cień tekstu. Należy podać wartość rozmycia i utworzyć nieco przezroczystą wersję koloru cienia. Zwykle używa się wartości r g b a ( 0 ,0 ,0 ,0 .4 ) , która daje szary cień. Choć cień wygląda na szary, w rzeczywistości jest to przezroczysty czarny, dzięki czemu kolory i grafika tła prześwitują przez cień. Nie jestem jednak projektantką, a już z pewnością nie jestem projektantką w Apple. Ta firma stosuje jednopikselowe górne cienie w ciemnym odcieniu szarego. Taki cień dodałam w przy kładzie do tytułu strony (elementu ) i przycisków na stronie z językami. Dzięki temu tekst bardziej się wyróżnia. text-shadow: 0