Наложение полупрозрачного треугольника на изображение

[pvk]

Здравствуйте.

Подскажите пожалуйста идеи как создать вот такой полу-прозрачный треугольник в левом верхнем углу.

От середины левой стороны картинки к верхнему правом углу.

Размеры исходного блока с фотографией не постоянны.

--

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

Edited January 13, 2012 by pvk

[Softlink]

pvk, а картинки хоть квадратные? Или пропорции у всех картинок одинаковые?

[Mark Ghaphes]

В фотошопе, жмете ПКМ по слою -> Параметры наложения -> Наложение градиента.

и несложными манипуляциями редактируете: цвет, прозрачность, масштаб, угол.

[Softlink]

В общем, для полностью неизвестных размеров пока сделать не получилось. Максимальная универсальность - это примерно так, т.е. когда знаем хотя бы одну сторону. Есть мысли попробовать clip+transform, но сегодня уже точно не соображу

Может SelenIT что подскажет?

Edited January 13, 2012 by Softlink

[Svatov]

Все что придумал...http://jsfiddle.net/3uktw/1/

[Softlink]

Все что придумал...http://jsfiddle.net/3uktw/1/

Вполне, если бы не фикс размеры бордеров, которыми делается треугольник У меня первым делом такая мысль родилась

[Svatov]

В общем, для полностью неизвестных размеров пока сделать не получилось. Максимальная универсальность - это примерно так, т.е. когда знаем хотя бы одну сторону. Есть мысли попробовать clip+transform, но сегодня уже точно не соображу

Может SelenIT что подскажет?

Ну ты и маньячина Еще и с кроссбраузерностью все завернул

То, что у тебя пришла мысль я и не сомневался, у меня по форуме например сложилось мнение, что ты спец по CSS3, а SelenIT энциклопедические знания спеков

[Softlink]

То, что у тебя пришла мысль я и не сомневался, у меня по форуме например сложилось мнение, что ты спец по CSS3, а SelenIT энциклопедические знания спеков

Ладно-ладно, Илья помимо ходячей энциклопедии может здоровское решение завернуть. Я иногда "в лоб" делаю, а у него все с подвывертом (как Макс говорит)

Еще и с кроссбраузерностью все завернул

В ИЕ таки не заработало

Edited January 13, 2012 by Softlink

[psywalker]

В общем, для полностью неизвестных размеров пока сделать не получилось. Максимальная универсальность - это примерно так, т.е. когда знаем хотя бы одну сторону. Есть мысли попробовать clip+transform, но сегодня уже точно не соображу

Погоди, а вроде у тя и так универсал? Разве нет? Я вроде делаю размеры конейнера резиновыми и так же всё пашет. Что ты имеешь ввиду?

То, что у тебя пришла мысль я и не сомневался, у меня по форуме например сложилось мнение, что ты спец по CSS3, а SelenIT энциклопедические знания спеков

Ладно-ладно, Илья помимо ходячей энциклопедии может здоровское решение завернуть. Я иногда "в лоб" делаю, а у него все с подвывертом (как Макс говорит)

Еще и с кроссбраузерностью все завернул

В ИЕ таки не заработало

Потому что нужен матричный фильтр

[Softlink]

Погоди, а вроде у тя и так универсал? Разве нет? Я вроде делаю размеры конейнера резиновыми и так же всё пашет. Что ты имеешь ввиду?

Не, смотри че будет, если изображение вдруг станет квадратным, ну или высота увеличится.

Потому что нужен матричный фильтр

Просвяти, я же с Иешками не общаюсь почти

[Verder]

В фотошопе, жмете ПКМ по слою -> Параметры наложения -> Наложение градиента.

и несложными манипуляциями редактируете: цвет, прозрачность, масштаб, угол.

Все гораздо проще (продиктовано необходимостью делать максимально быстро):

1.

2.

3.

4.

5.

6.

Все очень просто и для реальной работы. Для изображений такого размера и качества нахрен градиенты не нужны.

Edited January 13, 2012 by Verder

[psywalker]

Погоди, а вроде у тя и так универсал? Разве нет? Я вроде делаю размеры конейнера резиновыми и так же всё пашет. Что ты имеешь ввиду?

Не, смотри че будет, если изображение вдруг станет квадратным, ну или высота увеличится.

Потому что нужен матричный фильтр

Просвяти, я же с Иешками не общаюсь почти

Ааа, я понял.

На счёт фильтров я погнал, с пэ фильтры вообще не пашут(

[psywalker]

Вот так вот можно вроде решить)

http://jsfiddle.net/bj7Jk/5/

[Softlink]

Вот так вот можно вроде решить)

http://jsfiddle.net/bj7Jk/5/

Да не, Макс, тут результат тот же самый, только ты с другого бока зашел.

Надо будет на досуге попробовать все-таки вариант с clip. Я покрутил немного, но не дотумкал до конца, уже спать хочецца и не думается - ночь на дворе

Edited January 13, 2012 by Softlink

[psywalker]

Вот так вот можно вроде решить)

http://jsfiddle.net/bj7Jk/5/

Да не, Макс, тут результат тот же самый, только ты с другого бока зашел.

Надо будет на досуге попробовать все-таки вариант с clip. Я покрутил немного, но не дотумкал до конца, уже спать хочецца и не думается - ночь на дворе

Да, Шурик, действительно не вариант(( Ждём твоих решений тада

[SelenIT]

Мда, свинство у линейных градиентов, что они не меняют угла при смене пропорций в background-size (главное, радиальные прекрасно сплющиваются и растягиваются, а тут...). С трансформами смог добиться только того, чтобы правый верхний угол был на месте (для квадратных картинок, как в стартовом посте, получается нужная пропорция, для остальных — хотя бы более-менее терпимо). Похоже, самое простое и действенное решение — в самом деле наложить этот уголок обычной png-картинкой размерами 100% на 50% враппера...

[Mark Ghaphes]

В фотошопе, жмете ПКМ по слою -> Параметры наложения -> Наложение градиента.

и несложными манипуляциями редактируете: цвет, прозрачность, масштаб, угол.

Все гораздо проще (продиктовано необходимостью делать максимально быстро):

Все очень просто и для реальной работы. Для изображений такого размера и качества нахрен градиенты не нужны.

Ну да...ну да. В принципе, если не заботиться о качестве, такой вариант подходит. Только разница во времени не особо большая. Это также займет минуту.

Edited January 13, 2012 by Mark Ghaphes

[pvk]

В общем, для полностью неизвестных размеров пока сделать не получилось. Максимальная универсальность - это примерно так, т.е. когда знаем хотя бы одну сторону. Есть мысли попробовать clip+transform, но сегодня уже точно не соображу

Может SelenIT что подскажет?

Большое спасибо, этот вариант мне подходит.

Только если я пытаюсь закруглить углы у картинки, то получаю небольшие проблемы (в верхним левом и правом углах)..

Также большое спасибо за подробную инструкцию по применению фотошопа, но доступа к картинкам у меня нет - они загружаются динамически.

[SelenIT]

Можно саму обертку скруглить.

[pvk]

Можно саму обертку скруглить.

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

--

Вернее в Crome & Safari закруглить не получается. Используя, конечно же, -webkit-border-radius: 8px;

Edited January 14, 2012 by pvk

[Softlink]

Можно ведь прибегнуть к старому способу с псевдоэлементом и тенью

[psywalker]

А вот такой вариантик, чуть полегче кажись. На базе Илюхинова

http://jsfiddle.net/bj7Jk/15/

p.s. хотя один хрен))

[SelenIT]

Кстати, по новой спеке градиентов, привязка к углу (нововведенное "to") должна давать искомое поведение (example 18 — как раз что надо, с точностью до цветов и ориентации). Дело, как обычно, за малым — поддержкой браузеров...

Используя, конечно же, -webkit-border-radius: 8px;

Почему "конечно же"? А без префиксов, для актуальных версий — разве нет?

[psywalker]

Кстати, по новой спеке градиентов, привязка к углу (нововведенное "to") должна давать искомое поведение (example 18 — как раз что надо, с точностью до цветов и ориентации). Дело, как обычно, за малым — поддержкой браузеров...

Ааа, вот почему они изменили синтаксис немного. Ну это даже радует. Думаю Опера подтянется к 14-ой версии

[pvk]

Можно ведь прибегнуть к старому способу с псевдоэлементом и тенью

Большое спасибо!

Скажите, а как-то можно добавить тень таким образом, чтобы бы получить аналог border-top-left-radius: 8px и border-bottom-left-radius: 8px.

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

...

Используя, конечно же, -webkit-border-radius: 8px;

Почему "конечно же"? А без префиксов, для актуальных версий — разве нет?

Если честно, то от меня выпал этот момент, и по привычке везде писал -webkit...

Спасибо большое за поправку.

[psywalker]

Совместными усилиями с Илюхой (а на самом деле одним Илюхой) удалось соорудить кросс решение. Через SVG в base64. Хром подвёл зараза, но удалось кое-что и там починить. В общем два решения выношу на обозрение.

1) http://jsfiddle.net/bj7Jk/17/ (Хром подвёл)

2) http://jsfiddle.net/bj7Jk/21/ (Кросс)