Обтекание css

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

Обтекание картинки текстом в HTML и CSS

Обтекание картинки текстом при помощи HTML

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

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML:  http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html. Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:


— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg

У тега img имеется  атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:

  • left — изображение будет расположено по левому краю, а текст будет обтекать его справа;
  • right — изображение расположится справа, а текст будет обтекать его слева;
  • bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
  • top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
  • middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:


Положение картинки по умолчанию

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

Пример:

Картинка слева

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

Пример:

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

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

Пример:

Вертикальное положение картинки вверху

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

Пример:

Позиционирование картинки по центру

Обтекание картинки текстом при помощи свойств CSS 

Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия: http://webmastermix.ru/lessons-css/17-bases-css.html.


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

Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.

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

Теперь классу leftfoto нужно присвоить определенные CSS стили.  

Данный код располагают между тегами <head>…</head>, заключив в теги <style>…</style> или помещают во внешний файл стилей CSS. 

Разберем те элементы, которые мы здесь задали:

  • float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
  • margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.

Пример:

Обтекание при помощи CSS

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

Здесь мы добавили следующие элементы:

  • border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом;
  • padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.

Пример:

Оформление картинки

Материал подготовлен проектом: WebMasterMix.ru

webmastermix.ru

Обтекание картинки текстом в HTML

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


  • bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
  • top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
  • right –картинка выравнивается по правому краю, а контент обтекает ее по левому
  • left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
  • middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки

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

Вот пример использования атрибута align:

Обтекание картинки текстом CSS

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

В этом случае для каждого изображения мы должны задать уникальный класс, а далее, в файле стилей, или между тегами <style>…</style> в самой странице, прописать этому классу свойство float с соответствующим способом обтекания. Для того, что бы добиться обтекания по правому или левому краю изображения, мы можем использовать значения left и right, так же, как и с атрибутом align.


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

CSS:

На мой взгляд, такой способ задания обтекания картинки текстом в CSS более удобен. Так как вы, при помощи CSS-свойств, можете более гибко настраивать параметры отображения картинки и изменять их. В примере я добавила дополнительно отступ с правой и левой стороны свойством margin, а так же добавила для изображения рамку. Картинка стала более выразительной и контент теперь не прилипает к ней.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Как сделать обтекание картинки текстом

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.


Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

<h1>List of towns in England</h1>  <h2>Amersham</h2>  <p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p>    <h2>Buxton</h2>  <p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...</p>    <h2>Chesterfield</h2>  <p class="columns">Chesterfield is ...</p>  <img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg">  <p class="columns">It has ...</p>    <h2>Dartmouth</h2>  <p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>

CSS стили

body {   margin: 0;   background: #FFF8E8;   padding: 0 20px;   font-size: 90%;   counter-reset: h2; /*создаем счетчик для любого заголовка h2*/  }  h1 {   font-family: 'Lora', serif;   color: #564C4A;   font-weight: 300;  }  h2 {   font-family: 'Lora', serif;   color: #B00D22;   font-weight: 300;   clear: both; /* отменяем обтекание с обеих сторон */    padding: 1em 0 0.25em;   border-bottom: 2px solid;   counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */  }  h2:before {   content: " " counter(h2) '.    
/* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }

Обтекание картинки с двух сторон

float-middle

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


Разметка HTML

<div class="wrap">   <img src="cat.jpg">   <div class="left">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>   <div class="right">   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>   </div>  </div>

CSS стили


.wrap {   width: 60%;   margin: 80px auto;   position: relative;  }  img {   position: absolute;   top: 0;   left: 50%;   margin-left: -125px;  }  .left {   float: left;   width: 49%;  }  .right {   float: right;   width: 49%;  }  .left:before, .right:before {   content: "";   width: 125px;   height: 250px;  }  .left:before {   float: right;  }  .right:before {   float: left;  }

html5book.ru

Как сделать обтекание картинки текстом

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

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

Обтекание css

 

 

 

 

 

 

 

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

  1. Обтекание картинки текстом средствами HTML;
  2. Обтекание картинки текстом средствами CSS;
  3. Обтекание картинки текстом средствами редактора Joomla.

 

Обтекание картинки текстом в HTML

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

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху — 5px, справа — 10px, снизу — 5px, слева — 0px.

  1. Для выделения фрагмента (блока) в документе в  HTML служит элемент <div>
    <div>…</div>
  2. Для определения стиля элемента служит универсальный атрибут <style>
    <div style=…>…</div>
  3. Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон
  4. Свойство <margin> отвечает за область внешних отступов:
    <margin-bottom> устанавливает размер отступа от нижней границы элемента;
    <margin-left> размер отступа от левой границы элемента;
    <margin-right> размер отступа от правой границы элемента;
    <margin-top> размер отступа от верхней границы элемента.

 

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

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «>Картинка</div>

 

Код нашей картинки в HTML выглядит так:

<img src=»/images/joomla/adminka_20.png» border=»0″/>

 

Вставим в div нашу картинку, в результате получилось:

<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

 

Сократим запись:

<div style=»float:left; margin: 5px 10px 5px 0px «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>

На картинке ниже вы видите данный код в HTML документе.

Обтекание css

 

 

 

 

 

 

 

 

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

Обтекание css

 

 

 

 

 

 

 

 

 

Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно html-код будет несколько другим:

<div style=»float:right; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 10px;»> После картинки вставляем код: </div>.

Можете поэкспериментировать с кодами. Главное добиться желаемого результата. И еще совет, обязательно просматривайте результаты ваших экспериментов хотя бы в основных браузерах: Internet Explorer, Mozilla Firefox, Opera. Если все выглядит как вы планировали, значит, вы со своей задачей справились.

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

 

Обтекание картинки текстом в CSS

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

  1. За вывод изображения на веб-страницу отвечает тег <img>.
  2. За выравнивание элемента по определенному краю, с обтеканием его остальными элементами отвечает свойство <float>.
  3. За область внешних отступов отвечает <margin>.
  4. Класс (.class) в CSS служит для придания элементам индивидуального стиля, отличного от основного стиля, прописанного в документе.

Сначала добавим класс стиля к изображению. Для этого, селектору img дадим имя .fotoleft. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашей картинки:

Img. fotoleft {
float: left;
margin: 12px 12px 12px 0;
}

Теперь применим класс class=»fotoleft» к тегу <img> в файле HTML. Открываем статью в исходном коде и прописываем класс для картинки:

<img src=»/картинка.png» width=»150″ height=»110″ class=»fotoleft» />

Таким образом, мы выровняли картинку по левому краю с обтеканием текста по его правой стороне и задали величину отступов: сверху — 12px, справа — 12px, снизу — 12px, слева — 0px. Теперь, чтобы таким же образом выровнять любую другую картинку, нужно всего лишь присвоить ей созданный нами класс стиля.

 

Обтекание картинки текстом в Joomla

Выровнять изображение по краю можно с помощью меню «Вставить/редактировать изображение». Для этого вы должны кликнуть по изображению в нашей статье, вокруг картинки появиться рамка. Затем кликните по иконке «Вставить/редактировать изображение».

Обтекание картинки текстом

 

 

 

 

 

 

 

 

 

 

 

 

Перед вами откроется окно, в котором надо перейти на вкладку «Оформление». Здесь можно не только установить отступ, но и изменить размеры изображения.

Для того, чтобы текст обтекал картинку, установите в строке Стиль (Style) значение:
float: left; — если выравниваете картинку по левому краю (alignment: left);
float: right; — если выравниваете картинку по правому краю (alignment: right).

Для того, чтобы текст не слился с картинкой, задайте горизонтальные и вертикальные отступы — 10 (px). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»

Обтекание css

 

 

 

 

 

 

 

 

 

 

 

Вы видите, что у нас появился отступ. Кстати, с помощью меню «Вставить/редактировать изображение» вы можете сделать подпись под изображением или чтобы подпись появлялась при наведении курсора на изображение и т.д. В этом, думаю, не сложно разобраться, поэкспериментировав с настройками.

Обтекание css

 

 

 

 

 

 

 

 

 

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

www.webadvisor.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Обтекание</title>  <style>  .leftimg {  float:left; /* Выравнивание по левому краю */  margin: 7px 7px 7px 0; /* Отступы вокруг картинки */  }  .rightimg {  float: right; /* Выравнивание по правому краю */   margin: 7px 0 7px 7px; /* Отступы вокруг картинки */  }  </style>  </head>  <body>  <h2>Доклад лейтенанта Бокатуева</h2>  <p><img src="images/1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">  Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного   противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной   контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава   потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился   в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы   своего взвода. В результате операции были захвачены элементы внеземной культуры, которые   переданы аналитической группе.</p>  <h2>Пресс-релиз аналитической группы</h2>  <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">  В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось  психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших   над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии   аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в   состоянии аффекта.</p>  </body> </html>

Результат данного примера показан на рис. 1.

Текст с иллюстрациями

Рис. 1. Текст с иллюстрациями

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

htmlbook.ru

CSS значения, определяющие обтекание блока на странице сайта

CSS атрибут float определяет обтекание одних объектов страницы другими.

Пример CSS обтекания с параметром float:left:

<title>CSS обтекание</title>
<style type="text/css">
div.flowers img {float:left; margin:26px; border:1px solid #000000}
div.flowers a:hover img {margin:26px; border:1px solid #ffffff}
</style>

</head>
<body>
<div class="flowers">
<a href="#"><img src="../images/bee.jpg" alt="" width="160" height="160"
border="0" /></a>
<a href="#"><img src="../images/flower4.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/flower5.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/flower.jpg" alt="" width="160" height="160"
border="0" /></a>
<a href="#"><img src="../images/flower3.jpg" alt="" width="160" height="160" border="0" /></a>
<a href="#"><img src="../images/bee2.jpg" alt="" width="160" height="160"
border="0" /></a>
</div>
<div style="clear:left"> &nbsp; </div>
</body>

Как результат обтекания изображений, мы имеем галерею:

Атрибуты и значения

  • div.flowers img – определяет свойства изображения img в блоке <div class="flowers"> </div>.
  • float:left – определяет обтекание слева направо.
  • margin: – определяет отступ по всему периметру изображения.
  • border:1px solid #000000 – определяет свойства границы элемента.
  • <div style="clear:left"> </div> – останавливает обтекание с левой стороны, то есть обтекание не будет распространяться на данный блок и на следующие элементы.

Возьмем предыдущий код и немного изменим описания «останавливающего» div-а:

<div style="clear:left; background-color:DeepSkyBlue; width:160px; height:160px; border:1px solid #000000"> &nbsp; </div>

и откроем результат обтекания блока в новом окне.

Уберите параметр clear:left и вы вряд ли останетесь довольны таким обтеканием блока.

Пример CSS обтекания с параметром float:right:

<title>CSS обтекание</title>
<style type="text/css">
div.flowers_2 img {float:right; margin:26px; border:1px solid #000000}
div.flowers_2 a:hover img {margin:26px; border:1px solid #ffffff}
</style>

</head>
<body>
<div class="flowers_2">
<h1 align="center">Цветы</h1>
<a href="#"><img src="../images/flower4.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower5.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/flower3.jpg" width="160" height="160" border="0" /> </a>
<h1 align="center" style="clear:both">Цветы и пчелы</h1>
<a href="#"><img src="../images/bee.jpg" width="160" height="160" border="0" /> </a>
<a href="#"><img src="../images/bee2.jpg" width="160" height="160" border="0" /> </a>
</div>
</body>

Результат: обтекание с правой стороны

Атрибуты и значения

  • clear:bothотменяет обтекание как слева, так и справа.
  • align="" – определяет горизонтальное выравнивание.

Изображения с пчелами расположены после блока, отменяющего обтекание с правой стороны, но они по-прежнему держатся правого края. Почему? Потому что данные изображения расположены внутри блока <div class="flowers_2"> </div> и, поэтому попадают под CSS свойства селектора div.flowers_2 img.

ab-w.net

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

Обтекание текста вокруг изображения с помощью CSS

А вот с применением CSS обтекания текста по фигуре:

Обтекание текста вокруг изображения с помощью CSS

На сайте этот эффект выглядит вот так:

Обтекание текста вокруг изображения с помощью CSS

Итак, приступим теперь к самому коду.
С помощью  правила «shape-outside» мы можем создать геометрическую фигуру, по форме которой и будет обтекать текст.
Фигуры могут быть созданы с помощью одной из следующих функций:

circle()  — круг;

ellipse() — эллипс, овал;

polygon() – многоугольник.

Рассмотрим каждую фигуру на примере.

Круг — circle() 

Если вы хотите сделать обтекание текста по фигуре круга, используйте функцию circle():

shape-outside: circle(50%);

50% — это радиус круга. Вы можете его менять, если нужно.

Полный пример:

  <style>  .circle {  float: left;  shape-outside: circle(50%);  }  </style>    <img src="bloggood-ru.png" class="circle">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

Если хотите, чтобы картинка приняла ту же форму, тогда используйте правило «clip-path» с идентичными параметрами:

  shape-outside: circle(50%);  clip-path: circle(50%);  

Пример:

  <style>  .circle {  float: left;  shape-outside: circle(50%);  clip-path: circle(50%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="circle">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

Эллипс, овал  — ellipse()

Чтобы создать форму эллипса или овала, используйте функцию ellipse():

Значения для радиуса задаются по оси X и оси Y.

shape-outside: ellipse(X Y);

Пример:

  <style>  .ellipse {  float: left;  shape-outside: ellipse(30% 50%);  clip-path: ellipse(30% 50%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="ellipse">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

Многоугольник  — polygon()

Эта функция помогает создать любую форму с тремя или более вершинами:

shape-outside: polygon(Х Y, Х1 Y1, Х2 Y2,… Х9 Y9);

Точки фигуры также строятся по осям Х Y
Для примера я построю треугольник.

Пример:

  <style>  .polygon {  float: left;  shape-outside: polygon(0% 80%, 100% 80%, 50% 0%);  clip-path: polygon(0% 80%, 100% 80%, 50% 0%); /* Если хотите, чтобы картинка приняла ту же форму */  }  </style>    <img src="bloggood-ru.png" class="polygon">  <p>  In her place one hundred candles burning<br>  A salty sweat drips from her breast<br>  Her hips move and I can feel what they're saying, swaying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  Black lipstick stains her glass of red wine<br>  I am your servant, may I light your cigarette?<br>  Those lips smooth, yeah I can feel what you're saying, praying<br>  They say the beast inside of me's gonna get ya, get ya, get...<br>  I beg to serve, your wish is my law<br>  Now close those eyes and let me love you to death<br>  Shall I prove I mean what I'm saying, begging<br>  I say the beast inside of me's gonna get ya, get ya, get...<br>    Let me love you too  Let me love you to death  Hey am I good enough<br>  For you?<br>  ...  </p>  

Результат:

Обтекание текста вокруг изображения с помощью CSS

bloggood.ru

Обтекание css

Наверное, уже на многих сайтах Вы видели обтекание изображения текстом. Подобное размещение материала экономит место и служит для связи иллюстраций с содержимым.

Используем свойство float. В качестве параметра указываем по какой стороне выравниваем изображение. С margin, надеюсь, понятно — чтобы текст не вплотную прилегал к обтекаемому изображению.

Код HTML, CSS

<!DOCTYPE html>  <html>   <head>    <meta charset="utf-8">    <title>Обтекание</title>    <style>     .leftimg {      float:left; /* Выравнивание по левому краю */      margin: 10px 10px 10px 0; /* Отступы вокруг картинки */     }     .rightimg  {      float: right; /* Выравнивание по правому краю  */       margin: 10px 0 10px 10px; /* Отступы вокруг картинки */     }    </style>   </head>     <body>      <h2>Сталинградская битва</h2>    <p><img src="images/1.jpg" alt="Сталинградская битва" width="120" class="leftimg">       Является крупнейшей сухопутной битвой в ходе Второй мировой войны, которая наряду со сражением на Курской дуге стала переломным моментом в ходе военных действий, после которых немецкие войска окончательно потеряли стратегическую инициативу. Сражение включало в себя попытку вермахта захватить правобережье Волги в районе Сталинграда (современный Волгоград) и сам город, противостояние Красной армии и вермахта в городе и контрнаступление Красной армии (операция <i>Уран</i>), в результате которого 6-я армия и другие силы союзников нацистской Германии внутри и около города были окружены и частью уничтожены, а частью захвачены в плен.</p>        <p>По приблизительным подсчётам, суммарные потери обеих сторон в этом сражении превышают два миллиона человек. Державы Оси потеряли большое количество людей и вооружения и впоследствии не смогли полностью оправиться от поражения.</p>         <h2>Курская битва</h2>    <p><img src="images/2.jpg"  width="120" alt="Курская битва" class="rightimg">  В советской и российской историографии принято разделять сражение на 3 части: Курскую стратегическую оборонительную операцию (5 — 23 июля), Орловскую (12 июля — 18 августа) и Белгородско-Харьковскую (3 — 23 августа) стратегические наступательные операции, являющиеся важнейшей частью плана летне-осенней кампании 1943 года. Битва продолжалась 49 дней. Немецкая сторона наступательную часть сражения называла операция <i>Цитадель</i>.</p>  <p>В результате наступления по плану <i>Кутузов</i> была разгромлена орловская группировка немецких войск и ликвидирован занимаемый ею орловский стратегический плацдарм. В ходе операции <i>Полководец Румянцев</i> прекратила своё существование белгородско-харьковская группировка немцев и был ликвидирован этот важнейший плацдарм.[9] Коренной перелом в ходе Великой Отечественной войны, начатый под Сталинградом, был завершен в ходе Курской битвы и сражения за Днепр.</p>     </body>  </html>

Главным тут является использование свойства float (выравнивание). В примере с первым изображение по левому краю, со вторым — по правому.

Демонстрация Скачать исходники

tradebenefit.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector