Пока 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. FLIR — ещё одна возможность избавиться от стандартных шрифтов на сайте
2. Anti-aliasing для текста в браузерах и в Photoshop
3. 7 правил эффективного оформления заголовков на сайте

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

Основной акцент в подборке сделан на нестандартную подачу, тридэшность, крутящесть и прочие 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. Несколько красивых эффектов на JavaScript
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.

Нет похожих статей.

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

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

Источник такой замечательной таблички — devirtuoso.com

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body:

body { font-size: 62.5% }

Таким образом, 1em теперь будет равен 10px, что значительно упростит расчеты. Например, теперь font-size: 12px будет равнозначен font-size: 1.2em и т.д. Но не забывайте про наследование при относительных размерах.

Неудачное дополнение

Внимательные верстальщики заметили, что в таблице не хватает еще одного способа задания размеров — через ключевые слова (xx-small, x-small, small, medium, large, x-large и xx-large). В попытке дополнить авторскую таблицу этими значениями, я наткнулся на одну давнюю проблему — несоответствие значений (размеров) ключевых слов по умолчанию в разных браузерах.

Если не ошибаюсь, то проблема была подробно описана в старенькой (но актуальной по сей день и недавно переизданной) книге Джеффри Зельдмана «Веб-дизайн по стандартам» и заключается она в том, что за базовые размеры шрифта в браузерах принимаются разные значения (12 и 16px).

Вот что получилось у меня (для ознакомления любопытным):

Моё мнение, что самый полный контроль над размерами шрифтов на сайтах предоставляют, конечно же, пиксели, а для печати удобнее всего использовать pt. Хотя на практике очень часто используют комбинированный метод %/em, чтобы обеспечить масштабируемость и контроль над размерами шрифта у пользователей IE6.

А какие указания для размеров используете вы? Делитесь мыслями в комментариях.

* * *

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

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

1. Периодическая таблица шрифтов
2. FLIR — ещё одна возможность избавиться от стандартных шрифтов на сайте
3. 96% или резиновая модульная сетка для Web

Множество статей и обзоров в личных и корпоративных блогах IT-компаний и веб-разработчиков посвящено непростым отношениям между заказчиками и исполнителями, сложностях принятия решений, срывов сроков, откатов и прочих неудачных буднях.

При этом заказчик, почти всегда, выставляется либо человеком «не в теме» со «смещённым чувством вкуса», либо монстром, губящим на корню самые креативные и светлые идеи своим непробиваемым сознанием и консерватизмом.

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

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

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

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

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

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

Дальше уже должна была начинаться работа менеджеров по работе с клиентами. Теоретически...

Студия Ди

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

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

Никакого интереса по поводу того, кто звонит, как зовут клиента, в чем заинтересован и прочих (стандартных) вещей высказано не было, контактный телефон никто не спросил.

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

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

Cтудия Эм

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

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

Первый звонок. Ответ был почти таким же, как и в первом случае: «о создании сайта можно поговорить с таким-то человеком, которого сейчас нет, он будет после обеда, или можно перезвонить по следующему номеру: XXX-XX-XX». Контактные данные потенциального заказчика снова никого не заинтересовали. А по номеру, который был дан, в течение дня никто не ответил и не перезвонил.

Клиент ушёл.

Студия Эс

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

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

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

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

Студия Эм2

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

При звонке (по традиции, первый и последний) снова никто не спросил, кто звонит и чем интересуется. Менеджер компании очень лениво рассказал, что создание сайта бесплатно, при условии подписания договора на поддержку в течение полугода.

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

Студия И

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

Телефонный звонок в студию получился таким же, как и все предыдущие: бессмысленным.

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

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

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

Первое предложение, высланное впоследствии на оставленный e-mail, получилось запутанным и слегка небрежным (вплоть до того, что форматы абзацев документа не совпадали местами). При этом, из двух высланных альтернативных предложений, не было понятно какой набор услуг входит в каждый из них. Мы в нём не разобрались и снова не стали продолжать сотрудничество.

Несколько выводов

1. Если для входящего клиента вопрос создания сайта срочный — ему нужно сильно напрягаться, для того, чтобы его получить.
2. Поскольку культура общения клиент-заказчик низкая, то сложностей не избежать.
3. Пытаясь ответить на вопрос «почему так?», ответ пока не приходит на ум. Судя по всему, здесь действует такие же правила, как и на остальном белорусском рынке. Пока для компаний нет никакого смысла разрабатывать программы лояльности клиента, потому что он не получает удовлетворения базовых потребностей.
4. Для того, чтобы быть успешной, компании сегодня достаточно обеспечить соответствие сервиса в реалии тому, который анонсируется в рекламе.
5. Мы решили проводить такое исследование периодически, чтобы посмотреть, что меняется, а также, по возможности, исследовать другие регионы.

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

Статья написана в соавторстве с М. Г., как непосредственной участницей событий.

* * *

Читаю в сети:

Плагин «Панель нагрузки WordPress». Вечные контекстные ссылки спасут мир.

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

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

1. Чем заменить Welcome?
2. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)
3. Как вставить угловой flash-баннер на сайт

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

А чтобы некоторые интересные штуковины и туториалы не прошли мимо, я собрал их в одном месте для вас (и для себя):

• Поддержка различными браузерами свойств CSS3.
• 11 примеров использования CSS3 — перевод статьи с сайта nettuts.com на Хабре. Наглядное сравнение возможностей CSS3 и CSS2.1 + JavaScript.
• Всё крутится и летает — очень оригинальные примеры анимации на CSS3.
• Создание кнопок в CSS3 с тенями, вдавленным текстом, закруглениями и градиентами.
• 12 полезных советов и приёмов в CSS3 — особо интересны колоночный контент, различные языки (+ направление текста) и множественные фоны. Остальное для закрепления ранее известных техник.
• Эффект вдавленного текста, модный сейчас на западных сайтах. Лучшее применение свойства text-shadow.
• Онлайн CSS3-генератор для простых свойств, применимых к блокам и тексту.
• Небольшие хитроcти от csstricks.com. Красивый эффект анимированного задымлённого текста. Там же пример с множественным фоном для навигации — будущая замена для Sliding Doors.
• Пуленепробиваемый синтаксис для @font-face.
• 3D-трансформации и CSS-анимация в Safari. Базовые понятия.
• Табы для блоков с меняющимся контентом на CSS3 без JavaScript. Отличный приём, но ему явно не хватает фиксации таба кликом, примерно такой, какую реализует в своих меню маг CSS Стю Николс.
• Чит-лист CSS3.

Напомню, что всё это работает в Google Chrome 3 и Safari 4.

Дополните список?

UPD:

• 8 впечатляющих вещей, которые можно cделать в CSS3.

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

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

1. CSS3-анимация вместо эффектов jQuery
2. Практические примеры анимации и эффектов в CSS3
3. Эффект отражения с помощью JavaScript

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

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

Основными требованиями к визиткам были прямая ассоциация с вебом, или чтобы человек не задавал лишних вопросов, получая визитку в руки (в случае, если он не совсем в теме).

Модный нынче hand-made, зелёные завитушки и гранжевый стиль сразу же были отставлены в сторону, так как это идеи перенесённые из жизни на экран, а хотелось наоборот. Минимализм тоже не прошёл отборочный тур.

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

А решение, как обычно, лежало на поверхности долгое время, мозолило глаза — такое модное, всем знакомое (кто же его не крутил просто так, играя?) и часто используемое на блогах анимированное 3D-облако тегов. Просто, и раскрыло тему на 100%.

А дальше уже никому не интересные технические моменты и рождение формы посредством иллюстратора.

Результат:

Уже проверено. Работает.

* * *

Интересное в блогах:

Редизайн Байнета — новый социально-сетевой проект для дизайнеров. Инвестируем в блог или как потратить 100$. Всё крутится и летает на CSS3.

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

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

1. Отчёт по эксперименту с CSS-галереями
2. Психология пользователей и оптимизация изображений для веб
3. Спорное оформление вкладок и кнопок

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

Достаточно открыть практически любой сайт обычной компании, и первое, что бросится в глаза на главной странице — это заголовок: «Добро пожаловать на сайт компании „Маленькая Но Очень Гордая Межгалактическая Корпорация“». Примерно так. Плюс, многие (продвинутые), еще ставят восклицательные знаки. Чтобы «эффектнее» было, наверное…

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

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

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

Зато однозначно можно сказать кто виноват: дизайнеры, веб-студии, маркетологи и контент-менеджеры. Клиент в последнюю очередь. Именно исполнители не объяснили, не захотели объяснить (или сами не знали :) всей важности первого впечатления от сайта, имиджа или влияния заголовка на главной на ту же поисковую оптимизацию.

Теперь вопрос для владельцев сайтов: чем непривлекателен такой заголовок для главной страницы — «Компания „Маленькая Но Очень Гордая Межгалактическая Корпорация“ — основной поставщик антигравитационных двигателей для кораблей класса „линкор“ за пределами Солнечной системы»?

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

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

* * *

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

Как заставить посетителей подписаться на RSS. Эффект liquid image — потрясная штуковина на JavaScript. Тест на узнаваемость для логотипа.

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

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

1. Спорное оформление вкладок и кнопок
2. Элементы входных страниц
3. Я пиарюсь → muzzombie.ru

Продолжу свою сагу о подключении к сайту углового баннера. В принципе всё, что хотел уже было написано в предыдущих частях (про flash-баннер, почитать можно тут и тут), но без альтернативной возможности создания подобного баннера на jQuery, рассказ был бы не полным. Исправляюсь.

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

+ / −

Плюсы: не нужен установленный в браузере flash.

Минусы (для меня не минусы, но все-таки): нужна библиотека jQuery; уголок не «шевелится», когда на него не наведён курсор. Нужен заметный дизайн, чтобы привлечь внимание.

Вредные советы

Я уже успел использовать в jQuery-баннер в одном из своих проектов, поэтому к написанному выше, добавлю пару своих рекомендаций.

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

Уверен, что те, кто столкнутся — поймут о чем речь.

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

2. Если нужны другие размеры уголка, то нужно изменить значения width и height. Сначала в CSS: в #pageflip img и #pageflip .msg_block. Это начальное состояние уголка, до наведения. И затем в скрипте установить новые параметры «развернутого состояния» (по молчанию 307 и 319 px) и сбросить старые «неразвёрнутого».

3. Для адептов кода: CSS не пройдет валидацию, пока не удалите строку -ms-interpolation-mode: bicubic. Лично я не заметил разницы с этим параметром и без при анимации в Internet Explorer.

Все. Про уголки больше не буду.

Используйте на пользу!

* * *

Сканер блогов:

В тему: плавное увеличение картинки при наведении курсора. SEO-откровения для новичков от Bormaley.

* * *

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

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

1. Как вставить угловой flash-баннер на сайт
2. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)
3. CSS3-анимация вместо эффектов jQuery