мокрый пол

Veseloff · February 14, 2011

Кто-нибудь умеет далать «мокрый пол» для картинок? Мне не надо готовое решение — в интернетах их полно, но они все какие-то неуниверсальные. Мне бы хотелось, чтобы кто-нибудь объяснил суть как и что делается, а я уж сам реализую.

Vlad · February 14, 2011

Для программирования или вручную в графическом редакторе?

Veseloff · February 14, 2011

Для программирования. То есть загружаются фотки в каталог и у них автоматически яваскриптом (или там какие-нибудь фильтры у ИЕ?) рисуется мокрый пол.

Vlad · February 14, 2011

На JS как сделать пока не знаю, на PHP или другом языке с графической библиотекой алгоритм будет такой.

Пусть x и y это ширина и высота изображения.

1. Создаем новое изображение размерами x на y+30px. Здесь 30px высота "мокрого пола", подбирается экспериментально, исходя из размеров изображения и выразительности эффекта.

2. Вставляем в новое изображение (назову его НИ) исходную картинку с координатами 0,0.

3. Отражаем исходное изображение по вертикали и вставляем его в НИ с координатами 0, y.

4. Вставляем в НИ заранее подготовленное изображение в формате PNG-24 с градиентом. Градиент вертикальный от прозрачного цвета до цвета фона (для белого цвета фона — от прозрачного до белого). Координаты — 0, y.

Подумалось, что можно реализовать на JS и CSS3 такое. Делаем копию картинки через скрипт, а уже через CSS его отражаем и накладываем сверху градиент.

Vlad · February 14, 2011

Мне запала идея сделать все через CSS3. Стиль для отражения.

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Отражение</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.flip {
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
filter: flipV;
}
</style>
 </head>
 <body>
  <p><img class="flip" src="images/figure.jpg" alt="" /></p>
 </body>
</html>

Игорь, с тебя скрипт создания и вставки копии картинки, а с меня поворот картинки и наложение сверху градиента.

Veseloff · February 14, 2011

Окей, сейчас чё-нибудь соорудим.

SelenIT · February 14, 2011

Гугл выдает пару-тройку решений на JS (отдельная либа, JQ-плагин на ее базе).

У вебкитных есть специательный -webkit-box-reflect, но только у них...

Veseloff · February 14, 2011

http://borber.ru/htmlbook/wetfloor/

Вот тут на jQuery набросал. На onready берём все элементы с классом wetfloor и в каждый копируем картинку, которая уже там есть, потом ставим её под оригинальной, ставим класс flip и обрезаем так, чтобы вся высота элемента-контейнера стала равна полутора высотам оригинальной картинки, а так же ставим overflow: hidden; В итоге сейчас имеем картину, а под ней её же, только половинку и перевёрнутую. Осталось только что-то придумать с «затуханием» прозрачности.

Vlad · February 14, 2011

Гугл выдает пару-тройку решений на JS (отдельная либа, JQ-плагин на ее базе).
У вебкитных есть специательный -webkit-box-reflect, но только у них...

Как говорилось в Саус Парке — это все уже было в Сипсонах. Ничего нового не придумаешь, всегда найдется плагин под jQuery.

psywalker · February 14, 2011

Лови дружище

http://psywalker.ru/Zercalo/P1013005.gif

Vlad · February 14, 2011

Не обошлось без дополнительного вложения, добавляется через jQuery. Имеется два типа отражения — сильное (fade.png) и слабое (fade2.png), мне больше второе понравилось, даже наверное можно еще ослабить.

http://liondesert.narod.ru/archive/floor.zip

Лови дружище
http://psywalker.ru/Zercalo/P1013005.gif

Макс, что за фигня! Глаза красные и горизонт завален!

psywalker · February 14, 2011

Макс, что за фигня! Глаза красные и горизонт завален!

Ну и что, ведь это тут не главное. Главное сама идея то ведь пашет?

rus · February 14, 2011

imagerotate() не подходит?

Veseloff · February 14, 2011

Не обошлось без дополнительного вложения, добавляется через jQuery. Имеется два типа отражения — сильное (fade.png) и слабое (fade2.png), мне больше второе понравилось, даже наверное можно еще ослабить.
http://liondesert.narod.ru/archive/floor.zip

Круть! Только в ИЕ6 «пол» поломался, но, я думаю, это вылечится пнг-фиксом.

Vlad · February 14, 2011

Нет, не подходит. Здесь эффект как раз отражения, а не поворота должен быть.

Круть! Только в ИЕ6 «пол» поломался, но, я думаю, это вылечится пнг-фиксом.

Для IE6 я не стал ничего делать, в нем проблема простая, связанная с PNG-24. Думаю, да, пнгфикс исправит.

Должно работать в IE7-9, Opera 10.50+, Safari 3.1+, Chrome 2+, Fx3.5+.

psywalker · February 14, 2011

Vlad, а объясни плиз принцип действия matrix в CSS3, что за цифры и что они все значат?

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Veseloff · February 14, 2011

http://borber.ru/htmlbook/wetfloor/floor.html

Такое ощущение, что всё круто. И в ослабляе тоже работает.

d0ublezer0 · February 14, 2011

Я правильно понял, что мкрпл применим (автоматом) только к предметам расположенным "лицом" к зрителю? А как быть с повернутыми в три четверти? Как с перспективой?

psywalker · February 14, 2011

А вот такой эффект замутил. Только смотреть в ИЕ!

http://psywalker.ru/Zercalo/1.html

Vlad · February 14, 2011

Я правильно понял, что мкрпл применим (автоматом) только к предметам расположенным "лицом" к зрителю? А как быть с повернутыми в три четверти? Как с перспективой?

А никак. Даже в графическом редакторе вручную это сделать тяжело, зависит от картинки. На автомате же вообще не реализовать.

Vlad, а объясни плиз принцип действия matrix в CSS3, что за цифры и что они все значат?
-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Это называется матрица преобразования. До конца еще сам не разобрался, первые курсы математики и работа с матрицами позабыты. Поэтому ссылки накидаю на англ. На русском тоже можно найти по ключевым словам матрица преобразований или матрица трансформации.

http://www.mathamazement.com/Lessons/Pre-C...n-matrices.html

http://en.wikipedia.org/wiki/Linear_transf...mation_matrices (на русский язык этот раздел не переведен)

Veseloff · February 14, 2011

Я правильно понял, что мкрпл применим (автоматом) только к предметам расположенным "лицом" к зрителю? А как быть с повернутыми в три четверти? Как с перспективой?

http://jsvet.narod.ru/demo.html

В принципе, есть какие-то решения.

SelenIT · February 14, 2011

Как с перспективой?

В сафарях — перспективы самые радужные . Более-менее кроссбраузерно — видимо, только через трансформации типа skewY и matrix...

есть какие-то решения

Точно, через canvas, наверное, можно вообще что угодно реализовать... если уметь!

Vlad · February 14, 2011

Если исходная картинка "прямая", то ее можно исказить в перспективе, также как и ее отражение. А затем поверх наложить полупрозрачный рисунок. Так что да, можно автоматизировать процесс.

Vlad · February 14, 2011

Попытался сделать изменение перспективы через -moz-transform: skewY(-5deg), но обрезается все, что выходит за границы исходного размера.

psywalker · February 14, 2011

Это называется матрица преобразования. До конца еще сам не разобрался, первые курсы математики и работа с матрицами позабыты. Поэтому ссылки накидаю на англ. На русском тоже можно найти по ключевым словам матрица преобразований или матрица трансформации.
http://www.mathamazement.com/Lessons/Pre-C...n-matrices.html
http://en.wikipedia.org/wiki/Linear_transf...mation_matrices (на русский язык этот раздел не переведен)

Ага, спасибо Влад. Только с английским вот беда(((

rewue · June 19, 2012

http://rewue.rv.ua/pages/mirror.html

работает только в мозилле, для других браузеров просто не добавлял соответствующие свойства CSS.

отражение сделано только через стили, для картинки будет работать точно также

кусок разметки


<div id="main">
	Вот так-то. тут теперь можно написать любой текст 
</div>
<div id="refl"><span></span></div>

кусок стилей


#main	 {color:#000;
	font-family:Verdana, Geneva, sans-serif;
	font-size:48px;
	text-shadow:0 1px 1px #fff;
	text-align:center;
	height:80px;
}
#refl	{
		position:relative;
		top:-50px;
		z-index:-1;
		background: -moz-element(#main);
		background:element(#main);
		height:80px;
		-webkit-transform:scale(1, -0.8);
      -moz-transform:scale(1, -0.8);
      -o-transform:scale(1, -0.8);
      transform:scale(1, -0.8);}
#refl span	{
		position:absolute;
		top:0px;
		left:0;
		z-index:10;
		width:100%;
		height:50px;
		background-image:-moz-linear-gradient(top, rgba(153,153,153,1), rgba(153,153,153,0.9), rgba(153,153,153,0.7));
		background-image:-o-linear-gradient(top, rgba(153,153,153,1), rgba(153,153,153,0.9), rgba(153,153,153,0.7));
		background-image:-webkit-linear-gradient(top, rgba(153,153,153,1), rgba(153,153,153,0.9), rgba(153,153,153,0.7));
	}

Sign In

мокрый пол

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information