ЦСС3 Имаге Рефлецтион [ЦСС3 Типс]
До сада смо разговарали о многим новим некретнинама ЦСС3. Поред тога, постоји још неколико других својстава која тренутно нису укључена у званичне спецификације ЦСС3 које вреди испробати, а једна од њих је бок-рефлецт имовину коју иницира Вебкит. Ова својства могу се одразити на специфициране објекте.
Басиц Рефлецтион
Основна имплементација је прилично интуитивна; рецимо, желимо одраз испод стварног објекта. Можемо писати:
имг -вебкит-бок-одражава: испод;
Овај пример показује како ми одражавамо слику испод (положај) објекта. Али, у овом случају, можемо задржати и рефлексију на јел тако, лево, и горе.
Рефлецтион Оффсет
Офсет користи се за дефинисање јаза између рефлексије и стварног рефлектованог објекта. Да видимо исјечак кода испод;
имг -вебкит-бок-одражава: испод 10пк;
У горњем коду, одвојили смо одраз од стварног објекта 10пк;
- Виев Демо
Маскирање са градијентима
Ефекат рефлексије који обично видимо је фаде-оут на дну и приказује само пола или мање стварног објекта. Да бисмо поновили ову врсту ефекта, можемо се пријавити ЦСС3 Градиентс да маскирате објекат, као што је то случај;
-вебкит-бок-рефлектује: испод 0пк -вебкит-градијент (линеарно, лијево горе, лијево дно, од (транспарентно), до (ргба (250, 250, 250, 0.1)));
Овај код ће резултирати следећом презентацијом;
Можемо такође користити боја-стоп да контролишете прелазе и учините да рефлексија изгледа лепше:
имг -вебкит-бок-одражава: испод 0пк -вебкит-градијент (линеарни, леви врх, леви дно, од (транспарентан), боја-стоп (70%, транспарентан), до (ргба (250, 250, 250, 0,1) )));
- Виев Демо
Алтернативе за Фирефок
Ова особина, међутим, тренутно ради само у Вебкит претраживачима (што значи Сафари и Цхроме). Да бисте остварили исти ефекат у Фирефоку, потребна вам је друга рута: употреба -моз-елемент () функције. Ова функција ће у суштини генерисати или реплицирати садржај из одређених ХТМЛ елемената. Погледајмо следећи пример;
Имамо слику умотану у а И, да одржимо рефлексију, користићемо Тхе Нажалост, још увијек нема лаког начина за креирање а леп ефекат рефлексије у Фирефок-у користећи ову праксу. Горњи код ће једноставно створити рефлексију, без ефекта фаде.моз-рефлецт ид;
:после псеудо-елемент, као што следи; # моз-одражава: после цонтент: ""; дисплеј блок; бацкгроунд: -моз-елемент (# моз-одраз) но-репеат; видтх: ауто; хеигхт: 375пк; маргин-боттом: 100пк; -моз-трансформ: сцалеИ (-1);
-моз-трансформ са негативном скалом се користи за окретање генерисаног објекта наопако. Такође, постарајте се за то хеигхт је довољно прецизан за стварни објекат хеигхт да бисте избегли непотребне додатне линије за позиционирање рефлексије.Даље референце
