Есть множество различных свойств в CSS3, какие-то уже включены в официальные спецификации CSS3, какие-то ещё нет. Одним из них является интересное свойство 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

romaamor 02 дек 2012, 07:13 Сообщение

Прикольно. :drink: Вот теперь думаю куда его такое вставить ? :scratch:
  • 0

CabinetAdmin 02 дек 2012, 15:04 Сообщение

Можно, например, сделать что-то вроде бонуса, для пользователей с браузерами гугл хром. Сделать отражение аватара.

Что-то вроде такого, для 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)));
}
Для subsilver. Шаблон 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 это степень прозрачности
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!