Forum PHP.pl > [CSS]cien obramowania

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]cien obramowania

Forum PHP.pl > Forum > Przedszkole

gibonik

4.11.2010, 09:25:04

witam czy można zrobić cień obramowania?

chemikpil

4.11.2010, 09:32:59

Najprostszy sposób na cień?

Kod

box-shadow: 10px 10px 5px #888;

To dajesz w css i sobie ustawiasz co i jak ma się wyświetlać.
pierwsza wartość: odległość od lewej krawędzi
druga wartość: odległość od górnej krawędzi
trzecia wartość: ustalasz rozmycie cienia.
czwarta wartość: to oczywiście kolor

gibonik

4.11.2010, 09:52:09

i brak cienia
.poleramki {
background:#FFF;
height: auto;
width: auto;
border: 1px solid #ECECEC;
box-shadow: 1px 1px 5px #ccc;
}

korek_a

4.11.2010, 10:12:11

zależy od przeglądarki box-shadow nie wszędzie działa
http://www.alistapart.com/articles/cssdropshadows/

gibonik

4.11.2010, 11:03:37

tak ale u mnie pod Firefox tez nie działa

smagul

4.11.2010, 11:49:29

jak chcesz by działało we wszystkich przeglądarkach, to wrzuć jako obrazek tła. Trochę więcej pracy ale jedyna działająca metoda.

pedro84

4.11.2010, 11:57:53

Obrazek tła? Żartujecie chyba.

[CSS] pobierz, plaintext 
-khtml-box-shadow:0px 10px 10px -10px #444;
-moz-box-shadow:0px 10px 10px -10px #444;
-o-box-shadow:0px 10px 10px -10px #444;
-webkit-box-shadow:0px 10px 10px -10px #444;
box-shadow:0px 10px 10px -10px #444;
[CSS] pobierz, plaintext

smagul

4.11.2010, 12:22:32

takie cuda od ie 9 dopiero, puki co ie7 oraz ie 8 są zbyt popularne by tak robić.

pedro84

4.11.2010, 13:05:22

Cytat(smagul @ 4.11.2010, 13:22:32 )

takie cuda od ie 9 dopiero, puki co ie7 oraz ie 8 są zbyt popularne by tak robić.

?

Jest mnóstwo metod, żeby zapewnić wsparcie dla starszych przeglądarek. To żadne cuda, tylko powoli stające się standardowymi, techniki.

gibonik

4.11.2010, 15:02:27

działa Twój kod, niestety nie pod IE 8 masz jakieś "techniki"

Cytat(pedro84 @ 4.11.2010, 13:05:22 )

?

Jest mnóstwo metod, żeby zapewnić wsparcie dla starszych przeglądarek. To żadne cuda, tylko powoli stające się standardowymi, techniki.

Maciek_#_&

4.11.2010, 15:12:22

Cytat(pedro84 @ 4.11.2010, 11:57:53 )

Obrazek tła? Żartujecie chyba.

[CSS] pobierz, plaintext 
-khtml-box-shadow:0px 10px 10px -10px #444;
-moz-box-shadow:0px 10px 10px -10px #444;
-o-box-shadow:0px 10px 10px -10px #444;
-webkit-box-shadow:0px 10px 10px -10px #444;
box-shadow:0px 10px 10px -10px #444;
[CSS] pobierz, plaintext

Podobnie jak "Border-radius" którego nie zna FF, dla shadow wystarczy takie coś:

Kod

-moz-box-shadow: 1px 1px 6px #666;
box-shadow:1px 1px 6px #353535;

Dlatego że "box-shadow" jest poprawnie odczytywany przez chrome, safari, opere.
I wiadomo że FF jest w tyle, dlatego dodajemy "-moz-" i git..

IE bym sie nie przejmował, to nigdy nie będzie dobra przeglądarka, z resztą, MS miał kiedykolwiek udany produkt ?

erix

4.11.2010, 17:51:59

Cytat

takie cuda od ie 9 dopiero, puki co ie7 oraz ie 8 są zbyt popularne by tak robić.

Też się da, ale wymaga to skorzystania z VML i kombinowania z dodatkowymi warstwami. Jest gdzieś behavior do tego, ale ma jedną wadę - wszystkie elementy podczas inicjalizacji muszą być widoczne, aby to coś zadziałało.

pedro84

4.11.2010, 17:59:37

Ewentualnie jesczze CSSPie (http://css3pie.com/).

gibonik

5.11.2010, 08:53:46

Cytat(erix @ 4.11.2010, 17:51:59 )

wgrałam pliczek na serwer i do stylu dopisałam
behavior: url(../ie-css3.htc)
i zero reakcji czy może być problem z obsługa pliku htc?

pedro84

5.11.2010, 12:21:53

Cytat(gibonik @ 5.11.2010, 09:53:46 )

wgrałam pliczek na serwer i do stylu dopisałam
behavior: url(../ie-css3.htc)
i zero reakcji czy może być problem z obsługa pliku htc?

Ścieżka poprawna?

gibonik

14.11.2010, 08:54:10

ścieżka poprawna, taki sam problem mam z okragłymi rogami, tez nie działa
border-radius-ie8.htc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.