VPF::Обтекание сложной картинки текстом

maxfol

Дата 14.3.2013, 14:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 22.2.2009

Репутация: нет
Всего: нет

Можно ли реализовать обтекание сложной картинки текстом, какое генерирует этот сервис : csstextwrap , но своими силами и как то попроще ?

Aliance

Дата 14.3.2013, 14:37 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Для обтекания картинки есть свойства float.

Цитата(maxfol @ 14.3.2013, 15:13

)

сложной картинки

это как?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

maxfol

Дата 14.3.2013, 14:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 22.2.2009

Репутация: нет
Всего: нет

Цитата(Aliance @ 14.3.2013, 14:37)

Для обтекания картинки есть свойства float.

Цитата(maxfol @ 14.3.2013, 15:13

)

сложной картинки

это как?

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

SiteVizitka

Дата 16.3.2013, 19:39 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 24.6.2012

Репутация: нет
Всего: нет

Картинка в HTML всегда "прямая", даже если видимая часть и будет кривой, то текст может обтекать только блок с изображением.

Можно взять картинку и нарезать на горизонтальные полоски, каждую полоску подрезать со стороны обтекающего текста. Полученую лапшу прижать к краю контейнера содержащего обтекающий текст smile

maxfol

Дата 16.3.2013, 19:48 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 22.2.2009

Репутация: нет
Всего: нет

Цитата(SiteVizitka @ 16.3.2013, 19:39)

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

SiteVizitka

Дата 16.3.2013, 20:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 53
Регистрация: 24.6.2012

Репутация: нет
Всего: нет

Это тривиально

Код


<style>
div > img { float: left; clear: left; }
</style>
<div>
<img src="1" /><img src="2" /><img src="3" /><img src="4" />
Много текста на сайте. Много текста на сайте. Много текста на сайте. Много текста на сайте.
Много текста на сайте. Много текста на сайте. Много текста на сайте. Много текста на сайте. 
...............ну и так далее.....................
</div>

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

Это сообщение отредактировал(а) SiteVizitka - 16.3.2013, 23:24

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »