Есть множество различных свойств в CSS3, какие-то уже включены в официальные спецификации CSS3, какие-то ещё нет. Одним из них является интересное свойство
Основное отражение
Реализация очень простая, достаточно одного небольшого кода:
Выглядеть это будет так:
Отражение с отступом
Отступ реализуется также просто, нужно просто добавить в код нужное количество пикселей, для определения отступа отражения от изображения:
Получаем:
Маскировка с градиентами
Гораздо эффектнее когда отражение уходит на нет, то есть исчезает, где нибудь на половине отражения. Чтобы это реализовать нам помогут CSS3 градиенты:
Мы можем ограничить отражение на том расстоянии которое нам требуется, применив свойство
Альтернативный способ для Firefox
На данный момент, все эти свойства пока работают только в браузерах WebKit (Safari, Chrome). Поэтому, чтобы добиться такого же эффекта для Firefox, нам нужен другой способ, с помощью:
Помимо изображения нам потребуется контейнер:
Чтобы добиться эффекта отражения, мы используем псевдо-элемент
Правда пока нет простого способа создать эффект отражения, с эффектом затухания, для Firefox с помощью этой практики. Но это пока вопрос времени.
box-reflect
, инициированное Webkit, то есть работает это пока только Webkit-браузерах (Safari, Chrome). Это свойство позволяет нам отразить изображение, к которому оно применено.Основное отражение
Реализация очень простая, достаточно одного небольшого кода:
Код: Выделить всё
img {
-webkit-box-reflect: below;
}
below
- говорит нам, что изображение будет отражено ниже объекта. Мы так же можем использовать right
, left
и above
, чтобы отразить изображение справа, слева и сверху.Выглядеть это будет так:
Отражение с отступом
Отступ реализуется также просто, нужно просто добавить в код нужное количество пикселей, для определения отступа отражения от изображения:
Код: Выделить всё
img {
-webkit-box-reflect: below 10px;
}
Маскировка с градиентами
Гораздо эффектнее когда отражение уходит на нет, то есть исчезает, где нибудь на половине отражения. Чтобы это реализовать нам помогут CSS3 градиенты:
Код: Выделить всё
img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}
color-stop
:
Код: Выделить всё
img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
Альтернативный способ для Firefox
На данный момент, все эти свойства пока работают только в браузерах WebKit (Safari, Chrome). Поэтому, чтобы добиться такого же эффекта для Firefox, нам нужен другой способ, с помощью:
-moz-element()
. Правда в этом варианте структура и css будут немного больше, чем для WebKit.Помимо изображения нам потребуется контейнер:
Код: Выделить всё
<div id="moz-reflect">
<img src="изображение" />
</div>
:after
:
Код: Выделить всё
#moz-reflect:after {
content: "";
display: block;
background: -moz-element(#moz-reflect) no-repeat;
width: auto;
height: 385px;
margin-bottom: 100px;
-moz-transform: scaleY(-1);
}
-moz-transform
- позволяет нам перевернуть изображение. Так же нам нужно указывать точную высоту для отражённого объекта, равного оригинальному изображению.Правда пока нет простого способа создать эффект отражения, с эффектом затухания, для Firefox с помощью этой практики. Но это пока вопрос времени.
Комментарии: 2
Можно, например, сделать что-то вроде бонуса, для пользователей с браузерами гугл хром. Сделать отражение аватара.
Что-то вроде такого, для prosilver, найти в теме стиля:
Добавить после:
Для subsilver. Шаблон
Заменить на:
Т.е. добавить к ячейке таблицы свой класс
В конец темы стиля добавить:
зы.
Что-то вроде такого, для prosilver, найти в теме стиля:
Код: Выделить всё
.postprofile dd, .postprofile dt {
line-height: 1.2em;
margin-left: 8px;
}
Код: Выделить всё
.postprofile dt img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}
viewtopic_body.html
, найти:
Код: Выделить всё
<!-- IF postrow.POSTER_AVATAR -->
<tr>
<td>{postrow.POSTER_AVATAR}</td>
</tr>
<!-- ENDIF -->
Код: Выделить всё
<!-- IF postrow.POSTER_AVATAR -->
<tr>
<td class="profileimg">{postrow.POSTER_AVATAR}</td>
</tr>
<!-- ENDIF -->
profileimg
.В конец темы стиля добавить:
Код: Выделить всё
.profileimg img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}
зы.
rgba(250, 250, 250, 0.1)
- 0.1 это степень прозрачностиХочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!