Как сделать картинку внутри картинки в фотошопе

Как сделать картинку внутри картинки в фотошопе

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

Хотелось бы узнать подробнее как растягивать фоновую картинку на все окно браузера (см. metrostroy.com).

Само растягивание картинки делается довольно просто:

<img src="myimage.jpg" style="width:100%; height:auto;" />

Однако «боевое» применение этого метода куда сложнее и интереснее.

Почему это работает

В спецификации CSS есть такое понятие как replaced element – элементы, которые заменяются на внешние ресурсы. На таких элементах действуют специальные правила для расчетов размеров. В частности, если задан только один габарит (например, ширина), то другой габарит должен быть рассчитан исходя из пропорций исходных размеров и пиксельного значения первого габарита. В примере, указанном выше, браузер сначала высчитывает пиксельную ширину элемента, затем домножает его на пропорцию ширины и высоты — результатом является новая высота, которая указывается элементу.

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

Растягивание блоков

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

<div style="width:30%; padding-bottom: 30%; background: red"></div> Сглаживание картинки в IE

Есть два способа сделать растягивающуюся картинку сглаженной. Самый простой способ: указать картинке CSS-свойство -ms-interpolation-mode:bicubic;, работает в IE7+. Но у него есть очень серьезный недостаток в виде резкого снижения производительности браузера.

Второй способ основан на использовании фильтра AlphaImageLoader (да, его можно применять не только для отображения полупрозрачных PNG). Для этого нужно сделать дополнительную прозрачную картинку по размерам оригинальной картинки, растянуть ее выше указанным способом, а оригинальную картинку наложить фильтром, указав в качестве параметра sizingMethod=scale.

<img src="stub.png" style="width:100%; height:auto; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='myimage.jpg', sizingMethod='scale');" /> Проблемы использования

Самой главной проблемой использования растягивающихся картинок — это очень сильное снижение производительности браузера (см. Производительность браузеров в зависимости от верстки). На том же МосМетроСтрое в FireFox 3 даже обычная прокрутка тормозила, не говоря уже о JS-анимации. От этого можно избавится, но довольно сложным способом. Я делал так: создавал <canvas>, в котором рисовал растянутую картинку, в этом случае ничего не тормозило. Во время растягивании окна браузера canvas меняется на растягивающуюся картинку, а после завершения ресайза заново отрисовываю canvas и меняю картинку на него.

Влияет ли валидная верстка (This document was successfully checked as XHTML 1.0 Strict!) на производительность (в огромных сайтах)? И хотелось бы получить парочку советов по ускорению загрузки сайта и рендеринга страницы. Какие вы используете техники в этом плане?

Каких-то интересных исследований на эту тему я не видел. В теории, XHTML-разметка должна парситься быстрее. Однако стоит помнить об одной очень важной вещи: чтобы включить настоящий XHTML, сервер должен послать заголовок Content-type: application/xhtml+xml (по умолчанию шлется Content-type: text/html) — только в этом случае современными браузерами будет использован XHTML-парсер. Однако следует помнить, что:

пользователи IE (как минимум 6 версии) вместо страницы увидят XML-дерево; браузер станет чувствителен к ошибками: например, если кто-то напишет <br>, браузер вместо страницы отобразит парсерную ошибку (то есть все нахрен развалиться); очень сильно поменяется работа с DOM; в частности, Джон Ресиг — разработчик jQuery — только планирует включить поддержку XHTML в jQuery, сейчас она в большинстве случаев будет выдавать ошибку.

Резюмируя вышесказанное: если вы просто поставите XHTML-доктайп, то сильного прироста в производительности не заметите, так как парсинг все равно будет работать по правилам HTML. Если хотите true XHTML, то готовьтесь к большим проблемам.

В верстке я пользуюсь в основном двумя правилами: использовать меньше элементов и делать неглубокую вложенность элементов. Это, как правило, влияет на JS-анимацию. Куда интереснее в этом плане выглядит написание CSS-правил, что действительно может повлиять на производительность на очень больших сайтах. Советую посмотреть выступление Дэвида Бэрона из Mozilla на эту тему.

Comment (RSS)  |  Обратная ссылка


Как сделать картинку внутри картинки в фотошопе

Похожие записи:



Макияж под кремовое вечернее платье

Как сделать быстро кабачковую икру с майонезом

Молитва для вязания красной нити на запястье