Небольшой полезный трюк для тех, кто постоянно использует в своей работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, находит все больше и больше поклонников среди дизайнеров и верстальщиков.

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

Размечать самостоятельно заготовки с помощью зебр-заливок и направляющих — не выход. Это лишняя трата рабочего времени, которое лучше потратить с большей пользой. Поэтому воспользуемся онлайн-генератором Modular Grid Pattern, чтобы доработать стандартные шаблоны 960.gs.

Задача: быстро получить из левой части картинки то, что изображено в правой:

Переходим по вышеприведённой ссылке, выставляем следующие параметры с картинок ниже и сохраняем полученные результаты в виде PNG или Photoshop-pattern.

Для 12-ти колоночного макета:

Для 16-ти колоночного макета:

Для 24-х колоночного макета:

Параметр Baseline (здесь используется для задания интерлиньяжа или line-height) я выставлял 18px в расчете, что размер основого шрифта 12px (font-size × 1,5 = line-height). У вас он может быть другим, в зависимости от личных убеждений и выбранного кегля для текста.

Высоту модулей (Module height) выставляйте по собственному вкусу, я оставил стандартные значения.

Полученные результаты в виде PNG-файлов также отлично подходят для наложения на макет в процессе HTML-верстки с помощью PixelPerfect (или подобных расширений для браузеров).

Особо внимательные могут обнаружить, что на сайте Modular Grid Pattern есть еще ссылка на расширение для Photoshop, но у меня с ним что-то не срослось. После n-ной попытки победить его недружественное автозаполнение параметров, я его удалил.

Ну и в конце, пара полезных ссылок в тему:

• Статьи Алексея Черенкевича о модульной сетке.
• Генератор вертикального ритма для сайтов.

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

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. 96% или резиновая модульная сетка для Web
2. Спорное оформление вкладок и кнопок
3. Скрытые возможности text-shadow

Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования text-shadow. То, что нарисовано на картинке к посту в живую можно посмотреть здесь.

Помимо того, что здесь не используется никакой дополнительной разметки (типа :before и :after), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .

В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметровtext-shadow через запятую. При этом первый параметр указывается для тени «первого слоя», второй — слоя ниже и т.д. (Для тех, кто вообще не в курсе, как работает text-shadow — читайте).

Выглядит потрясающе, реализуется просто. Можно использовать в меню, кнопках, заголовках и везде, где придумается.

Работает во всех современных браузерах, кроме IE (неожиданно, правда? :)

Кроме того, как пишут здесь, подобный многослойный подход можно использовать и в box-shadow.

Развитие

А вот что получилось у меня в манипуляциях с тенями, примерно, за полчаса потраченного времени. Уверен, что добавив градиенты и прочие продвинутые CSS3-штуки, можно добиться более впечатляющих результатов.

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

Inset Text

.inset {
	font-size: 72px;
	color: #666;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

Outset Text

.outset {
	font-size: 72px;
	font-weight: bold;
	color: #666;
	text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
		0 -2px 2px #fff, 2px 2px 2px #000,
		0px 2px 2px #000, 2px 0 2px #000;
}

Радужная тень:

Rainbow

.rainbow {
	font-size: 72px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0); /* сам текст невидим */
	text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
		9px 0 0 #f5dd08, 12px 0 0 #059444,
		15px 0 0 #0287ce, 18px 0 0 #044d91,
		21px 0 0 #2a1571;
}

Текст с обводкой:

Stroke

.stroke {
	font-size: 72px;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
		1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}

Неоновый текст:

Neon Text

.neon {
	background: #000;
	font-size: 72px;
	font-weight: bold;
	color: #407ec4;
	text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
		1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
		4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
		4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}

Такой модный сейчас анаглиф:

3D Anaglyph

.ananglyph {
	font-size: 72px;
	color: #333;
	text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}

Удачи в освоении!

* * *

Постовой:

Установите себе в подпись красивые юзербары.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Забытые возможности :first-letter
2. text-align: justify. Добро или зло?
3. 96% или резиновая модульная сетка для Web

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

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

Поэтому, без ТЗ никак, если важны нервы и время.

Но, как показывает практика, ТЗ для фрилансера клиенты больше ленятся заполнять, нежели при работе с вебстудией. Объясняется это, примерно, так: «Эй. У меня сейчас нет времени. Я тебе и так о многом написал, посмотри в истории переписки. Если что, задавай вопросы. Потом обсудим твой вариант.»

Но это всё частные проблемы, теперь (ниже) мысль поста.

В сети полно примеров различных ТЗ на разные типы сайтов (например). Но, бегло пробежавшись в них, я не нашел одного, как мне кажется, актуального вопроса, который я недавно добавил в своё техническое задание, где-то между пунктами с описанием модулей и размерами рекламных баннеров. А именно:

«Есть ли у вашей компании корпоративные аккаунты, группы в соцсетях? (twitter.com, facebook.com, vkontakte.ru и т. д.)».

Не принципиально знать об этом заранее? Для блогов, возможно, да. Туда не трудно добавить новый виджет. Но что делать, если клиент приходит со своим макетом сайта компании (скорее, своей картинкой-на-стену за ***$) с free-lance.ru и просит добавить иконки в такое произведение при верстке?

В итоге, то «облачков не видно», то красивый рендер «теряется». Получается, что уже можно добавить только в «пустые места», но не туда, где виджет действительно будет уместен.

Сейчас только устаревшие заброшенные проекты не продвигаются с помощью социальных сетей. И задать всем блокам-плагинам правильное расположение и оформление — задача дизайнера.

Нужно это учитывать. И лучше до, чем после. Апдейтим свои техзадания, подстраиваемся под современные тенденции.

P.S.: В процессе написания поста наткнулся на интересный сервис TZGen — сервис автоматического создания технического задания на разработку веб-сайта. Поле заполнения полей формы можно бесплатно скачать PDF-версию своего техзадания на дизайн сайта.

Постовой:

Скачайте без регистрации красивые кисти для photoshop. naikom.ru/blog — блог о дизайне сайтов.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Спорное оформление вкладок и кнопок
2. Чем заменить Welcome?
3. Прокачиваем шаблоны от 960.gs

Не знаю, сколько ещё людей, кроме меня, среди WordPress-блогеров, которые пользуются только вкладкой «HTML» в визуальном редакторе. Но уверен, что многим из блоговодов, уделяющим внимание оформлению текста, этот трюк поможет сэкономить время и свести всю рутину прописывания CSS-классов для тегов к простым кликам мышью по кнопкам.

Лично у меня, привычка следить за HTML появилась из-за того, что TinyMCE часто грешит вставкой лишних переносов <br /> и из-за того, что люблю смотреть живой код. Поэтому вкладкой «Визуально» в редакторе WordPress я пользуюсь очень редко.

А вот с накоплением проектов, получается так, что на каждом принимаются за правила оформления какие-то особые подходы, например, в этом блоге есть first-letter в начальном параграфе каждой статьи, в другом проекте нужно разбивать текст на колонки из админки, в третьем красить и увеличивать текст через <span> с определёнными классами. Поэтому понадобился способ расширить возможности визуального редактора.

Дальше примемся за настройку визуального редактора для WordPress под себя.

По адресу /wp-includes/js/ находим файлы quicktags.dev.js и quicktags.js, создаём их копии (обязательно!).

В quicktags.dev.js видим, что каждая кнопка описывается так (пример для кнопки «b» (strong), пояснения параметров в коде):

edButtons[edButtons.length] =
new edButton('ed_note'
,'b' //имя кнопки (для админки)
,'<strong>' //открывающий тег
,'</strong>' //закрывающий тег
,'b' //внутренне имя для кнопки (для функций)
);

Покажу на примере, как можно добавить свою кнопку, например, для особого параграфа <p class="my-style">…</p>:

edButtons[edButtons.length] =
new edButton('ed_note'
,'мой стиль' // чем короче имя кнопки, тем лучше
,'<p class="my-style">'
,'</p>'
,'myStyle'
);

Дальше, копируем этот код в quicktags.dev.js, расположив между остальными кнопками в нужном порядке, и сохраняем его (файл) под именем quicktags.js с заменой старого файла. (Можно сразу вставить в «старый» quicktags.js, но, как можно увидеть, он не совсем читабелен.)

Если всё сделано правильно, то в табе «HTML» появится ваша кнопка. При одиночном нажатии будет вставляться открывающий/закрывающий тег, а если обвести кусок текста и кликнуть — выделенный текст будет помещён между вашими тегами.

Естественно, стили для <p class="my-style">…</p> следует предварительно прописать в ваш style.css.

Таким образом, можно добавить нужные кнопки для всех особых случаев: других тегов, колонок, параграфов и даже смайлов :)

Ещё один момент, если забить в параметры кнопки инлайновые стили для тегов, то все изменения можно будет видеть в админке на вкладке «Визуально». Случайный пример:

edButtons[edButtons.length] =
new edButton('ed_note'
,'левая колонка' 
,'<div style="float: left; width: 300px;">'
,'</div>'
,'leftCol'
);

Пусть это и вынужденное зло, но таким образом мне удалось научить одного клиента разбивать текст на колонки в своих статьях, не обременяя его знанием HTML/CSS. Когда ему нужно, он просто переключается на «HTML», разбивает кнопками текст на колонки, затем переключается обратно в «Визуально» и правит уже там, видя текст в колонках.

Да, мой источник знаний с описанием, как это можно было сделать (добавить кнопки).

Не забудьте, что при обновлении версии WordPress, вам придётся проделать все эти действия заново, либо просто заменить файлы quicktags.dev.js и quicktags.js на свои, заранее сохранённые.

Для желающих потренироваться на расширении вкладки «Визуально» могу посоветовать эту ссылку. Я с TinyMCE не разбирался, поэтому можете сообщить в комментариях об удачных результатах ;)

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Как добавить разные иконки к пунктам меню, используя только CSS

Гостевой пост от Анны Быстровой, автора блога sprosonok.ru посвящённого урокам и теории пиксель-арта. (Поэтому не удивляйтесь, что текст написан от женского лица :)

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

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

Оказывается, пиксельная графика (пиксел-арт или Pixel Art) — это вид компьютерного дизайна, при котором изображение рисуют на экране монитора при помощи растрового графического редактора с использованием простейших инструментов — карандаша и ластика, т. е. каждый пиксель дизайнер рисует ВРУЧНУЮ! Причем желательно использовать 16 цветов палитры.

Интересно то, что все мы видели пиксельную графику еще минимум лет 20 назад, она использовалась в телевизионных приставках Суперденди, Сега и т. д., которые уже канули в лету, также она используется и по сей день, уже в мобильных телефонах и КПК.

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

Чем же интересен Pixel Art, что он получил такой толчок в развитии в последние годы? Причин несколько: скорее всего одна из них то, что огромное количество людей выросло, играя в эти самые Суперденди и Сегу в детстве, и при виде графики тех времен на них накатывает ностальгия. Также немаловажный момент — научиться рисовать несложные рисунки может человек, даже не имеющий способностей в изобразительном искусстве, а уроков по этой теме в сети хватает. Например, здесь один из них. Подогревает интерес к пиксельной графике и то, что с каждым днем появляется все больше настоящих шедевров — энтузиасты этого направления рисуют целые картины, отличительной особенностью которых является огромное количество мелких деталей.

Одна из самых известных студий в сфере пиксельного дизайна, студия eBoy, создала свое видение известных мегаполисов, на данном рисунке изображен Токио, согласитесь, неправда ли завораживает? (Картинка кликабельна.)

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

Мое мнение — я сомневаюсь, что пиксельная графика исчезнет совершенно, вполне вероятно мода на данный вид дизайна и пройдет в скором будущем, однако останутся как минимум энтузиасты, такой себе андеграунд. Также вполне возможно пиксел-арт просто-напросто перерастет в вид искусства, все-таки, довольно интересные картины получаются при использовании данного вида дизайна. Но не будем раньше времени хоронить пиксельную графику, один раз в своей статье это сделал небезызвестный Артемий Лебедев после появления true color, а это было в далеком 2001 году.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. В поисках вдохновения: Pixel Art

Чуть больше месяца назад многие новостные порталы Байнета шумели по поводу ещё неподписанного документа (проекта) «ГОСТ для сайтов госструктур и организаций с долей государства». Кроме того, были и бурные дискуссии на Хабре и гневные твиты от белорусских вебмастеров.

Текст интересный (учитывая, что ничего подобного в стране ещё не было), но после его прочтения осталось ощущение, что это чей-то неотредактированный черновик (не зря его пока назвали предстандартом), и принимать такое в качестве стандарта никак нельзя.

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

Даже после беглого просмотра предложенного текста появляются вопросы по многим разделам. Ведь стандарт подразумевает 100% соблюдение требований к продукту, а здесь много туманных отсылок к «рекомендациям и стандартам W3C» или наоборот, не всегда уместных конкретных требований.

Из явных промахов, за которые цепляется глаз:

«Необходимо использовать навигационные цепочки, содержащие путь следования по разделам от главной страницы интернет-сайта до текущей открытой страницы.»

Зачем, например, сайту с двухуровневой навигацией breadcrumbs?

«При размещении на странице интернет-сайта большого объема текстовой информации необходимо использовать внутренние ссылки (якоря) на различные разделы страницы. В свою очередь, в каждом разделе страницы должна быть ссылка „Вернуться в начало“, позволяющая пользователю вернуться к началу страницы.»

Исходя из реальных (читать привычных пользователю), ссылки могут быть также «Наверх» и «К началу».

«Все страницы интернет-сайта должны иметь единый дизайн.»

По всей видимости, должны быть выдержаны в едином стиле оформления.

«При разработке макета страниц интернет-сайта необходимо придерживаться следующих основных правил:
…
— URL, содержащие статическую информацию, не должны содержать информацию о сеансе работы пользователя с интернет-сайтом;»

Слегка шокирующе выглядит этот пункт в разделе «Требования к дизайну».

И здесь же:

«— для задания размеров шрифтов, межстрочных интервалов и отступов между абзацами текста необходимо использовать относительные величины;»

Попытка реанимировать IE6? Для остальных браузеров это вообще не проблема.

«— необходимо избегать эффектов, затрудняющих восприятие информации или отвлекающих пользователя от содержания страницы: мигания и мерцания, эффектов выделение, движущихся строк;»

А как же быть с js-каруселями, новостными бегущими строками и прочими слайдерами, вполне себе прижившихся на спортивных, новостных или сайтах телеканалов? (Пусть даже и государственных.)

Да, и главное моё замечание — ссылки должны быть подчёркнуты, а не «визуально выделяться».

И прочие мелочи, которые для каждой отдельной ситуации должны оговариваться, и решения вполне могут не удовлетворять требованиям пока не универсального и не гибкого ГОСТа.

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

Ну и чтобы у поста была интересная концовка, откройте проект ГОСТа и пройдитесь по основным пунктам на сайте самого ОАО «Гипросвязь» и Министерство связи и информатизации Республики Беларусь, составителей данного стандарта. Полный бардак :)

P. S.: С тех пор судьба данного документа больше нигде не освещается. Засекречен? :)

* * *

Постовой:

sprosonok.ru — блог про пиксель-арт для начинающих и интересующихся. Как проверить верстку дизайна в разных браузерах.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Как мы заказывали сайт у конкурентов
2. Устаревшие приёмы в веб-дизайне

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

Несколькими такими примерами, найденными на блоге tobypitman.com хочу поделиться в этом обзоре.

К слову, наибольшего вау-эффекта от просмотра можно ожидать только в webkit-браузерах (Chrome и Safari), так как анимация в примерах основана на (проприетарных) методах -webkit-animation-… В Firefox и Opera демки тоже вполне рабочие, но уже без «красивостей».

CSS3 jQuery style menu

Довольно незатейливое меню-закладки. Туториал и демо можно найти тут.

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

А с помощью jQuery пришлось бы писать как-то так.

Dynamic CSS3 Animated Accordian Menu

Код для примера и ссылка на демо на этой странице.

Ещё одна вещь, которая, несмотря на простое оформление, скрывает в себе неплохие возможности при написании всего лишь пары свойств -webkit-transition. Для сравнения, в jQuery пришлось бы писать нечто такое плюс дописывать эффекты для плавного затухания фона под ссылками.

Pure CSS Sliding Image Gallery

И, наконец, самый красивый пример CSS-фотогалереи можно увидеть тут. Можно даже сказать, что это упрощённый вариант Galleria, но от этого не теряется привлекательность и применимость этой галереи.

P. S. : Целью поста было показать несколько примеров CSS3-анимации и насколько просто её реализовать без использования JavaScript. Некоторые из примеров уже сейчас вполне работоспособны (хоть и с оговорками) и, в ближайшей перспективе, их можно будет использовать в своих проектах.

Вопросы по работе примеров в разных браузерах оставим за рамками обсуждения поста (уже тысячу раз всё было сказано и теми, кто сомневается, и теми, кто за перспективные технологии).

На комментарии критиков: «Не работает в IE», реагировать не буду. Надоело. Пишите в Microsoft.

* * *

Постовой

В своем блоге Сосновский делится наблюдениями в Adsense.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Больше, больше эффектов c CSS3!
2. Практические примеры анимации и эффектов в CSS3
3. Баннер-уголок на jQuery

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

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

Основными (самыми распространёнными) приёмами оформления основного текста в веб, конечно же, является выделение шрифта жирным и курсивным начертанием. Выделение с помощью <strong> и <em> (или font-weight: bold и italic в CSS) чрезвычайно полезные способы выделения, но удачно применимы далеко не ко всем стандартным веб-шрифтам.

И если в первом случае, в жирном начертании, проблемным может быть рендеринг отображения шрифта (совсем не так, как это выглядит в Photoshop), то во втором, применяя Italic, мы можем получить практически нечитаемый текст, из-за отсутствия курсивного начертания в шрифте.

Наклонный sans-serif

Я столкнулся с этой проблемой в дизайне этого блога, когда использовал Tahoma, как основной шрифт для статей (мои постоянные читатели наверняка это помнят).

При разработке дизайна, Arial мне показался мелковатым, а Verdana слишком крупным и грубым, поэтому я остановился на Tahoma, как промежуточном значении между двумя крайностями. Но уже в процессе ведения блога понял, что ошибся с выбором шрифта: я практически с самого начала выделял курсивом отдельные слова, важные названия и цитаты, и сразу же стало заметно, что текст отмеченный «курсивом», становился большим препятствием и мучением для глаз, причём увеличение кегля не давало никаких положительных результатов — текст по-прежнему оставался косым и сплющенным.

Для примера, «рыба», выделенная курсивом (Tahoma, «курсив» (на самом деле Oblique)):

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

Теперь тот же текст, в более «мелком с виду» Arial:

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

Второй вариант читается, несомненно, легче и быстрее, поэтому основной шрифт на этом блоге, со временем, я поменял.

 «Почему?» и «Как?»

Когда мы ставим в коде <em> или пишем стили font-style: italic, мы заранее уверены, что увидим на экране курсивное начертание шрифта. Но это не так.

Умные браузеры, конечно, показывают нам то, что мы хотим видеть, но не всегда это то, что есть на самом деле. Те шрифты, которые не имеют курсива (!), мы видим в наклонном начертании — наклоненный вправо прямой шрифт (Oblique), а не специально разработанная для экранного чтения курсивная версия. Отсюда же и все визуальные последствия: изменение пропорций в штрихах, плохая читабельность и восприятие букв.

Из стандартных Windows-шрифтов не имеют курсива:

• Tahoma
• Comic Sans MS
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif

Кроме того, шрифты Arial Black (вполне понятно почему:), Impact, Lucida Console и Lucida Sans Unicode не имеют жирного начертания. Применив к ним font-style: bold или <strong> вы снова получите «математическую модель» жирного шрифта, а не реальный жирный.

Нет проблем у serif

К счастью, у Win-стандартной тройки Times New Roman, Georgia и Palatino Linotype, таких проблем не наблюдается. Единственное, что, в кегле до 18 px, Times заметно проигрывает в рендере своих курсивов — часто проявляется «эффект выпавшик пикселей» как в обычном, так и в жирном курсиве, а лучше всего сглаживается Palatino Linotype.

Злоключение

Чтобы избегать всех вышеперечисленных проблем, рекомендую сначала прочитать этот пост :) и почаще тестировать свои текстовые идеи/дизайны/сайты на сервисах вроде typetester, параллельно просматривая все доступные начертания выбранного шрифта в Photoshop или другом графическом редакторе.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Anti-aliasing для текста в браузерах и в Photoshop
2. 7 правил эффективного оформления заголовков на сайте
3. 12 вариантов сочетаний шрифтов, которые можно использовать на своих сайтах

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

Основной акцент в подборке сделан на нестандартную подачу, тридэшность, крутящесть и прочие fun-штуки, которые в JavaScript-исполнении просто заставили бы ваш браузер надолго «задуматься» (специальный тест-драйв не проводил, но различные экспериментальные js-образцы на это намекают, что очень жаль).

Думаю, что многие из этих flash-фотогалерей могут отлично вписаться в дизайн промо или имиджевого сайта, там где самое (единственное) место для flash.

3D Grid Photo Gallery

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

Посмотреть демо и скачать можно здесь.

3D Curve Photo Gallery

Реактивная карусель с эффектом головокружения. Спрятана на том же сайте на этой странице.

PostcardViewer

Небрежная сетка подойдёт для создания чего-нибудь молодежного и не очень строгого.

Демо | Скачать

TiltViewer

Похожа на предыдущую, но всё упорядочено и добавлен эффект вращениея плоскости.

Демо | Скачать

Polaroid Gallery v. 1.01

Вполне себе обычная галерея, много раз встречалась подобная реализация на js. Попала в этот список из-за того, что поддерживает фотки с flickr и очень легка в настройке.

Демо/Скачать.

Flickr Widget

Наверняка многие «крутили» 3D облако тегов от Roy Tanсk, но не все знают, что есть похожий виджет, который использует фотографии с flickr. Всё, что вам нужно — это ввести адрес своего фида на этой странице и получить код.

Демо можно посмотреть, например, здесь.

Cu3er

Не совсем фотогалерея, скорее слайд-шоу, но штука очень впечатляющая. Лучше смотрите сами. Там же есть и расширенная инструкция по эксплуатации.

В статью намеренно не попали платные галереи и такие же инструменты для самостоятельного создания своих галерей (как этот) ввиду непопулярности платных сервисов в наших сетевых широтах :)

Если вас заинтересует нечто подобное на JavaScript, то могу поделиться в одном из следующих постов — в закладках полно подобных скриптов для 3D галерей и слайд-шоу.

* * *

Интересное в сети:

18 Методов и инструментов cжатия CSS.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. 111 CSS-галерей и сайтов для раскрутки дизайна
2. Как вставить угловой flash-баннер на сайт
3. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)

Продолжу эстафету, начатую автором блога cuprum.name, в которой эстафетостартер ( :) предлагает блогерам поделиться со своими читателями переводом интересных зарубежных статей из своего RSS-ридера.

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

Сейчас в разметке большинства сайтов, в той или иной мере, используется подход с применением float, для «лечения» которого верстальщики применяют разные подходы (всем ведь известно про схлопывающийся контейнер для блоков с float, нарушение потока для последующих элементов разметки, и проблемы, связанные с этим?).

Из часто встречающихся решений для очистки плавающих блоков можно увидеть (кратко пройдёмся по всем методам):

1. Метод с дополнительным <div style="clear:both"></div>

Который (<div>) помещается в тот же контейнер, в котором есть плавающие блоки, непосредственно после них. Позволяет контролировать плавающие элементы относительно последующей разметки. Например, не позволит следующими за плавающей картинкой заголовкам, спискам, абзацам и т.д, наползать на неё.

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

2. Метод с position: relative

Позволяет «вернуть» высоту и видимость фона родительского блока, относительно плавающего, с помощью свойства position: relative.

Основная сложность метода в том, что такой подход трудно контролировать в сложной разметке, если родителей для элемента с float очень много. И для всех придется дополнительно прописывать CSS-свойство position: relative. Ест много времени верстальщика и требует усиленного тестирования. Поэтому, лучше сразу забыть про этот способ.

3. Метод overflow: hidden

Наиболее популярный, простой и часто встречающийся. Здесь можно остановиться подробнее, так, как с ним мы, собственно, и собрались попрощаться :)

Суть метода в том, что родителю плавающего блока добавляется свойство overflow: hidden. Преимущество в том, что по сравнению с предыдущим способом, можно вылечить поток всего лишь одной строкой.

Правда, требуется дополнительный «костыль» для IE6: дополнительно включаем hasLayout с помощью zoom: 1, или, если требуется валидность, height: 1%.

Весь код в этом случае выглядит примерно так:

1
2
3
4
5
6

#container {
    overflow: hidden;
}
* html #container {
    height:1%;
}

Несмотря на кажущуюся простоту, overflow: hidden иногда не годитcя, если в верстке нужно использовать элементы с отрицательным margin (попробуйте прицепить вебдванольный стикер в такой блок), есть проблемы с ссылками-якорями в Opera (об этом я расскажу в следующий раз), и способен преподнести сюрпризы, как в этом демо (два нижних примера).

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

4. Самоочистка для плавающих блоков

Давно известный (да, я не сделал громких откыртий в этом посте!), но мало распространённый метод, основанный на применении к плавающему блоку свойства content: after, выводящему дополнительный контент (текст, точка или пробел) после него, к которому применяется display: block, чтобы сделать его блочным элементом с очисткой clear: both, и одновременно невидимым с помощью visibility: hidden…

В общем, лучше сразу смотрите код, который недавно обновился и больше не поддерживает устаревший IE/Mac:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.floatElement:after {
	visibility: hidden;
	display: block;
	clear: both;
	content: " ";
	height: 0;
}
/* хаки для IE6,7 */
* html .floatElement {
	height: 1%;
}
*:first-child+html .floatElement {
	min-height: 1px;
}

Судя по той же демке (пример 2), способ избавит вас (как минимум :) от проблем с тенью в CSS3.

Способ более универсальный и гибкий, по сравнению с первыми двумя, и позволяет избежать проблем, связанных с «обрезкой» overflow: hidden и просто просится занять свое место в вашем личном CSS-фреймворке. Кроме того, это единственный метод, который применяется непосредственно к плавающему элементу, а не к его родителю.

Лучше всего его использовать, создав отдельный класс в стилевом листе для плавающих элементов, как, например, .group в статье-источнике мыслей или книге Дэна Седерхольма «Handcrafted CSS».

Дополнительно про float можно почитать на designformasters.info

* * *

Участники эстафеты:

• cuprum.name — Работа с цветовой моделью RGBA
• rotorweb.ru — Скажем прощай overflow: hidden!
• dreamhelg.ru — Фантастическая CSS3 лайтбокс галерея с помощью jQuery
• список cо временем пополнится…

* * *

На этом всё, передаю эстафету Сергею М. (iskariot.ru), Виталию (codeisart.ru) и Насте (mannodesign.com).

Кроме того, чтобы эстафета получила активное развитие (или я кого-то забыл пригласить), предлагаю присоединиться, если вы ведёте блог на смежную тему, имеете в своем активе не ниже ста RSS-подписчиков и способны выполнить все условия эстафеты. Присоединяйтесь!

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Скрытые возможности text-shadow
2. Практические примеры анимации и эффектов в CSS3
3. Как добавить разные иконки к пунктам меню, используя только CSS