O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Cień dla elementu, czyli o tle po raz kolejny (część 4)

Kolejna nowość i ciekawostka z zasobów specyfikacji CSS3, moduł tła i ramek. Tym razem będzie to cień. Nie planowałam tak dokładnie i po kolei opisywać tego modułu ale akurat tak się złożyło więc nie ma co się sprzeciwiać skoro wychodzi naturalnie.

box-shadow

Domyślnie mówiąc cień chodzi nam o cień zewnętrzny i tak też ta cecha jest interpretowana można jednak dodawać także cień wewnętrzny, który odpowiednio spreparowany może dawać wrażenie, że element jest zagłębiony. Bardzo rozmyty cień wewnętrzny da natomiast wrażenie gradientu na krańcach elementu. Cień to tylko możliwość i w zależności od twojej wyobraźni możesz go wykorzystać do wielu różnych celów. Dzisiejsza notka powie ci, które wartości odpowiedzialne są za jakie zmiany tej cechy.

W dalszej części notki opisuję także prefiksy czyli przeglądarkowy myk, który pozwala wykorzystać cechę nawet jeżeli przeglądarka jest stara. Na koniec dodaję kilka przykładów z życia wziętych, nic radykalnego bo zazwyczaj nie chcę opierać całego wyglądu na cesze, która jest stosunkowo nowa a przez to nie do końca dostępna dla wszystkich oglądających szablon.

Wyjątkiem jest niejako szablon, który zainspirował mnie do napisania tej lekcji CSS: szablon 19 Light, beżowy. Elementem widocznym na ilustracji powyżej jest wąska szpalta o jasnym tle i odrobinę ciemniejszej dziesięciopikselowej ramce. Cały opis głównego kontenera z treścią poboczną wygląda mnie więcej tak:

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 width: 200px;
 margin: 200px 0 0 -10px;
 padding:5px 25px;
 background:#FEFFE0;
 border:#fff1e2 10px solid;
 border-left:none;
 border-top-right-radius:25px;
 border-bottom-right-radius:25px;
 box-shadow:#8c734d -10px 0 20px -5px inset;
 text-align:left;
 color:#2f251c;
}

Różne elementy odpowiedzialne są za różne rzeczy, cień podkreśliłam. Wizualnie istotne są jeszcze kolor tła, istnienie bardzo grubej zaokrąglonej w dwóch rogach ramki. Margines ujemny w jednym miejscu użyłam do zasłonienia ramki poprzedniego elementu czyli szerokiej szpalty.

CSS: moduł tła i ramek poziom 3

Jeżeli korzystasz ze starszej wersji przeglądarki i nie możesz zobaczyć, żadnego z przedstawionych tu przykładów to zapraszam do podglądnięcia kilku zrzutów ekranowych pokazujących fragmenty tej notki zawierające przykłady.

Cień elementu box-shadow

Właściwość odpowiadająca zarówno za cień zewnętrzny (domyślnie) jak i wewnętrzny (po wprowadzeniu słowa kluczowego inset. Aby uzyskać jakikolwiek efekt, należy zacząć od zmiany któregoś z parametrów związanych z odległościami. Od tego momentu cień zacznie istnieć a następne parametry można już zmieniać wariantywnie.

przesunięcie

Należy określić przesunięcie w poziomie i pionie. Jeżeli nie wpiszemy innych wartości to reszta przyjmie wartość domyślną czyli dla rozmycia i przesunięcia zero a dla koloru kolor wierzchni (color), czyli de facto kolor tekstu. Cień pozbawiony rozmycia czy rozszerzenia ma dokładnie tą samą wielkość co element, któremu jest przypisany. Przesunięcie jest jedynym niezbędnym elementem cienia, koniecznie należy je wpisać nawet jeżeli przyjmują wartość zerową.

stylowy faviconimg {
 box-shadow:10px 5px;
}

Jak zwykle pierwsza wartość określa przesunięcie w pionie a druga w poziomie.

stylowy faviconimg {
 box-shadow:-1em 0 #333;
}

Wartości dodatnie przesuwają odpowiednio w prawo i w dół a ujemne w lewo i w górę. Można używać różnych jednostek za wyjątkiem procentów.

rozmycie

W zasadzie ma działać tak jak rozmycie Gaussa w programach graficznych. Wpisujemy jedną wartość a cień rozmywa się mniej więcej w połowie w części gdzie dotychczas był nieprzezroczysty kolor cienia a w połowie po tle gdzie do tej pory cienia nie było. Można tu wpisywać tylko wartości dodatnie.

stylowy faviconimg {
box-shadow:0 0 5px;
}

Rozmycie sprawia, że cień wtapia się w tło. Nawet przy zerowym przesunięciu dodając rozmycie cienia uzyskamy widoczny efekt.

stylowy faviconimg {
 box-shadow:0 0 2em #333;
}

Im większe rozmycie tym więcej cienia jest widoczne ale gradient jest bardziej rozciągnięty, jakby okrągły.

stylowy faviconimg {
 box-shadow:-32px 0 64px #333;
}

Wielkość cienia zależna jest więc także od rozmycia, w najbardziej ekstremalnych formach można go wykorzystywać do zupełnie nieoczywistych celów granicą jest wyobraźnia, no i póki co prostokątny kształt elementu (można oczywiście zaokrąglić narożniki używając border-radius).

rozszerzenie

Rozszerzenie powiększa cień. Normalnie jest on tej samej wielkości co element przy czym rozmycie powiększa cień. Można jednak rozszerzyć cień niezależnie od jego rozmycia co pozwala zwiększyć jego intensywność albo zmniejszyć jeżeli użyjemy ujemnego rozszerzenia.

stylowy faviconimg {
box-shadow:0 0 0 5px;
}

Rozszerzenie zwiększa cień równomiernie. Bez rozmycia, nieprzezroczysty rozszerzony kolor cienia wygląda podobnie jak gruba ramka.

stylowy faviconimg {
box-shadow:0 0 0.5em 0.5em #333;
}

Wszystkie cechy cienia można swobodnie mieszać. Rozszerzenie wydaje się najbardziej przydatne gdy chce się zwiększyć pole cienia gdzie jest on najbardziej intensywny.

stylowy faviconimg {
box-shadow:-32px 0 64px -16px #333;
}

Można wpisywać wartości ujemne, które będą zmniejszały cień. Przy rozmyciu oznacza to, że widoczne będą jedynie jaśniejsze części cienia i będzie on okrąglejszy.

kolor

Domyślnie kolorem cienia jest kolor wierzchni czyli de facto ten sam kolor co kolor tekstu. Tekst najczęściej jest czarny albo ciemnoszary więc i cień taki jest. Można to jednak zmienić wystarczy wpisać numer/nazwę koloru.

stylowy faviconimg {
box-shadow:10px 5px crimson;
}

Część kolorów ma nazwę. HTML 4.01 definiuje zaledwie szesnaście ale przeglądarki od wielu lat posługują się znacznie rozszerzoną liczbą nazw kolorów.

stylowy faviconimg {
 box-shadow:0 0 5px #dc143c;
}

Najpopularniejszym sposobem określania koloru jest heksadecymalny zapis kanałów czerwonego, zielonego i niebieskiego. Cyfr (znaków) w systemie heksadecymalnym jest szesnaście (stąd nazwa: system szesnastkowy, w skrócie HEX), jest to dziesięć cyfr i sześć pierwszych liter alfabetu ustawianych w trzech grupach określających dwuznakowo poziom dla każdego kanału. Klasyczny zapis dziesiętny systemu rgb też jest dopuszczalny: #dc143c = rgb(220,20,60).

stylowy faviconimg {
 box-shadow:0 0 0 5px hsla(348,91%,68%, 0.5);
}

CSS3 wprowadza nowy zapis koloru:rgba i hsla. Może to być też samo hsl czyli kolor zdefiniowany jest poprzez określenie numeru barwy a następnie procentowego określenia jasności i nasycenia - bardzo wygodne dla projektujących. Rewolucyjne jest jednak to a na końcu, które oznacza kanał alfa czyli transparentność. Umożliwia to stworzenie bardziej subtelnych i elastycznych rozwiązań.

stylowy faviconimg {
box-shadow:hsl(348,91%,68%) 10px 5px 5px 5px;
}

Kolor można wstawić przed parametrami podanymi absolutnie w pikselach, można też zaraz za nimi. Niedopuszczalne natomiast jest rozdzielanie parametrów przesunięcia, rozmycia i rozszerzenia.

Mówiąc szczerze o ile nie jest to coś co później powodować może kłopot to polecam wpisywać kolor cienia. Pisząc tą notkę zauważyłam, że jeżeli nie wpiszę nazwy koloru to Safari (5.1.2) i Chrome (17.0.963.56) nie wyświetli cienia wcale. Safari nie jest bardzo popularną w Polsce przeglądarką ale Chrome już chyba jednak tak. Rozważyłabym więc darowanie sobie koloru w przypadku stylów lokalnych (trudno je potem zmieniać) ale w szablonie o ile nie jest to problem to polecam.

cień wewnętrzny

Te same parametry dotyczą cienia wewnętrznego. Wystarczy na koniec dodać słowo kluczowe inset aby cień znajdował się wewnątrz. Parametry będą działały analogicznie, czyli tak samo ale widoczna będzie inna część cienia.

stylowy faviconimg {
box-shadow:32px 32px black inset;
}

Wszystkie parametry można dodawać w dokładnie ten sam sposób ale przez słowo inset działają zupełnie inaczej.

stylowy faviconimg {
 box-shadow:0 0 32px #000000 inset;
}

Ciekawą sprawą będzie wewnętrzny, rozmyty cień. Pozwala on uzyskać efekt gradientu gdy nie jest od dostępny innym sposobem, trzeba tylko odpowiednio określić poszczególne parametry. Właśnie jako delikatnego gradientu przy krawędziach użyłam wewnętrznego brązowego cienia w szablonie 19 Light beżowym.

stylowy faviconimg {
 box-shadow:0 0 0 16px hsl(0,100%,0%) inset;
}

Cień wewnętrzny dotyczy elementu. Jeżeli przypiszesz go tak jak ja do ilustracji to będzie widoczny tylko w takim zakresie w jakim widoczne jest tło ilustracji czyli całkiem dużo gdy ilustracja ma fragmenty transparentne ale wcale gdy jest jotpegiem. Cień wewnętrzny nie dotyczy tego co jest na zdjęciu.

stylowy faviconimg {
box-shadow:hsl(0,100%,0%) 0 5px 10px -5px inset;
}

Stosując odpowiednio subtelne rozwiązania można uzyskać całkiem naturalne efekty. Cień przede wszystkim dodaje uczucie trójwymiarowości. Zagłębienie elementu można uzyskać także na inne sposoby ale w zależności od sposobu efekt będzie inny. Gdybym zwiększyła jeszcze rozmycie zamiast efektu zagłębienia uzyskałabym efekt wypukłego elementu o zaokrąglonych krawędziach.

Słowo kluczowe podajemy na początku albo na końcu zapisu. Nie wstawiam go natomiast pomiędzy parametry przesunięcia, rozmycia i rozszerzenia ani także między grupę wspomnianych parametrów i kolor.

nazwa właściwości box-shadow
znaczenie cień elementu
wartość wartości absolutne, kolor i słowo kluczowe
wartość domyślna none
można stosować do wszystkich elementów
dziedziczenie nie

Cień wielokrotny

Istnieje możliwość dodania kilku różnych cieni do jednego elementu. Nie wiem czy w tej dziedzinie istnieje jakieś ograniczenie ale daje to bardzo wiele bardzo różnych możliwości.

stylowy faviconimg {
 box-shadow: 10px 20px 10px crimson, 20px -10px 10px teal, -10px -20px 10px olive, -20px 10px 10px indigo;
}

W przypadku użycia wielu cieni kluczową sprawą jest kolejność. Zazwyczaj w kodzie obowiązuje zasada świeżości czyli im później dana cecha jest wstawiona tym jej znaczenie liczy się bardziej w przypadku konfliktu gdy przeglądarka musi podjąć decyzje mając do dyspozycji dwa sprzeczne polecenia. Tak jest w przypadku kolejności kodu. Jeżeli zaś chodzi o cienie to jest niejako odwrotnie czyli działają według zasady pierwszeństwa. Wyraźniej widoczne, czyli jakby na wierzchu są cienie wpisane jako pierwsze.

Czyli ten sam cień co powyżej wpisany w odwrotnej kolejności wygląda bardzo podobnie a jednak inaczej. Cienie są w tym samym miejscu ale ułożone w innej kolejności i na wierzchu jest kolor indygo a nie karmazynowy.

stylowy faviconimg {
 box-shadow: -20px 10px 10px indigo, -10px -20px 10px olive, 20px -10px 10px teal, 10px 20px 10px crimson;
}

Oczywiście dotyczy to zarówno cienia zewnętrznego jak i wewnętrznego.

stylowy faviconimg {
 box-shadow: 10px 20px 10px -5px crimson inset, 20px -10px 10px -5px teal inset, -10px -20px 10px -5px olive inset, -20px 10px 10px -5px indigo inset;
}

Prefiksy

Właściwość box-shadow jest częścią CSS3 i w starszych przeglądarkach może być niewidoczna. Sposobem na starsze wersje przeglądarek, takim magicznym mykiem są właśnie prefiksy. Są to przedsłowa, które programiści i projektanci wykorzystywali w celu niejako testowego użycia tej właściwości. Cecha cienia nie jest jeszcze rekomendowana a mimo to wszystkie aktualne przeglądarki wyświetlają ją. Stało się tak dlatego, że od wielu wersji była ona wypróbowywana, nawet zanim konsorcjum W3C definitywnie ustaliło jak ma wyglądać, działać i być opisana ta cecha.

Dodając kody z prefiksami należy pamiętać aby dodać je przed właściwym kodem zgodnym z przyszłą specyfikacją. Pozwoli to, gdy właściwość będzie już dobrze zaimplementowana, zastąpić definicję kodu z prefiksem tą właściwą. Informacje dotyczące dostępności podaję za MDN.

Ostrożnie z używaniem cechy cienia z prefiksem, w niektórych starszych silnikach przeglądarek cień stawał się częścią szerokości i gdy element zajmował ją całą po dodaniu cienia pojawiał się suwak.

Do moich prezentacji dodałam też przerywaną grubą ramkę, czasami ciekawie jest zobaczyć jak poszczególne cechy łączą się ze sobą.

-moz-box-shadow silnik Gecko, przeglądarka Mozilla Firefox

Bez prefiksu cień dostępny jest już od Firefox 4 z prefiksem od FF 3.5 Od początku dostępny był mniej więcej w kompletnej wersji: przesunięcie, rozmycie, rozszerzenie, kolor, cień wewnętrzny, wiele cieni...

p {
border:5px dashed crimson;
-moz-box-shadow:-10px 5px 10px, 10px 0 10px 5px crimson inset;
}


-webkit-box-shadow silnik Webkit, przeglądarka Google Chrome

Chrome cień obsługuje bez prefiksu od wersji 10. Wcześniej, już od pierwszej wersji obsługiwał podstawowy opis cienia, także wielokrotnego z prefiksem. W wersji Chrome 4, jeżeli użyjemy prefiksu to widoczny będzie także cień wewnętrzny i rozszerzony.

p {
border:5px dashed crimson;
-webkit-box-shadow:-10px 5px 10px, 10px 0 10px 5px crimson inset;
}


silnik Trident, przeglądarka Internet Explorer

Bardzo długi czas przeglądarka ta nie obsługiwała zwykłych cieni CSS. Dopiero od Internet Explorera 9.0 cienie są obecne ale za to od razu w bez konieczności prefiksu. Alternatywą dla starszych wersji IE są Microsoftowe filtry DropShadow i Shadow. Cień wtedy będzie widoczny nawet w IE 5.5 ale filtry te działają inaczej niż cień i mówiąc szczerze nigdy nie interesowałam się o co z nimi chodzi (z tego co pamiętam w wersji IE9 zastały zarzucone).

p {
border:5px dashed crimson;
box-shadow:-10px 5px 10px, 10px 0 10px 5px crimson inset;
}


silnik Presto, przeglądarka Opera

Od wersji 10.5 Opera obsługuje cienie. Od razu bez prefiksu, od razu wszystkie cechy cienia: przesunięcie, rozmycie, kolor, cień wielokrotny, cień wewnętrzny rozszerzenie.

p {
border:5px dashed crimson;
box-shadow:-10px 5px 10px, 10px 0 10px 5px crimson inset;
}


-webkit-border-radius silnik Webkit, przeglądarka Safari

Safari tak jak Chrome korzysta z silnika Webkit więc używa się tego samego prefiksu. Safari i Chrome zupełnie niezależnie wydają swoje wersje przeglądarek więc ich numery będą zupełnie różne (do tego chrome numeruje więcej pełnymi liczbami a safari aktualizuje dodając po kropce numer aktualizacji). Bez prefiksu Safari udostępnia cień od wersji 5.1, z prefiksem w najbardziej podstawowej wersji cienia (ale także z cieniem wielokrotnym) od wersji 3.0. Cień wewnętrzny i rozszerzenie cienia dodano dopiero w Safari 5.0.

p {
border:5px dashed crimson;
-webkit-box-shadow:-10px 5px 10px, 10px 0 10px 5px crimson inset;
}


Przykłady

przykład cienia zewnętrznegoSam cień zewnętrzny przyda się jako ozdoba do ilustracji umieszczanych w notce. Wadą tego rozwiązania jest to, że nie będzie dostępne w starszych przeglądarkach ale dużą zaletą jest to, że cień w przeciwieństwie do ramki czy dopełnienia nie powiększa obszaru zajmowanego przez ilustrację. Czyli krawędź ilustracji zaczyna się dokładnie tam gdzie zaczynałaby się tekst a cień wystaje poza obszar przeznaczony na tekst.

.BlogWpisTresc img, .WstepKomentowanegoWpisu img, .TrescKomentowanegoWpisu img, #StatycznaZawartosc img {
 margin:1px;
 box-shadow:0 0 2px #2f251c;
}

delikatny cień wewnetrzny przykładWykorzystałam też swego czasu cień wewnętrzny do ozdobienia elementu po najechaniu (pseudoklasa hover). Było to w szablonach zrobionych z myślą o kroju Times. Wykorzystałam tam cień wewnętrzny w kilku miejscach, bardziej w roli gradientu niż cienia. Przyciemniłam nim kilka elementów, były to między innymi elementy listy dodatkowego górnego menu, pojedynczych komentarzy pod najechaniu na nie kursorem czy właśnie linki w wąskiej szpalcie. Ledwo widoczny styl wzmocni wrażenie nie narzucając się swoim wyglądem.

zobacz przykład w szablonie 41 Times, indygo »

.ArchiwumItem a, .ZakladkaEtykieta a, #BlogTytulyOstatnichWpisow li a, #BlogAutorzyBox li a {
 display:block;
 padding:0.5em 15px;
 border-bottom: 1px dashed #999;
 color: #666;
}
.ArchiwumItem a:hover, .ZakladkaEtykieta a:hover, #BlogTytulyOstatnichWpisow li a:hover, #BlogAutorzyBox li a:hover {
 box-shadow:0 0 20px #ccc inset;
 color: #261c67;
}

cień wewnętrzny w kształce eleipsyŁącząc kilka stylów tła można uzyskać bardzo różne rezultaty. Generalnie najpierw powinien pojawić się pomysł a potem powinno się poszukać sposobu jego realizacji w ten sposób można osiągnąć najlepsze rezultaty. Trzeba jednak wiedzieć, że dana możliwość istnieje, dlatego też piszę te lekcje, aby rozpowszechnić wiedzę o danej możliwości. Czasami wykorzystuję dany styl tylko dlatego, że mogę. Efekt nie jest wtedy zachwycający ale o ile pasuje do reszty szablonu to nie mam z tym większego problemu. W szablonach Times przy chmurce tagów nie bardzo pasował mi prostokątny cień o bardzo różnej wielkości. Dlatego zdecydowałam się zmienić go na owalny.

zobacz przykład w szablonie 42 Times New Roman, granatowym »

.BlogChmuraTagowLista li {
 display: inline;
}
.BlogChmuraTagowLista li a  {
 padding:0 0.2em;;
 color: #ebe3d1;
}
.BlogChmuraTagowLista li a:hover {
 box-shadow:0 0 20px #000 inset;
 border-radius:50%;
 color: #ded4ba;
}

cień użyty w roli gradientuI na koniec pierwszy wspomniany przykład z szablonu 19 Light. Cień tam umieściłam już definitywnie w roli gradientu. Chciałam szablon beżowy więc wybrałam brązowy kolor ale równie dobrze mógłby być to niebieski, fioletowy czy żółty. Cień jest dość spory do tego jeszcze gruba ramka aby uzyskać efekt odsunięcia cienia od krawędzi i zaokrąglone narożniki.

zobacz przykład w szablonie 19 Light, beżowym »

#BlogSzerokaSzpalta {
 width:500px;
 padding:0 0 50px 0;
 background:#FEFFE0;
 border:#fff1e2 10px solid;
 border-radius:25px;
 box-shadow:#8c734d 0 0 20px 0 inset;
 text-align:left;
 color:#2f251c;
}


Na dzisiaj to aż nadto informacji i przykładów. Można to było oczywiście przedstawić w znacznie krótszy sposób, chciałam jednak opisać i pokazać kilka różnych możliwości, im częściej stosuje się cechę tym bardziej użyteczna on się wydaje. Już teraz wyobrażam sobie konkretny efekt łagodnego wtopienia elementu w tło. Można go stworzyć przykładowo dodając elementowi inny kolor tła i stosunkowo rozmyty cień wewnętrzny w kolorze oryginalnego tła.

Ta notka jest już i tak wystarczająco długa a więc tylko odeśle do testowej strony pokazującej różne proste cienie. Nie obrazuje ona konkretnych skomplikowanych efektów tylko proste zastosowanie i różne cieniowane style. Mam nadzieję, że moja notka mimo swej nieracjonalnej objętości przyda się a po więcej zapraszam za kilka tygodni na stylowy blog. Mam kilka pomysłów na konkretne lecz raczej skomplikowane cienie.

Polecane wpisy z bloga i strony zewnętrzne na podobne tematy:

środa, 22 lutego 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: bartek, *.85-237-166.tkchopin.pl
2012/11/14 16:39:21
Podoba mi się opisanie cieni wewnętrznych. Wiele poradników omija ten temat :)
-
Gość: anton, *.icpnet.pl
2013/02/27 08:34:15
fajnie, tylko to nie działa pod IE.
Nie mogę stworzyć strony, gdzie wygląd pod IE będzie się różnic, bo tak chcą szefowie firm, a to oni decydują. Tłumaczenia im nie pomagają, bo to oni maja rację i oni płacą.
Fajne rady, ale absolutnie nieprzydatne, dopóki istnieje windows XP (czyli IE8, on nie OBSŁUGUJE CIENI, i większości elementów tu opisanych). To 10-30% rynku.
-
kate_mac
2013/02/27 13:08:23
@anton
Oczywiście masz absolutną rację: IE8 nie obsługuje cieni więc do projektowania pod tą przeglądarkę ten wpis jest zupełnie nieprzydatny. I nie ma być. Celem tego wpisu było wyjaśnienie jak działają cienie, po to abym po pierwsze sama je zrozumiała i miała możliwość praktycznego ćiwczenia a po drugie przedstawiła w miarę zrozumiałe przykłady dla kogoś kto chce wprowadzić drobne zmiany na swoim blogu.

Co do szefów firm, płacenia i decydowania. Oni też mają rację, absolutną, choć to trochę deprymujące, że wolą kupić produkt już na wstępie przestarzały (IE9 ma już dwa lata). Podoba mi się natomiast rada w jednym z artykułów na Smashing Magazine, trochę już stara bo sprzed ponad roku ale w generalnym ujęciu zawsze aktualna: dodatkowa praca kosztuje dodatkowo. Im ciekawsze i nowsze rozwiązania tym więcej trzeba czasu spędzić na poprawkach dla starych przeglądarek.
Kilka lat temu IE6 było absolutnym koszmarem ale nowoczesność nie tylko szybko się starzeje ale często też znika w niebycie. Komputery z WindowsXP i IE8 w końcu się zepsują...
-
Gość: Jan, *.fucio.net
2014/01/30 14:31:47
Witam
Mam pytanko odnośnie :
img {
box-shadow:0 5px #333;
}
i rozmycia. W powyższej postaci działa oczywiście dobrze (cień pojawia się tam gdzie chciałem czyli u dołu obrazka) ale gdy dodam rozmycie :
img {
box-shadow:0 5px 10px #333;
}
to niestety (dla mnie) cień pojawia się również na lewym i prawym boku :(
Da się tych bocznych cieni jakoś uniknąć ?
-
kate_mac
2014/02/19 15:44:51
@Jan
Ja nie znalazłam satysfakcjonującego rozwiązania, które pozwoliłoby mi manipulować cieniem tak aby pojawiał się tylko poniżej dolnej krawędzi elementu.
Niesatysfakcjonującym rozwiązaniem może być zwiększenie pionowego przesunięcia i dodanie ujemnego zakresu cienia (wielkości cienia).
img {
box-shadow:0 15px 10px -10px #333;
}
Efekt jest całkiem ok choć przydałyby się jeszcze większe możliwości manipulowania cieniem (ja bym go z chęcią trochę poprzekręcała :D i to właśnie tylko w odniesieniu do dolnej krawędzi).
-
Gość: sss, *.173.59.206.tesatnet.pl
2015/06/12 20:22:18
Fajny artykul ale dla poczatkujacych moglibyscie zamiescic dokladna sciezke krok po kroku jak zmieniac te cienie

samo img nic mi nie daje bo nie wie mco mam z tym zrobic

kombinowalem z obrazkiem w html i w css i za chiiny nie wiem jak uzyc tych kodow do zmiany tla
-
kate_mac
2015/06/13 09:24:36
@sss
Fajny artykul ale dla poczatkujacych moglibyscie zamiescic dokladna sciezke krok po kroku jak zmieniac te cienie
- po pierwsze jacy wy? do kogo się zwracasz używając liczby mnogiej? Do mnie jako autorki tego bloga? jestem jedna i zawsze tak było... nigdy na tym blogu nie pisał nikt poza mną...
- po drugie wpis jest bardzo szczegółowy; opisane jest wszystko co wiedziałam wtedy o cieniach: jak je stworzyć, jak zwiększać zakres rozmycie, jak zmieniać kolor, etc. przeczytałeś notkę? krok po kroku jest wyjaśnione jak wszystko to działa; w zależności od tego jaki efekt chcesz uzyskać wybierasz sobie aspekty cech

samo img nic mi nie daje bo nie wie mco mam z tym zrobic
- img to w html oznaczenie obrazka, każdego; opisane tu style dotyczą tylko cienia i przedstawiłam wszystkie ówcześnie mi znane możliwości co z tym cieniem można zrobić, nie rozumiem więc pytania... z cieniem obrazka możesz zrobić co tylko chcesz a na co pozwala ci kod html i co możesz pozmieniać w stylach

kombinowalem z obrazkiem w html i w css i za chiiny nie wiem jak uzyc tych kodow do zmiany tla
- opisane przykłady dotyczą generycznego obrazka, jeżeli chcesz użyć cechy zmiany tła we własnym szablonie to musisz zastosować bardziej specyficzne selektory
- przy tak ogólnym komentarzu w żadnym razie nie jestem w stanie udzielić jakiejkolwiek rady bo absolutnie nie mam pojęcia czego ma ona dotyczyć... może linki w zakładce "o CSS (notki z tego bloga i podobnych bloksowych)" coś pomogą...
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...