В свадебных и подобных праздничных фотографиях нередко используется осветление или затемнение изображения по краям. В сущности так создается внутренняя рамка для изображения. Для воплощения такого эффекта можно использовать способ, подобный описанному в уроке «Создание простых масок CSS: изображения с закругленными краями»: увеличив радиус закругления рамки, можно создать эффект эллиптической обрезки, показанный ниже.

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

<p id="vignette"></p>

И зададим код CSS с указанием ширины и высоты изображения этому абзацу. Далее идет код CSS для современных версий браузеров, без обходных путей и приставок производителей для старых версий:

p#vignette {
        width: 500px; height: 188px;
        background-image: url(golden-gate-bridge.jpg);
        border-radius: 50%;
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
        overflow: hidden;
}

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

<p id="vignette">Golden Gate Bridge in fog</p>

И добавим код CSS:

p#vignette {
        width: 500px; height: 188px;
        background-image: url(golden-gate-bridge.jpg);
        border-radius: 50%;
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 1);
        overflow: hidden;
}

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

p#vignette {
        text-align: centre;
        line-height: 180px;
}

Если нужно, чтобы текст оставался заменителем подписи изображения, можно увеличить значение высоты строки так, чтобы поместить текст ниже изображения, или можно сделать так, чтобы текст полностью исчез, используя один из нескольких подходящих приемов. Текст все равно останется читабельным для программ чтения с экрана для сохранения доступности:

p#vignette {
        color: rgba(0, 0, 0, 0);
}

К сожалению, изменение цвета внутренней тени на белый, например, если изображение находится на странице с белым фоном, не размывает ожидаемым образом внешние края изображения. Для этого потребуются более сложные способы.

С помощью задания разных значений закругления рамки для разных углов можно добиться, чтобы изображения находились в вырезанных окнах страницы, по необходимости применяя этот же способ: представьте формы фресок Рафаэля в апартаментах Папы Римского:

p#lake-como {
        width: 450px; height: 300px;
        background-image: url('lake-como-villa.jpg');
        border-radius: 50% 50% 10px 10px;
        box-shadow: inset 0 0 100px rgba(0, 0, 0, 1);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание простых масок CSS изображения с закругленными краями
• Создание закругления рамки
• Создание наклонного меню с использованием только CSS