Растушевка со скруглением углов придумана в CSS?

[borus]

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

Задался целью получить такие картинки:

то есть имеющие скругления плюс градиентный переход к прозрачности( в моем случае фон белый) либо к белому цвету.

Скажите, есть ли какие средства в HTML+CSS для получения подобной растушевки со скруглением одновременно?

С уважением и благодарностью

[rash]

Боюсь, что нет. Картинки фиксированного размера? Кладите их под png-маску. Старо, дубово, но сделает то, что вам надо. Если размер нефиксированный — возможно, поможет canvas, но тут я не советчик.

[Softlink]

Картинку в обертку, обертке псевдоэлемент, ему тень с параметром inset. Что-то подобное должно получиться.

[rash]

О, точно, когда в последний раз inset был нужен, помню, еще не поддерживался достаточно широко.

Сейчас может быть уже можно, хорошая мысль!

[Softlink]

Да, вроде бы как надо получается http://jsfiddle.net/Softlink/v5JFa/

[SelenIT]

В приличных браузерах вроде и без псевдоэлемента выходит... )

[borus]

Да, вроде бы как надо получается http://jsfiddle.net/Softlink/v5JFa/

Благодарю.

Для закрепления урока задам пару вопросов:

1. свойство display:inline-block; для div используется, чтобы рамка обхватывала изображение, а не расходилась по ширине окна?

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

position:absolute;
top:-1px;
bottom:-1px;
left:-1px;
right:-1px;

?

Кстати всё работает без свойства display:block; у тега img...

[Softlink]

Да, вроде бы как надо получается http://jsfiddle.net/Softlink/v5JFa/

Благодарю.

Для закрепления урока задам пару вопросов:

1. свойство display:inline-block; для div используется, чтобы рамка обхватывала изображение, а не расходилась по ширине окна?

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

position:absolute;
top:-1px;
bottom:-1px;
left:-1px;
right:-1px;

?

1) да

2) псевдоэлементу надо брать откуда-то размеры. Я их задал позиционированием. Отрицательные значения только для того, чтобы тень без проблем легла по границам изображения.

Кстати всё работает без свойства display:block; у тега img...

Привычка.

[borus]

В руководстве написано "before наследует стиль от элемента, к которому он добавляется." То есть это не подразумевает заимствования размеров...

[SelenIT]

Без display:block (или переопределения vertical-align) для картинки под ней получается зазор в 3-4 пкс (для нижних выносных эл-тов текста). Соотв-но, снизу полоска перехода будет чуть уже и может даже некрасиво обрезаться.