3
1
Нашёл на free-lance.ru задание сверстать макет. Я не буду браться за него - просто интересно. В приложенной картинке дерево обтекается текстом - как это делается? css?

UPD:
Вот ссылка на картинку, сюда не загружается - ошибка:
413 Request Entity Too Large
nginx/0.8.53
5 лет 4 месяца назад
vano
327
#ссылка
комментировать


1
Сервис для создания текста обтекающего фигурные области - http://www.csstextwrap.com/
Пример - http://www.csstextwrap.com/example_for_demo.php

P.S. Как-то натыкался на статью о том как подобное делается, к сожалению не смог найти.
#ссылка
5 лет 1 месяц назад
комментировать
0
Есть 3 варианта :
1) Олдскул сделать три блока дерово центральный а текст с position:relative; и float:left; и там   и параграфами достич необходимого
2) Банально javascrip'ом сделать через jquery расчет позиции каждой строчки
3) Использовать html5 link и там колдовать :)
#ссылка
5 лет 4 месяца назад
mr47
263
Вообще интересный макет, почему то не видел данный проект на фрилансе вообщем макет ушел в копилку )
mr47 5 лет 4 месяца назад #
комментировать
0
Дело в том, что если применять разные скрипты, прийдется изрядно потрудится чтобы текст одинаково обтекал мнимый контур при разных размерах шрифта в браузере. Хотя на сайтах такого уровня про эти траблы забывают.
Из картинки видно что сайт фиксированой ширины, тогда, грубо говоря, можно просто вставлять кусочки картинки в строку с текстом. Сверстать например простым тейблом. Это если не использовать яваскрипт и т.д.
Хотя возможно это просто такая картинка, без всякой верстки.
#ссылка
5 лет 4 месяца назад
Arey
427
На apple.com где-то видел такое обтекание. И ещё в каком-то эпловском текстовом редакторе. И ничего вроде, нормально работало. Сейчас поищу.
vano 5 лет 4 месяца назад #
Вот нашёл на скриншотах текст обтекает рыбку http://www.apple.com/apps/pages/
vano 5 лет 4 месяца назад #
Извините, есть разница между текстовым редактором и браузером.
Arey 5 лет 4 месяца назад #
комментировать
0
куча решений здесь. http://www.pixelcom.crimea.ua/podrobno-o-css-shapes.html
C прозрачной картинкой и threshold самый простой, но не работает в IE (напр.11). C shape-outside - самый универсальный, IMHO.
UPD: и shape-outside:polygon( ); в IE тоже не работает ;-)
Не знаю как для IE, для остальных браузеров - что-то вроде этого https://jsfiddle.net/7agwq3v6/13/#
#ссылка
19 дней 3 часа назад

комментировать
0
Ни какой автоматики, что скрипту надо параметры каждой строки передать, что самому нужные отступы сделать - разницы ни какой. Выход только один - ручная отбивка. Картинка по определению прямоугольная :)
Единственный вариант и текст и изображение целиком отрисовывать в SVG.
#ссылка
5 лет 1 месяц назад
комментировать

Ваш ответ:

Будет создана учетная запись и на email выслано письмо подтверждения.
или
Использовать OpenID

Получить OpenID
Что такое OpenID?

новые ответы

Первый раз на сайте?

askdev.ru — это социальный сайт вопросов и ответов для IT-специалистов: программистов, веб-дизайнеров, системных администраторов.
Как stackoverflow.com, только на русском.
о сайте » регистрация »
Показан

4190 раз

Задан

5 лет 4 месяца назад

Теги