Отражение на изображението в CSS3 [Съвети за CSS3]
Досега обсъдихме много нови имоти в CSS3. Освен това, всъщност има и няколко други свойства, които в момента не са включени в официалните спецификации на CSS3, които си струва да се изпробват, една от които е кутия-отразява собственост, инициирана от Webkit. Това свойство може да се отрази на посочените обекти.
Основно отражение
Основната реализация е доста интуитивна; да кажем, искаме отражението под реалния обект. Можем да пишем:
img -webkit-box-отразява: по-долу;
Този пример показва как отразяваме изображение По-долу (позицията) на обекта. Но в този случай можем да държим и отражението на прав, наляво, и по-горе.
Отместване на отражението
Изместване Използва се за дефиниране на пропастта между отражението и реалния отразен обект. Нека да видим кодовия фрагмент по-долу;
img -webkit-box-отразява: под 10px;
В горния код разделяме отражението от реалния обект чрез 10px;
- Преглед на демо
Маскиране с градиенти
Ефектът на отражение, който обикновено виждаме, е избледняването на дъното и показва само половината или по-малко от реалния обект. За да повторим този вид ефект, можем да приложим CSS3 градиенти за да маскирате обекта, така;
-webkit-box-отразява: под 0px -webkit-градиент (линейно, ляво отгоре, ляво долу, от (прозрачно) до (rgba (250, 250, 250, 0.1)));
Този код ще доведе до следното представяне;
Можем също да използваме цвят-стоп да контролираме преходите и да правим по-хубава рефлексия:
img -webkit-box-odraža: под 0px -webkit-градиент (линейно, ляво отгоре, ляво долу, от (прозрачно), цветно-стоп (70%, прозрачно), до (rgba (250, 250, 250, 0,1) )));
- Преглед на демо
Алтернативи за Firefox
Това свойство обаче работи само в Webkit браузъри (което означава Safari и Chrome) в момента. За да постигнете същия ефект във Firefox, се нуждаете от друг маршрут: използване -Moz-елемент () функция. Тази функция по същество ще генерира или репликира съдържанието от определени HTML елементи. Да разгледаме следния пример;
Имаме изображение, увити в a И за да държим отражението, ще използваме Най- За съжаление все още няма лесен начин за създаване на приятен ефект на отражение във Firefox, използвайки тази практика. Горният код просто ще създаде отражението без ефекта на затихване.Моз-отразят документ за самоличност;
:след псевдо-елемент, както следва; # moz-reflect: after content: ""; дисплей: блок; фон: -moz-елемент (# moz-reflect) без повторение; ширина: автоматично; височина: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-Моз-трансформация с отрицателна скала се използва за преобръщане на генерирания обект. Също така се уверете, че височина е достатъчно точен за реалните обекти височина за да се избегнат ненужни допълнителни линии за позициониране на отражението.Допълнителни справки
