Odbicie obrazu CSS3 [Porady CSS3]
Do tej pory omówiliśmy wiele nowych właściwości w CSS3. Poza tym istnieje kilka innych właściwości, które obecnie nie są uwzględnione w oficjalnych specyfikacjach CSS3, które warto wypróbować, z których jeden to box-reflect własność inicjowana przez Webkit. Ta właściwość może odzwierciedlać określone obiekty.
Podstawowe odbicie
Podstawowa implementacja jest dość intuicyjna; powiedzmy, chcemy odbicia poniżej rzeczywistego obiektu. Możemy pisać:
img -webkit-box-reflect: poniżej;
Ten przykład pokazuje, jak odzwierciedlamy obraz poniżej (pozycja) obiekt. Ale w tym przypadku możemy również zachować odbicie dobrze, lewo, i powyżej.
Przesunięcie odbicia
Offsetowy służy do zdefiniowania luki między odbiciem a odbijanym obiektem rzeczywistym. Zobaczmy poniższy fragment kodu;
img -webkit-box-reflect: poniżej 10px;
W powyższym kodzie oddzieliliśmy odbicie od obiektu rzeczywistego przez 10px;
- Wyświetl demo
Maskowanie gradientami
Efekt odbicia, który zwykle widzimy, to zanikanie na dole i wyświetlanie tylko połowy lub mniej rzeczywistego obiektu. Aby powielić ten efekt, możemy go zastosować Gradienty CSS3 maskować obiekt w ten sposób;
-webkit-box-reflect: poniżej 0px -webkit-gradient (liniowy, lewy górny, lewy dolny, od (przezroczysty) do (rgba (250, 250, 250, 0,1)));
Ten kod spowoduje następującą prezentację;
Możemy również użyć zatrzymanie koloru kontrolować przejścia i sprawić, że odbicie będzie ładniejsze:
img -webkit-box-reflect: poniżej 0px -webkit-gradient (liniowy, lewy górny, lewy dolny, od (przezroczysty), kolorowy-stop (70%, przezroczysty), do (rgba (250, 250, 250, 0,1) )));
- Wyświetl demo
Alternatywy dla Firefoksa
Ta właściwość działa jednak obecnie tylko w przeglądarkach Webkit (co oznacza Safari i Chrome). Aby zapewnić taki sam efekt w Firefoksie, potrzebujesz innej trasy: używając -moz-element () funkcjonować. Ta funkcja generuje lub replikuje zawartość z określonych elementów HTML. Spójrzmy na poniższy przykład;
Mamy obraz zawinięty w I, aby utrzymać refleksję, użyjemy The Niestety nadal nie ma łatwego sposobu na utworzenie ładny efekt odbicia w Firefoksie przy użyciu tej praktyki. Powyższy kod po prostu stworzy odbicie, bez efektu zanikania.moz-reflect ID;
:po pseudoelement, następująco; # moz-reflect: after content: ""; Blok wyświetlacza; background: -moz-element (# moz-reflect) no-repeat; szerokość: auto; wysokość: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform ze skalą ujemną służy do odwrócenia wygenerowanego obiektu do góry nogami. Upewnij się także, że wysokość jest wystarczająco precyzyjny dla prawdziwego obiektu wysokość aby uniknąć niepotrzebnych dodatkowych linii do pozycjonowania odbicia.Dalsze odniesienia
