Front-end разработчик и дизайнер интерфейсов
0,0
рейтинг
28 сентября 2011 в 11:03

Разработка → Оформление изображений на CSS3 перевод

CSS*
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

Смотреть демо

Проблема


Из приведенного ниже примера становится понятно, с какими трудностями мы можем столкнуться при применении css-свойств на изображении. Кроме того каждый браузер отображает готовый элемент по-своему. Firefox не хочет делать углы скругленными, но тень к элементу добавляет, а Chrome или Safari отказываются делать и то и другое.


Решение


Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
<div style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>

Добавление динамики


Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("img").load(function() {
		$(this).wrap(function(){
		return '<span class="image-wrap ' + $(this).attr('class') + '"
			style="position:relative; display:inline-block;
			background:url(' + $(this).attr('src') + ') no-repeat center center;
			width: ' + $(this).width() + 'px;
			height: ' + $(this).height() + 'px;" />';
		});
	$(this).css("opacity","0");
 	});
});
</script>

После применения мы получим следующий результат:
<span class="image-wrap" style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width:150px; height:150px;">
	<img src="image.jpg" style="opacity:0;">
</span>

Примеры (смотреть демо)


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

Эффект окружности

Простой эффект с созданием окружности.



.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

Скругленные углы

Пример со скругленными углами и добавлением тени.



.card .image-wrap {
	-webkit-box-shadow:
		inset 0 0 1px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow:
		inset 0 0 1px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow:
		inset 0 0 1px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -1px 0 rgba(0,0,0,.4);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Рельефный стиль

Добавление небольшого выступа (рельефа) в нижней части изображения.



.embossed .image-wrap {
	-webkit-box-shadow:
		inset 0 0 2px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -7px 0 rgba(0,0,0,.6),
		inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow:
		inset 0 0 2px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -7px 0 rgba(0,0,0,.6),
		inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8),
		inset 0 2px 0 rgba(255,255,255,.5),
		inset 0 -7px 0 rgba(0,0,0,.6),
		inset 0 -9px 0 rgba(255,255,255,.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Рельефный стиль со сглаживанием

Тот же эффект, но с размытием нижней границы в 1px.



.soft-embossed .image-wrap {
	-webkit-box-shadow:
		inset 0 0 4px rgba(0,0,0,1),
		inset 0 2px 1px rgba(255,255,255,.5),
		inset 0 -9px 2px rgba(0,0,0,.6),
		inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow:
		inset 0 0 4px rgba(0,0,0,1),
		inset 0 2px 1px rgba(255,255,255,.5),
		inset 0 -9px 2px rgba(0,0,0,.6),
		inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow:
		inset 0 0 4px rgba(0,0,0,1),
		inset 0 2px 1px rgba(255,255,255,.5),
		inset 0 -9px 2px rgba(0,0,0,.6),
		inset 0 -12px 2px rgba(255,255,255,.3);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Врезанный стиль

Используя свойство box-shadow можно делать эффект врезанного в плоскость изображения.



.cut-out .image-wrap {
	-webkit-box-shadow:
		0 1px 0 rgba(255,255,255,.2),
		inset 0 4px 5px rgba(0,0,0,.6),
		inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow:
		0 1px 0 rgba(255,255,255,.2),
		inset 0 4px 5px rgba(0,0,0,.6),
		inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow:
		0 1px 0 rgba(255,255,255,.2),
		inset 0 4px 5px rgba(0,0,0,.6),
		inset 0 1px 0 rgba(0,0,0,.6);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

Морфинг и подсветка

В этом примере добавляется свойство transition. При наведении мыши происходит подсветка изображения и изменение его формы до окружности. Эффект подсветки создается благодаря свойству box-shadow.



.morphing-glowing .image-wrap {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.morphing-glowing .image-wrap:hover {
	-webkit-box-shadow:
		0 0 20px rgba(255,255,255,.6),
		inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow:
		0 0 20px rgba(255,255,255,.6),
		inset 0 0 20px rgba(255,255,255,1);
	box-shadow:
		0 0 20px rgba(255,255,255,.6),
		inset 0 0 20px rgba(255,255,255,1);
	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

Эффект глянца

Пример с наложением градиента на верхнюю часть изображения. Достигается за счет использования псевдоэлемента :after.



.glossy .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.glossy .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
	background:
		-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%,
		rgba(255,255,255,.1) 100%);
	background:
		-webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.7)),
		color-stop(100%,rgba(255,255,255,.1)));
}

Эффект отражения

Еще один пример с использованием градиента, но на этот раз для создания эффекта отражения.



.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
	background:
		-webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(0,0,0,.3)),
		color-stop(100%,rgba(255,255,255,0)));
}

.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

Глянец и отражение

Комбинирование двух выше описанных эффектов.



.glossy-reflection .image-wrap {
	-webkit-box-shadow:
		inset 0 -1px 0 rgba(0,0,0,.5),
		inset 0 1px 0 rgba(255,255,255,.6);
	-moz-box-shadow:
		inset 0 -1px 0 rgba(0,0,0,.5),
		inset 0 1px 0 rgba(255,255,255,.6);
	box-shadow:
		inset 0 -1px 0 rgba(0,0,0,.5),
		inset 0 1px 0 rgba(255,255,255,.6);
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.glossy-reflection .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
	background:
		-moz-linear-gradient(top, rgba(255,255,255,0.7) 0%,
		rgba(255,255,255,.1) 100%);
	background:
		-webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(255,255,255,0.7)),
		color-stop(100%,rgba(255,255,255,.1)));
}

.glossy-reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background:
		linear-gradient(top, rgba(230,230,230,.3) 0%,
		rgba(230,230,230,0) 100%);
	background:
		-moz-linear-gradient(top, rgba(230,230,230,.3) 0%,
		rgba(230,230,230,0) 100%);
	background:
		-webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(230,230,230,.3)),
		color-stop(100%,rgba(230,230,230,0)));
}

Эффект ленточки

Использование псевдоэлемента :after для создания эффекта ленточки в верхней части изображения.



.tape .image-wrap {
	-webkit-box-shadow:
		inset 0 0 2px rgba(0,0,0,.7),
		inset 0 2px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.5),
		0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow:
		inset 0 0 2px rgba(0,0,0,.7),
		inset 0 2px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.5),
		0 1px 3px rgba(0,0,0,.4);
	box-shadow:
		inset 0 0 2px rgba(0,0,0,.7),
		inset 0 2px 0 rgba(255,255,255,.3),
		inset 0 -1px 0 rgba(0,0,0,.5),
		0 1px 3px rgba(0,0,0,.4);
}

.tape .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	background:
		-moz-linear-gradient(top, rgba(254,243,127,.6) 0%,
		rgba(240,224,54,.6) 100%);
	background:
		-webkit-gradient(linear, left top, left bottom,
		color-stop(0%,rgba(254,243,127,.6)),
		color-stop(100%,rgba(240,224,54,.6)));
}

Морфинг и тонирование

При наведении указателя мыши на картинку мы добавляем радиальный градиент используя псевдоэлемент :after.



.morphing-tinting .image-wrap {
	position: relative;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}

.morphing-tinting .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}

.morphing-tinting .image-wrap:hover:after  {
	background:
		-webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80,
		from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	background:
		-moz-radial-gradient(50% 50%, circle,
		rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

Эффект окружности с размытием краев

Радиальный градиент можно также использоваться в качестве маски для создания эффекта сглаженных краев.



.feather .image-wrap {
	position: relative;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}

.feather .image-wrap:after  {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:
		-webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70,
		from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
	background:
		-moz-radial-gradient(50% 50%, circle,
		rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

Смотреть демо

Кроссбраузерность


Эти примеры работают во всех браузерах (Chrome, Firefox и Safari), с поддержкой свойств border-radius, box-shadow и псевдоэлементами :before и :after. В остальных браузерах мы просто увидим картинки, без каких либо эффектов.
Перевод: WebDesignerWall
Илья @ilyafd
карма
73,3
рейтинг 0,0
Front-end разработчик и дизайнер интерфейсов
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (51)

  • +18
    Кстати в webkit есть свойство box-reflect для создания эффекта отражения. Пример использования:

    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

    Довольно удобно использовать при написании расширений под Chrome.
  • 0
    Спасибо, в мемориз!
    • +4
      Пожалуйста.
      • 0
        Я вчера собирался-собирался перевести, но так и не собрался. Как чувствовал, что не только мне понравится :)
  • 0
    Ох как же меня радует, когда не нужно использовать сторонние библиотеки (jquery corner). А все просто и легко.
  • +1
    Спасибо больше, замечательная статья.
    PS: В IE как всегда есть проблемы: плавная трансформация не работает, объект мгновенно принимает другую форму при наведении мышки, но и это уже прогресс.
    • 0
      в девятом?
      • 0
        Да.
  • +10
    >> Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.

    Еще можно для img прописать display:block — тогда скругления и тень тоже работают.
    • 0
      За исключением Оперы, к сожалению (проверял в 11.51).
  • 0
    Firefox не хочет делать углы скругленными...

    Видимо на момент написания статьи это и было справедливо, но в Firefox 6.0.2 всё отображается правильно.
    • 0
      Вы не путаете пример, где всё исправлено, с собственно неисправленной версией?
      • 0
        Ну там ведь собственно написанно где не исравленная версия. Вот что у меня показывает FF:
        image
        • +1
          FF7 показывает то же самое
          • 0
            А в хроме почему-то анимации «дрожат». Забавно кстати сравнивать
  • +2
    Эти примеры работают во всех браузерах (Chrome, Firefox и Safari), с поддержкой свойств border-radius, box-shadow и псевдоэлементами :before и :after. В остальных браузерах мы просто увидим картинки, без каких либо эффектов.


    А как же Opera? В ней всё тоже работает.
    • +2
      Там, где живёт и работает автор, Opera — это мобильный браузер ).
      • +2
        А эксплорера в тех краях тоже нет?
      • 0
        Кстати, что не так с этими свойствами в мобильной Опере?
  • –2
    К сожалению, пока есть ИЕ7-8, все эти замечательные красоты остаются лишь демонстрацией возможностей css3.
    • +1
      Вот как раз эти красоты можно использовать для оформления всяких мелочей. Люди с нормальными браузерами их увидят, рабы IE — увидят просто картинки, но смысл не потеряется.
      • –4
        Согласен, но только если речь идёт о своём хоумпейдже для кота. Для реальных проектов не годится. И что есть мелочь?..
        • +1
          Мелочь — это, например, картинка в тексте какой-нибудь внутренней страницы. Она нормально выглядит и со скругленными краями, и без, но сегодня скругленные края это модно в определенных кругах. Верстать уголки вручную в этом случае бред, подтягивать какие-нибудь скрипты для старых ослов, которые этого осла ещё и тормознут — а зачем? Мягкая регрессия в старых версиях — это наилучший вариант обратной совместимости.
      • +1
        *Для реальных проектов не всегда годится.
    • –2
      они есть пока есть такие как ты — кто их поддерживает.
      • –3
        Так и представляю, приходит верстальщик с менеджером к клиенту, и говорит: «Такие-то браузеры мы поддерживать не будем, потому что они старые». Извините, господа, это смешно. Заговнокодить по-быстрому на фрилансе 10 страниц — это одно, а когда вы работаете над проектом, которым пользуется миллион человек и столько же он приносит прибыли — все эти техники стоят по рублю за пучок. И если в таком случае разработчик говорит, что он этого делать не будет — он не профессионал, и гнать его нужно в шею. Если ты специалист — будь добр, сделай то, что от тебя требуют в наилучшем виде, чтобы качественно решить поставленную задачу.
        • +2
          Я работаю в проекте которым пользуется с десяток миллионов пользователей:

          ie6 — no
          ie7-8 — уголки не скруглены, градиентов нет.
          • 0
            Это значит лишь, что ваша работа не подразумевает идентичного отображения во всех популярных браузерах, видимо, потому что ваш клиент не требует этого. Но клиенты бывают разные, и, скажем, приходит к вам мобильный оператор, и слушать он не будет ничего о gracefull degradation. На что имеет полное право. И как профессионал, вы обязаны удовлетворить его требования.
            Я сам с удовольствием использую техники и методы, которые возможны с помощью CSS3, когда задача позволяет такое решение.
            Что касается конкретно всех этих вкусностей, было бы неплохо просто описать, какие есть варианты решения задачи для ие7-8, тогда метод можно считать целостным.
            • 0
              Полностью поддерживаю. Часто клиента вобще не волнует браузер, он и сам не проверяет ничего, главное чтоб QAи сказали что проблем нет.
              • 0
                Может бразуер и не волнует, но затраты на разработку волнуют очень даже.
            • 0
              Тут основной нюанс в том, что разница во времени реализации тех или иных фич для IE6 и для всех остальных нередко может быть в десятки раз. Если у заказчика бюджет не резиновый — он чаще всего от IE6 в итоге отказывается.
              • 0
                К сожалению IE 7 тоже достаточно уебищен. Но от него сейчас редко отказываются
        • +9
          Не вижу ничего смешного. У каждого есть выбор. У верстальщика поддерживать корявый IE или нет. А у заказчика выбор верстальщиков которые поддерживают IE или нет, а так-же выбор нужны ли ему такие консервативные и недалекие пользователи юзающие древние браузеры.
          И если разработчик говорит что он этого поддерживать не будет это не значит что он не профессионал, это значит то что он этого поддерживать не будет и все. Он не обязан поддерживать IE(если он конечно на это не подписался).
          Если ты специалист — будь добр, сделай то, что от тебя требуют в наилучшем виде, чтобы качественно решить поставленную задачу.
          Я им не слуга и не робот и могу выбирать за что мне браться а за что не браться. Если фигурирует поддержка IE то я принципиально не берусь пусть костыли пишут те кто это любит или кто ради денег сделает что угодно. К счастью, в последнее время для «поддержки IE» порой достаточно уведомить юзера что у него браузер устарел и показать ссылки для скачивания нового — и заказчикам этого достаточно.
          • +1
            То-же самое но короче — у всех есть выбор как у заказчиков так и у верстальщиков: кататься на велосипедах с костылями под мышками, либо не оглядываться назад и идти вперед и осваивать\продвигать новые технологии.
          • 0
            Идея про обновление браузера конечно супер, но я уверен, что большая часть потенциальных клиентов отсеится на этом этапе, а как следствие и прибыль.
            • –1
              Поддержание устаревших браузеров стоит дороже, как в разработке, так и в сопровождении. А теперь еще раз поговорим про прибыль. Стоит ли овчина выделенки?
              • +1
                Все зависит от предполагаемой аудитории. Конечно, если у вас ресурс типа Хабра, то вероятность встретить тут пользователя IE6/7 близка к нулю. А если вы делаете Одноклассники, то мне вас жаль, но большинство клиентов будет приходить именно с IE
                • 0
                  Ну и сколько вы предлагаете поддерживать IE6? Это же порочный круг. Пока его будут поддерживать, его нужно будет поддерживать. Не похоже ли это на дармовой хлеб верстальщиков? Т.е. пока проблема существует, суперпрофессионалы имеющие опыт в общении с IE6 будут нужны. Вот они и цепляются…
                • 0
                  И ничего страшного в том, чтобы с прискорбием сообщить посетителю на IE6, что пора обновляться. Если посетителю интересен сайт, он обновится, а если нет, то и смысла его удерживать нет.
                • 0
                  Даже ВКонтакте с его куда большей аудиторией более не поддерживает IE6/IE7. Какие уж тут Одноклассники…
                  • 0
                    Аудитория Вконтакте в основном прогрессивная школота, а у Одноклассников люди, для которых интернет — это синяя буквочка «е»
                    • 0
                      Разве подавляющее большинство владельцев аккаунта на Одноклассниках не имеет аккаунта ВКонтакте?
                  • 0
                    А вобще я ведь не спорю. Я бы вобще запретил все браузеры которые не умеют обновляться самостоятельно в фоне и на стандарты не обращают внимания. Порой под оперу верстать куда сложнее чем под ие
  • +1
    Загонять изображение в background-image — та ещё идейка. С одной стороны это предохраняет изображения от воровства тупыми секретаршами, которым тупой босс дал команду «воруй». Но с другой — ваши картинки, например, не попадут в поиск по картинкам, так же их по-дефолту не будет видно при печати страницы. Кроме того, background изображения сложно ресайзить.
    • +1
      img {display:block}
    • +2
      Картинки в индекс попадут. Они есть в коде демо-примера, нужно только добавить alt.
    • 0
      Там js же.
      Поисковик отработает как положено. Для печати тоже можно подготовить спец версию страницы.
  • –2
    Все это конечно няшно, но в массы это войдет как минимум верез год-два, проще сейчас сделать через imagemagic. Это при условии что вы заботитесь о своих посетителях, некоторые из которых еще сидят на ие 6.
    • 0
      И что, отсутствие круглых няшных уголков у картинок не позволит этим посетителям почитать ваши статьи/купить у вас товар/...?
  • 0
    Актуальная тема. Сегодня как раз использовал именно это решение для закругления.
  • 0
    Попросили добавить этот коммент:

    ===
    $(function (){
    var avaTar = $(«img»);
    $(window).load(function() {
    avaTar.wrap(function(){
    return '<span class=«img_rounted» style=«position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;» />';
    });
    avaTar.css(«opacity»,«0»);
    });
    });

    Cмысл в том, что опера почему то не всегда исполняет приведённый там скрипт, погуглил немного — это её баг, особо не разбирался. но решение именно в $(window).load(function()
    может конечно можно ещё оптимизировать это дело, но мне было лень — не настолько я силён в js.
    ===

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