Css оформление картинок – Оформление изображений на сайте

CSS работа с изображениями

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

Использование тега img

Тег img — стандартный способ добавления изображений на сайт.

Тег снабжен атрибутами:

• src — путь к изображению
• alt — текстовое описание изображения, показывается, когда сайт по каким-либо причинам не отображает контент.

Для масштабирования используются стандартные css свойства: width и height.

Пример:

.example_image {
  width: 300px;
  height: 200px;
}

<img src="http://webninja.ru//media/blog/example_image_1.jpg" alt="Изображение в теге img">

Использование фонового изображения

Пример:

.example_image_1 {
  width: 300px;
  height: 200px;
  background: url(http://webninja.ru//media/blog/example_image_1.jpg) center no-repeat;
}
 

Свойство center выравнивает фон по горизонтали и по вертикали, а no-repeat запрещает повторение изображения.

Но зачастую изображение отличается по размеру и пропорциям от контейнера, а его необходимо растянуть по всей его площади. Для этого используют background-size с параметром cover.

Пример:

Со свойством background-size: cover:

.example_image_2 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: cover;
} 

Если необходимо чтобы изображение занимало максимальную площадь контейнера, но при это не обрезалось используется background-size с параметром contain.

Пример:

Со свойством background-size: contain:

.example_image_3 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: contain;
} 

Также с помощью background-size можно задавать конкретный размер изображения.

Пример:

.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat; 
  background-size: 131px 112px; 
}

Еще можно добавить фоновый цвет контейнеру.

Пример:

.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat ##1f1f1f; 
  background-size: 131px 112px; 
} 

webninja.ru

Красивое оформление картинок через css

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

Итак, поехали.

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

Css и html код:

<div>
  <div>
   <div><span>Красивая картинка</span></div>
   <img src="/images/demo.jpg" alt="">
  </div>
 </div>

.block { /*контейнер для фотографий*/
 display: block;
 position: relative;
 cursor: pointer;
 overflow: hidden;
 max-width: 800px;
 margin: 0 auto;
}

.text {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: -34px;  
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text{
 top: 0;
}
/*эффект при наведении*/
.block:hover .text .value{
 margin-left: 40%;
}
 

Красивая картинка

Здесь важно отметить несколько принципиальных моментов. Эффект в общем-то не так уж и плохой, однако есть одно обстоятельство, которое некоторым образом портит от него впечатление – это свойство margin-left, которое срабатывает при наведении на блок с картинкой. Дело в том, что значение, которое выставлено в данном случае не является обобщенным, соответственно, в случае, если мы надпись над картинкой будет несколько шире – изменятся пропорции и эффект уже не будет красиво смотреться.

Рассмотрим второй вариант. Здесь будет работать свойство opacity.

.text-opacity {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: 0;
 text-align: center;
 padding: 10px 0;
 opacity: 0;/*изначально текст скрыт*/
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text-opacity {
 opacity: 1;
} 

<div>
  <div>
   <div>Красивая картинка</div>
   <img src="http://pavelpage.ru/http://pavelpage.ru/http://pavelpage.ru//images/photos/eternal/sunset_new4.jpg" alt="">
  </div>
 </div>

Красивая картинка

Ну и последний случай, где текст, изначально спрятан с помощью свойства top.

.text-top {
 position: absolute;
 background-color: #C5EAF5;
 width: 100%;
 top: -38px;/* выставляем значение таким образом, чтобы текст не было видно*/
 text-align: center;
 padding: 10px 0;
 -webkit-transition: all 0.2s linear 0.2s;
 -moz-transition: all 0.2s linear 0.2s;
 -o-transition: all 0.2s linear 0.2s;
 transition: all 0.2s linear 0.2s;
}

/*эффект при наведении*/
.block:hover .text-top {
 top: 0;
} 

<div>
  <div>
   <div>Красивая картинка</div>
   <img src="http://pavelpage.ru/http://pavelpage.ru/http://pavelpage.ru//images/photos/eternal/sunset_new4.jpg" alt="">
  </div>
 </div>

Красивая картинка

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

На этом пока все. Спасибо за внимание!

pavelpage.ru

20 впечатляющих CSS3 примеров, техник и библиотек

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

Спасибо http://tutorialzine.com и рекомендую:

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

Демо Ι Скачать

CSS 3D облака

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

Перейти

Логотипы на чистом CSS

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

Перейти

Алфавит с CSS анимацией

Перейти

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Перейти

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Перейти

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Перейти

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Перейти

Размытие на CSS

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

Перейти

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Перейти

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

Перейти

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

Перейти

CSS формы

Пост о CSS формах с многочисленными примерами

Перейти

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Перейти

Анимация — Animate.css

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

Перейти

Индикаторы загрузки — Spinkit

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

Перейти

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Перейти

Генератор для создания переключателей

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

Перейти

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Перейти

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Перейти

beloweb.ru

CSS: иллюстрации & подписи

Смотрите также указатель всех приёмов работы.

На этой странице:

Иллюстрации & подписи

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

В HTML5 включен новый элемент для вставки иллюстрации с подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)

<figure>
  <p><img src="http://www.w3.org/http://www.w3.org/eiffel.jpg"
   
    alt="Эйфелева башня">
  <figcaption>Масштабированная
    модель Эйфелевой башни в Парке
    Мини-Франция</figcaption>
</figure>

Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

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

Масштабирование изображения

Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).

Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:

figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

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

<figure>
  <p><img class=scaled src="http://www.w3.org/http://www.w3.org/st-tropez.jpg"
    alt="Сен-Тропе">
  <figcaption>Сен-Тропе и его форт в
    вечернем солнце</figcaption>
</figure>

А вот таблица стилей:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).

Размещение подписи сверху

Средиземное море около Кап Ферра

HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.

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

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

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

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Иллюстрации & подписи в HTML4

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:

<div class=figure>
  <p><img src="http://www.w3.org/http://www.w3.org/eiffel.jpg"
   
    alt="Эйфелева башня">
  <p>Масштабированная модель
    Эйфелевой башни в
    Парке Мини-Франция
</div>

Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения в HTML4

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

div.figure {
  min-width: 150px;
}

Сен-Тропе и его форт в вечернем солнце

Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:

<div class=figure>
  <p><img class=scaled src="http://www.w3.org/http://www.w3.org/st-tropez.jpg"
    alt="Сен-Тропе">
  <p>Сен-Тропе и его форт
    в вечернем солнце
</div>

А вот таблица стилей:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).

Размещение описания сверху в HTML4

Средиземное море около Кап Ферра

Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.

(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)

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

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Навигация по сайту

www.w3.org

HTML-изображения

HTML-изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Вставка изображений в HTML-документ

1. Тег <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

<img src="image.png" alt="Пример кода">

Для тега <img> доступны следующие атрибуты:

<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
 
  alt="Роза в моём саду">

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

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

1.2. Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Тег <area>

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

<map name="имя_карты">
<area атрибуты>
</map>

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

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

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>

html5book.ru

Стили CSS3 для изображений | Все о создании сайтов

Сегодня речь пойдет о стилях CSS3, которые можно применить к изображениям (код предоставлен в виде сниппетов, поэтому эти данные вы можете использовать в своих проектах).

Стоит отметить, что основные свойства, которые мы будем использовать — это box-shadow, border-radius и transition. Просто посмотрите на пример и увидите что у нас получилось.

Проблема

Взгляните на пример и отметьте, что на изображении применены свойства border-radius и inset box-shadow. При этом Firefox отрисовывает border-radius на элементе с изображением, но не рисует inset box-shadow. Chrome или Safari не отрисовывают border-radius и inset box-shadow.

Решение

Чтобы эти свойства заработали на элементе изображения, переведем его в background-image.

Динамический способ

Динамика достигается с помощью jQuery. С помощью скрипта все изображения будут переводиться в background-image. Техника перевода следующая — скрипт jQuery обвязывает все изображения тэгом span и применяет на них свойство background-image.

Результат

Вот что получается на выходе:

Изображение в форме круга

Теперь, когда проблема решена, мы можем с легкостью применять стили CSS3. Для начала сделаем с помощью свойства border-radius все квадратные изображения круглыми.

CSS

Карточный стиль

Данный эффект достигается с помощью множественных значений inset box-shadow.

CSS

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

С некоторыми изменениями, карточный стиль можно превратить в рельефный.

CSS

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

Это тот же самый рельефный стиль, но с добавленной сглаженностью в 1px.

CSS

Стиль врезки

С помощью свойства just inset box-shadow, вы можете сделать эффект врезки.

CSS

Стили трансформации и свечения

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

CSS

Глянец (как в Apple)

Наложение градиента глянца выполнено с помощью псевдо-элемента :after.

CSS

2web-master.ru

Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Изображения — самый яркий элемент HTML страниц. При помощи изображений мы можем привлекать внимание посетителей к той или иной информации, давать графические пояснения к текстовому контенту. Да и вообще изображения в HTML можно считать отдельным контентом. Сейчас множество сайтов, которые по своей сути являются фотоальбомами, самый популярный пример — Instagram, весь пользовательский контент в данной социальной сети — это фотографии. Поэтому нам нужно понимать, какие средства есть в HTML для работы с картинками, а так же отчего зависит отображение картинок на HTML страницах, которые создают браузеры.

Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.

По традиции во второй части вступления к статье приведу короткую аннотацию к записи, посвященной изображениям и картинкам в HTML:

• сначала мы поговорим о том, какие возможности есть в HTML для работы с картинками и изображениями;
• затем перечислим HTML атрибуты изображений;
• далее разберемся с тем, как вставить картинку в HTML документ;
• попробуем поработать с размером изображений при помощи HTML атрибутов, изменяя высоту и ширину картинки;
• изображения в глазах HTML интерпретатора — это обычный символ, как и любая буква, которую вы вводите с клавиатуры, но для символа-картинки в HTML мы можем задать определенное поведение или выравнивание, от этого зависит то, как будет вести себя текст, находящийся рядом с изображением, или как текст будет обтекать HTML картинку;
• и завершении мы разберемся с тем, как сделать картинку ссылку в HTML.

Что мы можем делать с изображениями и картинками в HTML

Содержание статьи:

Язык HTML позволяет вставлять изображения в документы. Для вставки картинок в HTML используется специальный тэг <img>. Картинки в HTML делают документы более яркими, интересными, наглядными и привлекательными для посетителей сайтов. Так же изображения могут быть использованы для оформления HTML шаблонов, но об этом мы поговорим, когда начнем изучать CSS.

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

Итак, картинки можно вставлять в HTML документ. Тэг <img> позволяет вставить в документ изображения формата jpeg, png, gif. Браузер «понимает» какое изображение нужно вставить в том или ином месте HTML страницы при помощи специального HTML атрибута <src>, который позволяет указать путь к папке, в которой находится изображение.

Стоит обратить внимание на то, что браузер обменивается с сервером информацией по протоколу HTTP при помощи специальных HTTP сообщений. Браузер или, если говорить в терминологии HTTP, клиент отправляет HTTP запрос, а сервер отправляет клиенту на его запрос специальный HTTP ответ.

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

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

HTML позволяет задавать параметры отображения картинок в документе при помощи уникальных HTML атрибутов, о которых мы поговорим чуть ниже, например, средствами HTML мы можем изменять ширину и высоту картинки, задавать правила того, как текст будет обтекать изображение, сделать рамку для изображения, установить отступы, которые будут между изображениями и другими элементами HTML страницы и многое другое. Также отметим, что тэг <img> является одиночным HTML тэгом. А элемент IMG является строчным HTML элементом.

Обо всем этом более подробно мы поговорим ниже и детально разберемся, какие средства есть в HTML для работы с картинками и изображениями.

Атрибуты изображений в HTML

Чтобы в дальнейшем не отвлекаться на пояснения, а также для того чтобы у вас появилось комплексное представление о работе с изображениями в HTML, сейчас мы приведем список уникальных атрибутов HTML изображения, вернее список уникальных атрибутов для тэга <img>. Отметим, что для тэга <img> доступны все универсальные HTML атрибуты и атрибуты событий. А теперь перечислим уникальные атрибуты картинок в HTML:

1. Атрибут align. Для изображения в HTML можно задать способ того, как текст будет его обтекать при помощи атрибута align.
2. Атрибут alt. Мы уже говорили, что картинки в HTML подгружаются после того, как браузер загрузит HTML документ. Отметим, что даже в 2016 году не в каждом населенном пункте есть широкие каналы для доступа в сеть Интернет, а сервера не всегда работают стабильно, поэтому атрибут alt, служащий для задания альтернативного текста HTML изображения, еще долго не потеряет свою актуальность. Также в некоторых браузерах отключена загрузка картинок, посетитель, у которого по тем или иным причинам не загрузилась картинка, будет видеть текст, написанный в атрибуте alt.
3. Атрибут border. Данный атрибут позволяет задать толщину рамки вокруг картинки в HTML документе.
4. Атрибут height. Данный атрибут позволяет задать высоту изображения в HTML
5. Атрибут hspace. Этот атрибут позволяет менять горизонтальный отступ между картинкой и другими HTML элементами.
6. Атрибут ismap. Данный атрибут указывает браузеру на то, что картинка в HTML документе является серверной картой-изображением.
7. Атрибут longdesc. Данный атрибут служит для того, чтобы указать адрес HTML документа, в котором содержится аннотация к изображению.
8. Атрибут lowsrc. При помощи атрибута lowsrc можно указать адрес, по которому находится картинка более низкого качества.
9. Атрибут src. Этот атрибут позволяет задать путь к изображению, браузер перейдет по этому пути, чтобы вставить картинку в HTML документ.
10. Атрибут vspace. Этот атрибут позволяет менять вертикальный отступ между картинкой и другими HTML элементами.
11. Атрибут width. Данный атрибут позволяет задать ширину изображения в HTML.
12. Атрибут usemap. Этот атрибут является ссылкой на тэг <map>, содержащий координаты для клиентской карты-изображения.

Управлять отображением картинок в HTML, конечно, можно при помощи HTML атрибутов, но, поскольку мы знаем правила о том, что содержимое должно быть отделено от оформления, то для управления отображением картинок лучше все-таки использовать CSS.

Как вставить картинку в HTML документ. Учимся добавлять изображение в документ

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

Относительный путь к файлу, в том числе и к файлу изображения, строится относительно какого-нибудь объекта, например, корня сайта или папки файловой система. А вот абсолютный путь – это такой путь, который доступен из любого места и на любом устройстве. Естественно, чаще всего для вставки изображений в HTML используют относительные пути, в отличии от HTML ссылок, но мы рассмотрим оба варианта вставки картинок в HTML.

Давайте сперва подготовим файловую систему для того, чтобы научиться вставлять картинки в HTML документ. Во-первых, на моем рабочем столе есть папка с именем «HTML», в этой папке я собираю все примеры из рубрики HTML, называя каждую папку Lesson N, где N – это номер публикации.

Для данной публикации папка с примерами называется Lesson 13. Структуру папки HTML вы можете увидеть на рисунке ниже:

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

Файл html41.png – это изображение из публикации, в которой мы говорили про HTML списки. Мы можем сказать, что папка HTML является родительской папкой для папки Lesson 13. HTML документ, в который мы будем вставлять картинку находится в папке Lesson 13, я его назвал img.html, смотрите изображение ниже.

В данной папке находится HTML документ, в который мы будем вставлять картинку

Давайте попробуем вставить изображение в документ img.html из родительской папки (изображение называется html41.png). Воспользуйтесь удобным для вас редактором (можно даже Блокнотом), но я бы рекомендовал бесплатный HTML редактор с подсветкой синтаксиса Notepad++ и создайте файл со следующим кодом:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Вставляем изображение в HTML документ</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Учимся добавлять картинки в HTML</h2> <h3>Добавляем картинку в HTML документ из родительской папки</h3> <p>Пример демонстирует способ вставки картинки в HTML документ, из папки, которая является родительской для той, в которой документ находится</p> <p> <img src=»../html41.png»> </p> </body> </html>

Затем откройте получившийся файл в браузере, чтобы увидеть, что картинка была действительно вставлена в HTML документ:

Результаты первого примера вставки картинки в HTML документ с использованием относительного пути к файлу

Стоит немного пояснить пример вставки изображения в HTML документ. Представьте, что вы открыли файловый менеджер, а в нем открыта папка Lesson 13, ее полный путь на компьютере: C:\Users\Aspire\Desktop\HTML\Lesson 13. Но вам по каким-то причинам захотелось посмотреть изображение html41.png, что вам для этого нужно сделать? Для этого вам необходимо вернуться в папку «HTML» и открыть изображение.

Браузер в данном случае поступает аналогичным образом: конструкция «…/» говорит ему о том, что нужно вернуться в папку «HTML», а  конструкция «html41.png» говорит браузеру о том, что нужно открыть изображение html41.png. Вот так мы можем добавить изображение в HTML документ из родительской папки, указав относительный путь. В данном случае путь относителен той папки, в которой находится HTML документ.

Теперь давайте посмотрим, как вставить картинку в HTML документ, которая находится в той же папки, что и сам документ. Для большего понимание обратитесь к рисунку, на котором показана структура папки Lesson 13, мы будем вставлять картинку html32.png, на этой картинки пример из записи, в которой мы говорили про шрифты в HTML. Давайте отредактируем наш файл, на этот раз я позволю себе вам порекомендовать CSS редактор Brackets, который тоже является бесплатным. Добавьте следующий код в HTML документ:

<h3>Добавляем изображение из папки, в которой находится HTML документ</h3> <p>Пример ниже использование относительного пути к файлу для добавления файла изборажения в HTML документ, который находится в той же самой папке, что и сам документ.</p> <p> <img src=»html32.png»> </p>

Теперь мы указали относительный путь до картинки, которая находится в той же самой папке, что и HTML документ, чтобы вставить ее. Давайте откроем измененный пример в браузере, чтобы убедиться в том, что картинка была добавлена в документ.

Результаты второго примера вставки картинки в HTML документ с использованием относительного пути к файлу

Действительно, мы видим новую картинку на странице, которую сформировал браузер.  Позволю себе еще раз вернуть к изображению, на котором демонстрируется структура папки Lesson 13. В этой папке есть еще одна папка – «img». Данную папку можно назвать вложенной по отношению к папке «Lesson 13». В папке «img» есть изображение html29.png, это изображение из записи, в которой мы говорили про заголовки в HTML. Давайте вставим это изображение в наш HTML документ. Рекомендую вам попробовать еще один редактор, на этот раз это бесплатный PHP редактор NetBeans, NetBeans – это даже не редактор, а среда разработки, которая изначально создавалась для Java. Добавьте в наш документ следующий код:

<h3>Добавляем картинку из папки, которая вложена в ту папку, где находится HTML документ</h3> <p>Данный пример демонстирует использование относительного пути к файлу для добавления картинки, которая находится во вложенной папки относительно той, в которой находится документ.</p> <p> <img src=»img\html29.png»> </p>

Данный пример демонстрирует то, как вставить изображение в HTML из вложенной папки. Папка «img» является вложенной по отношению к папке, в которой наш HTML документ.

Результаты третьего примера вставки картинки в HTML документ с использованием относительного пути к файлу

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

Я уже демонстрировал структуру каталога «HTML», в котором у меня хранятся все примеры, если вы ее внимательно смотрели, то могли заметить папку «тексты», в этой папке у меня хранятся все тексты данной рубрики и изображения к этим текстам. Давайте вставим изображение, которое находится в папке «тексты» в наш HTML документ, воспользовавшись абсолютным путем операционной системы. Рекомендую вам попробовать JavaScript редактор Sublime Text 3, у данного редактора один недостаток – он платный. Добавим несколько строк кода в наш документ:

<h3>Используем абсолютный путь ОС для вставки картинки в HTML</h3> <p>Данный путь является абсолютным только для моего компьютера и браузер не «увидит» картинку, если HTML документ будет открыт на другой машине.</p> <p> <img src=»C:\Users\Aspire\Desktop\HTML\тексты\html26.png»> </p>

А теперь убедимся, что изображение было вставлено в HTML страницу, открыв пример в браузере. Мы видим, что картинка html26.png относится к той записи, в которой мы говорили про выделение слов в HTML и логическое форматирование документа.

Использование абсолютного пути операционной системы для вставки картинки в HTMLдокумент

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

Давайте посмотрим пример вставки изображения в HTML с использованием настоящего абсолютного пути. Откройте любой удобный вам редактор и добавьте несколько строк кода:

<h3>Использование абсолютного пути для вставки картинки в документ</h3> <p>Абсолютный путь к картинке делает ее доступным из любой точки мира, лишь бы был доступ к сети Интернет.</p> <p> <img src=»//zametkinapolyah.ru/wp-content/uploads/2016/06/less1.png»> </p>

Мы использовали абсолютный путь для вставки картинки в HTML страницу. Давайте убедимся, что это сработало, обновив страницу примера в браузере.

Использование абсолютного пути для вставки картинки в HTML страницу

Минус такого подхода в том, что картинка вставляется в документ с удаленного сервера, который может быть недоступен или если мой компьютер будет отключен от сети Интернет, то данная картинка не будет отображена, так как браузер не сможет получить к ней доступ. Кстати, данная картинка относится к записи, в которой мы говорили про установку LESS на Windows.

Мы рассмотрели всевозможные способы вставки изображений и картинок в HTML страницы и остановились на том, что вставлять картинки в HTML и, соответственно, на страницы сайт, следует с использованием относительного пути, так как данный подход наиболее безопасный. Конечно, вы можете загрузить изображение на какой-нибудь сайта предоставляющий услуги по размещению изображений и пользоваться абсолютным путем, это позволит снизить нагрузку на сайт, но лишит вас возможности обрабатывать изображения серверными средствами, например, при помощи PHP. Теперь можем приступать к другим темам, которые так или иначе связаны с картинками, изображениями и HTML.

Размеры HTML картинок и изображений. Высота и ширина картинок в HTML документе

Не секрет, что у изображений и картинок есть высота и ширина. Язык HTML позволяет управлять высотой и шириной картинок при помощи HTML атрибутов width и height. Атрибут width позволяет изменить ширину картинки в HTML, а атрибут height меняет высоту изображения. Размеры изображений в HTML допускается задавать в пикселах и процентах. С пикселами все понятно, это абсолютные единицы измерения, но если вы будете изменять размеры картинки процентами, то знайте, что эта единица относительная. Процент высчитывается от размера HTML элемента, в который была вложена картинка.

Если вы задаете только высотку HTML изображения или только его ширину, то браузер будет сохранять пропорции размеров картинки. Когда вы меняете размеры картинок при помощи HTML атрибутов, то браузер сразу де устанавливает размеры отображения картинок по заданным атрибутам.

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

Слишком маленькое изображение неудобно для просмотра вашим посетителям, а если вы увеличите размеры изображения, задав значения, которые больше исходных, то оно может потерять в качестве. Давайте попробуем вставить картинку в HTML документ и изменить ее размеры при помощи HTML атрибутов. Я буду изменять высоту и ширину изображения html28.png, это изображение из записи про параграфы и абзацы в HTML, ее исходный размер: ширина 430px, высота 707px. Давайте увеличим размеры картинки на HTML странице, воспользовавшись пикселами, я создам новый документ, который назову hw.html:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Изменяем высоту и ширину картинки в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Увеличиваем высоту и ширину изображения в HTML</h2> <h3>Увеличиваем картинку при помощи HTML атрибутов width и height</h3> <p>Для изменения ширины картинки используйте атрибут width. Для изменения высоты картинки используйте атрибут heght.</p> <p> <img src=»../тексты/html28.png»> </p> </body> </html>

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

Задаем размеры картинки в HTML документе в абсолютных единицах

Мы видим, что ширина картинки действительно стала 500px, а высота была посчитана браузером автоматически. Если навести курсор мыши на значение атрибуты src, то можно увидеть исходные размеры картинки, которую мы вставили в HTML страницу:

На рисунке показан исходный размер изображения, которое мы вставляем в HTML документ

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

<h3>Уменьшаем размеры картинки при помощи HTML атрибутов</h3> <p>Мы будем уменьшать размер изображения при помощи процентов. Обратите внимание: проценты — это относительные единицы измерения, поэтому размер изображения будет зависеть от родительского HTML элемента. В данном случае это элемент Р</p> <p><img src=»../тексты/html28.png»></p>

Вам нужно понимать, что проценты – это относительные единицы измерения и то, что мы написали 50% это не означает, что браузер разделит на два 430 и 707. Это означает, что размер изображения не уменьшился, а стал динамическим. Теперь размер картинки зависит от HTML элемента P, в который картинка вложена. Мы никак не ограничивали размеры элемента P, поэтому его ширина равна ширине окна браузера. Соответственно, размер нашей картинки будет всегда равен половине ширины элемента P (в нашем случае это половина области просмотра). Давайте откроем документ в полном окне:

В данном случае ширина картинки, вставленной в HTML документ, равна половине ширины области просмотра в браузере

Чтобы вы лучше понимали скажу, что расширение моего монитора 1600 х 900. Мы видим, что ширина картинки 783.5, она чуть-чуть не дотягивает до 800 пикселов, так как у HTML элементов есть отступы, а справа есть скролл, который забирает часть ширины экрана. А теперь уменьшим размеры окна браузера, чтобы посмотреть, что станет с картинкой, вставленной в HTML страницу:

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

Размеры картинки уменьшились, так как уменьшилась ширина HTML элемента P. Таким образом проценты не дают вам гарантии того, в каком виде увидит изображение посетитель сайта. Во-первых, мониторы у всех разные, во-вторых, посетитель может уменьшит окно браузера в любой момент.

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

Обтекание текстом HTML изображения. Выравниваем картинку в HTML

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

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

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

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Пример обтекания картинок в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Пример обтекания изображений в HTML</h2> <h3>Текст в примере не будет обтекать картинку</h3>   До сих пор мы размещали изображения в отдельном параграфе, но давайте посмотрим, что получится, если мы разместим изображение в том же элементе, в котором мы пишем текст, создадим новый файл, который я назову align.html. Добавим еще несколько слов в абзац. <img src=»../тексты/html25.png»> </p> </body> </html>

zametkinapolyah.ru