Разорванный шаблон края на div? - PullRequest
2 голосов
/ 11 мая 2011

Дизайнер, с которым я работаю, дал мне монстр проблемы с реализацией ...

Фон страницы серый, а поверх него - текстура мятой бумаги (неповторяющаяся с нарисованными элементами дизайна) для первых 600 пикселей (на 1400 пикселей по ширине; в настоящее время центрируется как неповторяющийся фон). Внизу находится еще один div с большим количеством текста на нем - с каплями тени, сложным узором линии для фона и разорванными краями , находящимися немного выше верхнего div.

  • Сохранение верхней части в формате JPG, а нижней части в виде прозрачного PNG приводит к размеру файлов + 1 МБ.
  • Сохранение верхней части в виде JPG и нижней части в виде JPG работает не очень хорошо из-за тени. Технически это помогло бы сохранить нижнюю часть в виде среза с элементами верхней части под тенями, но она должна была бы выстраиваться в идеальный пиксель всегда, иначе бы выглядела дрянно. И в этот момент я мог бы также сохранить весь сайт как одно большое изображение ...
  • Если бы нижняя часть имела сплошной цвет для фона, я мог бы установить для каждого края разные прозрачные PNG. Однако рисунок линии в нижней части означает, что это не сработает.

Мой вопрос в конечном итоге:

Как, черт возьми, люди в эти дни рвут края, не делая свой сайт одним большим изображением?

Спасибо!

Screengrab:

screengrab -- note how the bottom bit overlaps the top texture...

Ответы [ 5 ]

4 голосов
/ 11 мая 2011

CSS3 действительно предоставляет свойство border-image, которое должно помочь вам с эффектом разорванной границы (хотя даже тогда это помогло бы, если бы это было повторяющееся изображение).

См. Здесь для W3 спецификации .

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

См. CanIUse.com для полной таблицы поддержки браузера для него.

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

3 голосов
/ 11 мая 2011

Здесь на самом деле не так много всего, что вы можете сделать.

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

Проверьте этот блог на хороший пример: http://webapplicationdevelopmentindia1.blogspot.com/2011/05/php-developers-demand-are-increasing.html

2 голосов
/ 11 мая 2011

Понятно, что у вашего дизайнера фон для печати ....

Хорошо, есть способы, которые скорее всего теоретически сработают. Но теоретическое не всегда практично. Я подозреваю, что вы хотите иметь кросс-браузерную возможность, как и все мы. Итак, начнем с использования большинства новых трюков CSS3 благодаря устаревшей версии IE. Забудь о тенях, забудь о сумасшедших прозрачностях png без хаков и т. Д.

То, что у вас осталось, это гигантский .jpg фон. Это загрузит .... в конце концов .....

В этом случае вы можете увидеть шторм на горизонте, поэтому бегите в укрытие. Вернитесь к дизайнеру, объясните, почему это такая же умная идея, как текстуры, наложенные на градиенты, и помогите им понять, почему наши друзья в Microsoft сделали это практически невозможным. Точно так же, как полностью расклеенный сайт, это можно сделать как угодно ... но это, вероятно, не лучшее использование времени и ресурсов. Сеть не печатается, она динамична ... и когда вы помещаете что-то "на страницу", она не останется на месте, как это было бы в Illustrator, и вы не можете гарантировать, что ваш пользователь увидит это в 100 # глянцевом виде. с металлической накладкой. Да, я был дизайнером до того, как стал разработчиком .....

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

2 голосов
/ 11 мая 2011

Вы должны исправить фоновые изображения и использовать все изображение (или верхнее изображение и нижнее изображение) и сделать фон без прокрутки. ИЛИ вы должны заставить его разработать шаблон, который может повторяться, а затем использовать меньший PNG.

0 голосов
/ 06 марта 2013

, хотя это нетипично, я бы порекомендовал вырезать большое квадратное отверстие в центре изображения, чтобы у вас остались только сами края и прозрачный центр и сохранение в формате PNG. Затем сохраните саму центральную часть в формате JPEG и поместите JPEG прямо поверх PNG в правильное положение.

Таким образом, большинство очень больших PNG будет содержать очень мало данных и иметь очень маленький размер файла. Тогда остальные данные, очевидно, будут в формате jpeg и, следовательно, будут меньше.

...