Как бы вы закодировали это?

Question

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

Какими прямыми или творческими способами вы могли бы закодировать эту ломающую стрелу ...

Базовый макет этой страницы выглядит так ...

1. Как будет выглядеть код html / css?
2. Вы бы разбили изображение на несколько изображений или могли бы использовать одно изображение?

Я уверен, что это действительно простая концепция, и она меня просто поражает. Извините, если это странный вопрос, помните, что я нуб! :)

Заранее спасибо за вашу помощь!

Вот ссылка на оригинальное руководство, где я нашел эти изображения

Answer 1

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

background: green url(images/header-bottom.jpg) no-repeat bottom left;

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

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

Answer 2

Есть так много способов сделать это ... есть два или три способа, которые лучше, чем большинство.

Вот изображение того, о чем говорят Баллсакян и Шон. Не обращайте внимания на черные фрагменты текста сверху внизу, неточный скриншот с моей стороны.

альтернативный текст http://img171.imageshack.us/img171/9392/picture6e.png

Вы можете сделать зеленую часть стрелки прозрачной и сохранить ее в формате GIF или PNG, поскольку наклон составляет 45 градусов (в GIF нет неровностей). Вам все равно придется отредактировать изображение, чтобы оно соответствовало цветам субнава и фона содержимого, если вы когда-либо измените их, но прозрачный треугольник автоматически покажет цвет фона заголовка.

Вам также придется удалить поля между заголовком, subnav и контейнерами содержимого.

Парень из Photoshop, который сделал это, явно хотел, чтобы фон просвечивал «естественно», делая поля между заголовком и subnav / content, но это невозможно без несемантической разметки со стрелкой. Чтобы сделать это без использования CSS, просто поместите изображение сразу после заголовка, между заголовком и subnav / content.

<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />

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

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

Для забавы, вот супер оптимизированный спрайт способ сделать это. Это требует, чтобы вы поместили огромное вертикальное прозрачное пространство между стрелкой и верхним градиентом содержимого. Затем используйте этот фон на UL subnav и div / section контейнера содержимого. Установите background-position в 0 - (вертикальное пространство + стрелка вверх) и повторите-x для содержимого. 3k один http запрос.

альтернативный текст http://img37.imageshack.us/img37/8503/arrowy.gif

Answer 3

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