Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

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


alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;" />


Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:


alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;" />


Если вместо

align="left"

написать

align="right"

картинка будет прижиматься к правому краю, а текст слева будет подходить к ней вплотную.

Отступ текста от краев картинки в данном случае задается css-стилем

margin: 3px 12px 0px 0px;

Параметры отступа здесь указываются по часовой стрелке, начиная с отступа картинку сверху (3px), затем отступ от картинки справа (12px) и т.д.

Способ 2: Задаем отступы сразу для всех картинок в блоке одним классом css

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

Если фотографии или другие изображения нужно вставлять в тексты статей постоянно, при этом отступы между картинками и текстом всегда одни и те же, нет смысла прописывать стиль css для каждой картинки отдельно. Намного удобнее один раз описать отступы от картинки для текста и других изображений, размещенных в таком блоке. Классический вариант – вставка иллюстраций в текст статьи своего блога.

Для начала находим имя класса css, который описывает блок текста статьи, в html-коде страницы. Рекомендую открыть код страницы из браузера, найти там текст статьи с картинками, которым мы хотим задать отступы, и найти название класса css, который описывает стиль для текста статьи. Убедитесь, что этот css-класс не задает стиль заголовка, шрифт категории или еще что, а касается именно текста статьи:

Далее, в основном файле стилей css (обычно style.css) находите имя нужного класса (на примере его имя entry) и добавляете в файл описания стилей дополнительный класс, задающий поведение картинок (IMG) в нужном блоке:


.entry img {
margin: 3px 12px 0px 0px;
}


Обратите внимание на обязательную точку перед именем класса (у вас он, вероятно, будет называться не entry, как в моем шаблоне WordPress), пробел между именем css-класса и словом img, которое означает, что все инструкции класса относятся только к картинкам, находящимся внутри блока entry.

Числа, задающие отступ от картинки для текста и других изображений в статье, естественно, можно ставить свои. Первый параметр после дерективы margin задает отступ картинки сверху, далее отступ справа, затем отступ снизу и последний параметр – отступ картинки от правого края.

После изменения своего файла стилей с расширением .css его следует перезалить на свой сайт по ftp. В результате автоматически изменится отступ для всех картинок во всех статьях сайта/блога, стиль которых задается измененным css-классом.

Оба эти формата обеспечивают максимальное качество хранимой информации при ее минимально возможном объеме, т.е. скорости загрузки на компьютер пользователя сети. Разница между форматами GIF и JPG состоит в том, что они ужимают и хорошо показывают информацию разных типов.

Формат JPG (JPEG) лучше всего подходит для того, чтобы хранить фотографии, картины, яркие рисунки с плавным переходом одного цвета в другой (градиенты). Сохраняя информацию в формате JPEG, вы сами определяете, что вам важнее – четкость и достоверность графики или скорость, с которой ваши фотографии смогут отправляться по почте или загружаться с online-фотоальбомов и блогов.

Пример графики, которую нужно сохранять в JPG:

Формат GIF предназначен для хранения одноцветных или черно-белых рисунков, схем, иконок, логотипов, флажков и т.п. Если цветов и оттенков на рисунке меньше, чем 256 и при этом важна четкость линий и равномерность цвета, картинку следуют сохранять в формате GIF.

Пример графики, которую желательно сохранять в формате GIF:

Формат GIF, в отличие от JPG, позволяет создавать анимационные изображения. До появления flash и silverlight возможность создавать последовательность из gif-картинок в одном файле была единственным средством создания анимированных баннеров. Впрочем, gif-баннеры популярны до сих пор из-за своей простоты и сравнительно низкой цены: с их помощью рекламируют и курсы парикмахера в Киеве, и разработку сайтов, и продажу дорогих автомобилей.

Рассмотрим на примере, чем отличается gif от jpg. Выберем рисунок и фотографию, сохраним каждый сначала в gif, потом в jpg форматах и посмотрим, как изменится качество изображения и вес картинки в Кб.

Начнем с фотографии. Ее нужно сохранять в JPG, а не в GIF, потому что на фотографиях цветов и оттенков гораздо больше, чем 256, которые способен отображать формат GIF. Увеличим фотографию в 3 раза и посмотрим, как отразится на фотографии сохранение в GIF и JPG:

Фотография, которую мы сохранили в правильном для такого типа изображений формате JPG, выглядит заметно лучше (искажения связаны только с уменьшением скрина для статьи) и загрузится в полтора раза быстрее, чем та же фотография, сохраненная в формате GIF.

Теперь рассмотрим, что случится с рисунком, у которого мало цветов и нет градиентов, когда мы его сохраним в GIF и JPG:

Рисунок в формате GIF выглядит четко и без малейших разводов, при этом весит в 2,5 раза меньше.

Может показаться, что для современного интернета такие величины незначительны, а без увеличения искажения при сохранении в неправильном формате незаметны. На самом деле это не так. Когда на сайте много некачественной графики, а у вас качественный и правильно настроенный монитор, искажения отлично видно. А загрузка сайта с неправильно сохраненной графикой, особенно, если это элементы верстки, может занимать в 2 раза больше времени. При этом существенно увеличивая нагрузку на сервер хостера, а значит, и цену за хостинг. Кроме того, пока не у всех пользователей интернета безлимитные тарифы скоростного интернета.

Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Многие графические элементы на этом сайте, включая меню, меняют цвет или форму при наведении на них указателя мышки. Получается достаточно весело, оригинально и в то же время не утомительно. Рассмотрим подробнее, как это сделано, на примере пункта меню «english».

Бесплатно скачать коды урока интерактивной CSS-анимации

1. Подготовка картинок. Идея такой двухкадровой анимации проста: во время верстки сайта нарезаются картинки двойного размера. Одна картинка содержит сразу 2 кадра анимации: верхний (неактивный, который видно сразу после загрузки страницы) и нижний (активный, который мы увидим вместо неактивного, если наведем на картинку указатель мыши):

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

2. Описываем анимацию в классах CSS. В файл со стилями CSS, например, style.css, вписываем 3 css-класса, которые будут управлять поведением нашего интерактивного пункта меню:


.english {
margin: 0px; /* без отступа снаружи ячейки */
padding: 0px; /* без отступа внутрь ячейки */
width: 154px; /* ширина картинки */
height: 45px; /* высота картинки */
background-image: url(../img/english.gif); /* относительный путь к двухкадровому изображению */
background-repeat: no-repeat; /* фон не должен повторяться */
float: right; /* плавающий блок с выравниванием вправо */
overflow: hidden; /* обрезать содержимое, если оно больше указанных размеров */
}

.english a:hover {
width: 154px;
height: 45px;
background-image: url(../img/english.gif);
background-repeat: no-repeat;
background-position: 0px -45px; /* показывать нижний кадр, сместив вверх половину картинки */
float: right;
}


Первый класс CSS english задает общий стиль для ячейки, в которой будет находиться этот графический пункт меню, второй класс english a описывает стиль ссылки (картинка будет являться ссылкой) и третий класс english a:hover задает смещение вверх двухкадрового изображения при наведении на картинку указателя мыши.

3. Код HTML для вставки анимации на страницу сайта. Остался последний маленький штрих – связать созданную ранее двухкадровую картинку и код CSS с HTML-страницей, на которой должна находится наша интерактивная анимация:

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

По сравнению с анимацией JavaScript способ создания двухкадровой анимации с помощью стилей CSS имеет ряд преимуществ:

1. Более простой и понятный код.

2. Картинка загружается сразу вся, потому нет задержек при подгрузке второго кадра с помощью JavaScript.

3. Анимация будет работать в любом случае, даже если в браузере пользователя отключена возможность выполнения скриптов JavaScript или запрещена анимация flash и gif.

4. Анимация с помощью CSS одинаково работает во всех браузерах, выпущенных даже 5 лет назад.

5. Смена кадров при наведении указателя мышки происходит мгновенно, нет никакой задержки даже на самых слабых компьютерах.

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

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.

Чтобы код CSS понял только браузер IE нужно между свойством класса и значением свойства ставить не двоеточие, а знак равно. Другие браузеры, кроме Internet Explorer, такую команду проигнорируют, поскольку такая запись не описана в стандартах верстки W3C. Чтобы было понятнее, рассмотрим два практичных примера описания стиля CSS.

Пример 1: Как задать отступ блока только для IE

.example1_css_style {
margin-left: 20px;
margin-right=45px;
margin-top: 10px;
}

В этом классе первая строчка приказывает всем браузерам сделать отступ слева на 20 пикселей, а вторая – отступ на 45 пикселей справа, но только для Internet Explorer. Во всех остальных браузерах, кроме IE, отступа справа не будет.

Пример 2: Как задать разные значения одного и того же свойства CSS для каждого браузера

.example2_css_style {
margin: 0px 0px 0px 0px;
margin= 22px 22px 0px 0px;
}

В этом примере стиля CSS сначала все браузеры, в т.ч. и Internet Explorer, устанавливают нулевые отступы для блока. А во второй строчке только Internet Explorer делает отступы по 22 пикселя сверху и справа, другие браузеры эту команду не понимают и игнорируют. Т.е. для IE свойство стиля margin задается 2 раза, второй раз перезаписывая предыдущий, а для других браузеров – один раз, первый.

Вот такой простой пример того, как можно немного подправить верстку для разных типов браузеров с помощью CSS. Конечно, злоупотреблять им не стоит, иначе неоднозначности при описании вложенных стилей будут накапливаться, что приведет к появлению труднообнаружимых ошибок. Но для корректировки стилей CSS на последнем уровне вложенности, когда совсем не получается объяснить IE, что он не прав, применять эту хитрость можно. Пока опыта верстки сайтов не будет достаточно, чтобы интуитивно избегать возможных неоднозначностей в своем коде.

1. JPEG: фотографии и красочные рисунки

JPEG – очень популярный формат представления графики в интернет. Фотографии, картины, рисунки высокого качества с большим количеством цветов – все это сохраняется с расширением .jpg. Формат способен отображать 16,7 миллионов оттенков. Прозрачность и анимация не поддерживаются.

Качество изображения зависит от степени сжатия файла: чем больше ужат файл, тем хуже картинка, но зато меньше размер самого файла. Потому хранение фотографий в JPEG – это компромисс между качеством изображения и его размером. На сильно ужатом файле этого формата появляются размытые области, теряется контрастность. Качество картинки теряется с каждым новым сохранением файла в JPEG, потому хранить промежуточные результаты работы нужно в формате, который не влияет на качество изображения. Например, в PSD.

Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.

2. GIF: хранение контрастных рисунков + анимация

Формат GIF уменьшает размер своей графики без потери качества за счет уменьшения количества цветов на рисунке. Максимум цветов может быть 256, но этого хватает для сохранения логотипов, схем, надписей и контрастных рисунков.

Формат GIF поддерживает прозрачность, но прозрачность только одной градации: нельзя сделать пиксель прозрачным на 20% или на 77%. Он может быть или прозрачным, или непрозрачным.

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

3. PNG: четкость изображения и частичная прозрачность

Графический формат PNG разрабатывался как альтернатива защищенному патентом и не поддерживающему переменную прозрачность формату GIF. Формат PNG сочетает лучшие качества форматов для интернета JPEG и GIF: сжимать изображение, оставляя только нужные цвета, при этом обеспечивая четкость и контрастность для графики. В большинстве случаев изображение в формате PNG занимает меньше места, чем оно же в JPEG (кроме фотографий) или в GIF (кроме крошечных изображений с несколькими цветами).

Изображения в PNG можно сохранять, используя или 8 бит (PNG-8) или 24 бита (PNG-24).

Результаты сохранения картинки в PNG-8 и GIF мало чем отличается. Оба формата альфа-прозрачность не поддерживают. Обычно файл в PNG-8 весит чуть меньше, чем в GIF, если нужно сжимать области постоянного цвета с сохранением четкости линий в больших картинках. Т.е. сохранять в PNG-8 лучше логотипы, иллюстрации с текстом, карикатуры, схемы и т.п.

PNG-24, как и формат JPEG, позволяет сохранять насыщенную графику, градиенты, изображение не теряет яркости, оттенков и четкости. В нем можно хранить и фотографии, но в JPEG они обычно занимают меньше места. Формат PNG-24, как и форматы GIF и PNG-8, сохраняет четкость деталей в штриховой графике, логотипах и иллюстрациях с текстом. Кроме того, PNG-24 поддерживает альфа-прозрачность, т.е. прозрачность может быть частичной. К сожалению, этим важным свойством формата пока не получится воспользоваться – браузеры Internet Explorer младше 7й версии не поддерживают частичную прозрачность в PNG-24.

4. ICO: формат для иконок

Формат ICO специально разработан для хранения иконок – маленьких изображений с простой графикой. Формат ICO ужимает файл за счет потери цветов. Разводов, характерных для изображений в JPEG, нет. Иконки, сохраненные в формате ICO, Windows отображает сразу, дополнительная программа просмотра не нужна. Это свойство формата ICO активно используется в браузерах, интернет-пейджерах для отображения иконок возле адресной строки, в избранном, закладках и т.п.

Наиболее популярным применением формата ICO является изготовление иконок favicon.ico для сайтов и блогов. Для создания иконок и конвертации иконок в ICO из других форматов разработано множество специальных программ. Кроме того, можно обойтись только программой Adobe Photoshop, если установить специальный плагин для сохранения файлов в формате ICO. Без установки этого плагина Фотошоп не умеет сохранять файлы в ICO.