Не так давно наш веб-дизайнер в своей статье Трюк со ссылкой – показываем картинку рассказал нам о том, как сделать красивую анимированную ссылку. Однако предложенное решение обладает одним недостатком – клик на подобной ссылке не срабатывает в IE. Ну, не воспринимает он SPAN вложенный в ссылку, так как нам хотелось бы. Клик на такой ссылке не срабатывает, даже курсор мыши остается обычной “умолчательной стрелкой”.

Ну, допустим, с курсором справиться проще всего, задав SPAN’у стиль cursor:pointer. Остается заставить IE правильно отрабатывать клики на подобных конструкциях.

Решение оказалось достаточно простым, правда чтобы сделать это нужно быть немного программистом. Для этого ссылка вместо конструкции <a href=”portfolio.html”>, приобретает чуть более сложный вид: <a href=”javascript:void(0)” onclick=”window.location=’portfolio.html'”>.

Как видим, здесь все очень просто. Событие onclick браузер отрабатывает нормально, а мы этим и воспользовались, по щелчку мыши свойству window.location присваивается значение ‘portfolio.html’, то есть как раз та самая ссылка, переход на которую нужно обеспечить. Атрибут href содержит теперь значение javascript:void(0), по сути, это пустой оператор, который в данном случае блокирует стандартное поведение браузера при переходе по ссылке.

А вот и весь текст этого трюка:

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

Под палками я понимаю либо горизонтальные разделители (<HR>), которые были введены в спецификацию HTML в эпоху web1.0 (немногим позже вымирания динозавров, да-да) и предназначались для смысловой отбивки блоков текста (аналогично типографской линии, или звездочкам) друг от друга; либо css-свойство border (граница элемента), достаточно часто используемое не по назначению.
Примеры плохого использования палок:



Если на первой картинке вертикальную палку убрать совсем, а горизонтальные уменьшить раза так в четыре, картинке полегчает. А в таком виде она полна мусора.
Во второй картинке можно вообще убрать все вертикальные палки, станет только лучше. Я, честно признаться, не понимаю, зачем они там вообще, но видел и такие примеры верстки.

Почти такая же беда и с плашками:



Плашка, это элемент также предназначенный для смысловой отбивки небольшого блока текста. Применять их нужно весьма осторожно. Если увлечься, то получится ужас, показанный на картинках выше. Да-да, я и такое видел. И даже, когда-то, делал:-)
В случае первой картинки у нас огромная плашка под основным текстом давит на зрителя и приводит его в уныние. Ее можно с легким сердцем удалить, оставив только мелкую плашку под меню. Она позволяет визуально отделить меню от основного текста и акцентирует на нем внимание зрителя.
В случае второй картинки от плашек надо вообще отказаться, обыграв визуальную отбивку блоков друг от друга более плотным межстрочным интервалом (line-height) и более разреженными отступами блоков друг от друга.

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

Как-то в статье Как реализовать кнопку, не используя, собственно, кнопку? я писал о том, как сделать кнопку в HTML не используя теги “input” и “button”. Метод хорош, но имеет один существенный недостаток: бэкграунд, вызываемый псевдоклассом :hover только по этому вызову и загружается. Поэтому, если мы используем достаточно большой бэкграунд, то при наведении мышки на див мы некоторое время будем видеть просто пустое место (так как старый бэкграунд исчез, а новый еще не загружен с сервера).
Чтобы этого избежать, в самом начале разметки мы создадим блок, в который поместим интересующий нас бэкграунд. Блоку этому дадим абсолютное позиционирование, и left:, скажем, -3000px, чтобы его точно никто не увидел. Теперь интересующая нас графика будет загружаться стопроцентно раньше любого действия пользователя со страницей.

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

BUTTON

Достигается это с помощью CSS:

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

————————————-

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

Для начала – ссылки на сайты (c-action, Шаг за горизонт), где подобный метод реализован достаточно хорошо. Безо всякого Flash и  Java Script мы легко можем сделать интерфейс сайта более динамичным.

Суть метода заключается в следующем:  мы добавляем в ссылку тег <span></span>, содержащий нужную нам графику. И, до поры, до времен прячем его. А при наведении курсора на ссылку делаем видимым. Абсолютное позиционирование контейнера позволяет нам перемещать графику в любое место пространства. Если проявить фантазию, поле для деятельности – безгранично.

Подробный листинг (на примере “Шага за горизонт”):

а позиционирование элементов назначается отдельно, по id:

Все достаточно просто, не правда ли?;-)

————————————-

Сегодняшний наш разговор я хотел бы выстроить вокруг важнейшего инструмента фотошопа – вокруг кисти. Точнее, вокруг этой самой кисти настроек. Ведь согласитесь, было такое, что когда вы открывали панель Brushes (F5), вы думали: “Твою мать, что все это значит?”. Уверяю вас, это совершенно нормально, я в первый раз подумал точно также.

Но обо всем по порядку. Итак, кисть. Кисть нужна практически всегда – ретушь и рисование это 99% фотошопа. Казалось бы, что там думать – взял кисть, выставил цвет, настроил диаметр (кнопки “[” и “]”), жесткость контура – и вваливай!

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

Итак, поехали. Строчка первая – Brush presets:

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

Строчка вторая: Brush tip shape:

Здесь мы по-прежнему можем выбрать сэмпл кисти и настроить главный диаметр штриха. А также – нажать кнопку “Use sample size”, для того, чтобы установить тот диаметр, который прописан для кисти по умолчанию.
Следующий блок у нас отвечает за пространственную ориентацию сэмпла кисти. С помощью круглого лимба со стрелкой его можно вертеть вокруг своей оси (ясное дело, что это не для идеально круглых кистей – че там вертеть-то?), а с помощью чекбоксов flip x и flip y – зеркально отображать по осям х и у соответственно. Также можно установить угол поворота вручную в поле Angle и соотношение вертикального и горизонтального диаметров кисти.
Следующим пунктом у нас идет шкала жесткости контура. Меньше значение – мягче, размытей контур, больше – резче.
И последнее – spacing. Сиречь – расстояние между сэмплами кисти. Скажем, если вы рисуете сплошную линию, то этот параметр лучше вообще отключить. А если у вас в качестве кисти какой-то декоративный сэмпл – тогда с ним можно поиграться, чтобы настроить “разлет” сэмплов по площади.

Строчка третья: Shape dynamics:

Первая шкала – size jitter. Этот параметр отвечает за изменение размера сэмпла вдоль линии движения. Под ним есть небольшой селект, отвечающий за то, как этим параметром управлять. Корректно работает он только при наличии планшета (методы управления – фэйд, давление на стилус, наклон стилуса, нажатие кнопок на стилусе (это все касается и все остальных селектов, которые нам встретятся)). Minimum diameter указывает на то, каким будет минимальный диаметр сэмпла. Tilt scale связан с углом наклона стилуса и подробно пока я на нем останавливаться не буду.
Angle Jitter – разброс угла поворота сэмпла. Опять же – имеет смысл только для некруглых сэмплов.
Roundness Jitter – разброс вертикального (относительно направления оси Х кисти) диаметра сэмпла.
Minimum Roundness – соответственно установка минимального значения вертикального диаметра сэмпла в процентах от размера текущего (oh, fukk!)

Следующим пунктом у нас идет scattering:

Первая шакала – scatter. Отвечает она за разброс сэмплов вдоль направления рисования. Очень удобно рисовать всяике листики, снежинки и прочее. Чекбок Both Axes указывает на то, как разбрасывать – вдоль обоих осей (галка включена) или вдоль одной (в этом случае касательная от сэмпла до направления рисования всегда перпендикуляр).

Count отвечает за количество сэмплов на единицу площади. Count jitter немного изменяет расстояние между сэмплами.

Далее – texture:

В окошке можно выбрать сэмпл текстуры, которой будет заливаться закрашенная кистью область, а также инвертировать текстуру.
С помощью scale подгоните размер сэмпла текстуры по размеру.
Обратите внимание, что если вы не поставили галку в Texture each tip, то, сколько не возюкайте кистью – заливка сэмплом будет равномерной. Если же галка установлена, то необходимо настроить следующие параметры:
* выставить режим смешивания;
* с помощью параметра depth укажите, как у вас будет текстуризоваться штрих кисти – от минимального (текстура только по краям) до макисмального (весь штрих заливается текстурой);
* min depth отвечает за размер минимальной глубины текстуризации (я так и не смог заставить его работать);
* depth jitter, соответственно, отвечает за разброс глбуины текстуризации по семплам вдоль линии рисования.

Dual Brush:

В общем, параметр дуал браш позволяет назначить вторую кисть, которая будет своеобразной маской для риса первой.
То есть, если мы, скажем, выберем кисть в виде листочка, а потом в дуал браш назначим вторую просто круглуюс меньшим диаметром, то у нас получится контур второй кисти, заполненный попавшими в нее частями сэмплов первой.
Настройки – Diameter устанавливает диаметр кисти-маски. Spacing – расстояние между сэмплами кисти-маски. Scatter – разлет между сэмплами кисти-маски вдоль линии рисования (чекбокс отсноится к этому параметру). Count – устанавливает количество сэмплов кисти-маски по линии риса.

Color Dynamics:

этот параметр позволяет установить разброс по цвету, насыщенности тона и прочим параметрам между отдельными сэмплами кисти на линии рисования.
Foreground/Background jitter – устанавливает разлет между передним и задним цветами на сэмплах кисти (то есть, если передний цвет – красный, а задний – белый, то сэмплы будут окрашены в оттенки от белого до красного случайным образом).
Hue jitter позволяет установить разброс по оттенкам от двух соседних цветов (например – красный/желтый) при малых значениях, до всей цветовой палитры при высоких (при условии, что цвет кисти не черный, и не оттенок серого). Saturation jitter отвечает за разброс между сэмплами кисти насыщенности выбранного цветового оттенка. Brightness jitter – за яркость. Purity – за чистоту цвета. Максимальные отрицательные значения делают сэмплы монохромными.

Вкладка Other Dynamics:

Здесь у нас две шкалы – Opacity jitter и Flow jitter. Обе они случайным образом влияют на прозрачность сэмпла, и в чем между ними сугубая разница экспериментальным путем выяснить не удалось.

Лежащие ниже опции:
* noise – добавляет шум по краям сэмпла кисти;
* wet edges – делает рис кисти прозрачным, а края немного темнее, что создает эффект акварельного мазка;
* airbrush – эмулирует аэрозольный баллончик. По идее:-)
* smoothing – сглаживает края кисти.
* protect texture – запоминает текущую текстуру и назначает ее всем новым сэмплам.

Замочки помогают “заблокировать” нужные свойства, чтобы они назначались автоматом всем остальным выбранным сэмплам кисти.

Вот хорошая статья в тему: http://www.art-gu.ru/texts/files/db.0006/. Она написана для более старой версии фотошопа, но все поведение кистей там проиллюстрировано. Так что – надо посмотреть.
————————————-