Awebdesign's Blog

Как быть креативным (главы 8, 9) / How to be creative (in russian)

(перевод Виктории Шидловской книги Hugh Macleod «How to be creative»)

У каждого есть свой Эверест, ради покорения которого он был послан на Землю.

Как быть креативным / How to be creative

Внезапно до нее дошел весь смысл ее жизни

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

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

Но давайте поговорим о вас. Вашей вершине. Вашем личном Эвересте. Да, именно о нем.

Предположим, вы никогда его не покорите. У вас что, будут из-за этого проблемы? Вы же можете сказать: «Ну и ладно, не больно-то и хотелось» и начать коллекционировать марки. Что вряд-ли. Не думаю, что для вас будет лучше никогда не попытаться. Иначе вы бы не дочитали до этого места.

Так что, думаю, вы все-таки решили залезть на этот чертов Эверест.

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

И вы справились с половиной битвы. Карабкайтесь дальше.

Чем человек талантливее, тем меньше он нуждается в ширмах.

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

Авраам Линкольн написал свою Геттисбергскую речь на куске обычной почтовой бумаги, которую одолжил у друга, где в тот момент остановился.

Джэймс Джойс писал простым карандашом в блокноте. Перепечатан он был гораздо позднее.

Ван Гог редко пользовался больше, чем шестью красками в палитре.

Я рисую на обороте визиток.

Нет никакой связи между креативностью и оборудованием. None. Zilch. Nada.

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

Какой-нибудь новый потрясающий инструмент – это просто еще одна ширма, за которую может спрятаться второразрядный работник.

Вот почему у нас так много второразрядных арт-директоров с самыми последними компьютерами от Apple.

Вот почему у нас так много плагиаторов с замечательными ноутбуками.

Вот почему у нас так много дерьмовых фотографов с дорогими камерами.

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

Прячутся за ширмами.

Ширмы не помогают, они мешают. Чем шире ширма, тем больше вы полагаетесь на нее психологически, тем больше она преграждает вам путь.

То же самое относится к бизнесу.

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

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

Опять-таки, прятались за ширмами.

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

Управляться с ширмами – самый лучший талант, который можно иметь на этой планете. Если он у вас есть – я вам завидую. Если нет – мне вас жалко.

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

Все, что мы можем сделать, это продолжать задавать себе вопрос: «Это ширма?» по поводу каждого аспекта своего бизнеса, дела, причины оставаться в живых. Чем больше мы задаем себе этот вопрос, тем быстрее выявляем их, тем быстрее они исчезают.

Продолжайте спрашивать. Как только перестанете – смерть.

Реклама

Как быть креативным (главы 6, 7) / How to be creative (in russian)

Как быть креативным / How to be creative

Рынок для чего-то стоящего безграничен

Не бросайте свою ежедневную работу

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

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

Хороший пример – мой друг Phil, нью-йоркский фотограф. Он делает по-настоящему безумные фотографии для альтернативных журналов – они ничего ему не платят, но зато он пополняет свое портфолио. А потом он идет и делает некоторое время фотографии для каталогов. Ничего особенного, но позволяет оплатить счета.

Еще один хороший пример – Martin Amis. Он пишет «серьезные» романы, но для поддержания семейного бюджета ему приходится писать заметки в лондонские газеты (книжные гонорары душераздирающе ничтожны, даже в случае с бестселлерами Амиса).

Или актеры. Один год Траволта играет ультра-хиппового парня, как из бульварных романов, («секс»), другой год снимается в каком-то тупом шпионском триллере («наличные»).

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

Такое балансирование позволяет устроить себе хорошую жизнь, при этом сохраняя свою творческую независимость.

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

С течением времени «резкость» может смазаться, но не «деление». Так что дуальность всегда позволяет находить баланс.

Как только вы это примете, действительно примете как данность, ваша карьера удивительным образом пойдет вверх. Я не знаю, почему так происходит. Но те, кто отказывается разделить свою жизнь подобным образом, кто просто хочет начать жизнь с чистого листа и бросить ежедневную работу ради того, чтобы стать великим писателем… Ну, они никогда таковыми не станут. Как бы то ни было, это теория «Секс и наличные». Держите ее под подушкой.

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

Как быть креативным / How to be creative

Иерархия компании (снизу вверх): лузеры, клей, социопаты

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

Хватит. На тот момент такая стратегия позволяла зарабатывать больше денег.

Но существует одна проблема. Командные Игроки не могут придумать что-то самостоятельно. Они не автономны, им нужна команда для того, чтобы существовать.

Так что нынешние планерки выглядят следующим образом:

«Я не знаю. А вы как думаете?»

«Я не знаю. А вы как думаете?»

«Я не знаю. А вы как думаете?»

«Я не знаю. А вы как думаете?»

«Я не знаю. А вы как думаете?»

«Я не знаю. А вы как думаете?»

И так далее.

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

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

Что происходит с экологией, когда количество паразитов достигает критической массы? Экология умирает.

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

Правда, если вы при этом на самом деле не креативный, то вы действительно в беде. И нет никакого волшебного слова или «новой системы взглядов», которая вам поможет. Возможно, вам не говорили об этом в вашей бизнес-школе…, но людям нравится смотреть, как умирают динозавры.

Как быть креативным (главы 3, 4, 5) / How to be creative (in russian)

Если ваш бизнес-план основан на том, что вас внезапно «откроют», то этот план, скорее всего, провальный.

Как быть креативным / Gapingvoid.com

А вы уже обняли своего клиента?

Никто ничего не открывает «вдруг». Все рождается в муках.

Пару лет назад мне пришло одно выгодное предложение. Компания выслала мне контракт. Я просмотрел его.

Хмммм…

Перезвонил в компанию. Попросил разъяснить некоторые пункты контракта. Больше я о них ничего не слышал. Сделка развалилась.

Это была очень уважаемая компания. Возможно, вы даже слышали о ней.

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

Они хотели ИМЕТЬ меня, независимо от того, насколько хороша работа, которую они делают.

Все то же самое можно сказать о большинстве крупных компаний. Они хотят, чтобы ты выкладывался на 110%, не давая взамен ничего. Художник для них – это всего лишь одна макаронина в большой миске пасты. Их бизнес-модель заключается в том, чтобы швырнуть эту пасту в стену и посмотреть, какая макаронина прилипнет. О тех, что упали на пол, просто забывают.

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

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

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

Вы в ответе за ваш собственный опыт

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

Той, которая слилась в экстазе с духом времени.

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

Так что естественно вы спрашиваете себя, когда и если вы нашли свою «Большую Идею», после многих лет труда, борьбы и сомнений, как вы поймете, что это ОНА?

Ответ: никак.

Никаких фанфар и пения хора ангелов. Ничего такого. Взамен – довольно противный голос, говорящий внутри вас: «Это абсолютная глупость. Чудовищный идиотизм. Трата времени. Собираюсь продолжать в том же духе».

И вы продолжаете в том же духе.

Идеи второго сорта любят фанфары гораздо больше. Фанфары позволяют им дольше продержаться.

Все рождены творческими. Всем в детском саду выдают коробку цветных карандашй.

Когда вы достигаете зрелости, карандаши забирают, а взамен дают учебники по алгебре Спустя годы, когда вас укусит жучок креативности, вы услышите тоненький внутренний голосок: «Верните мне мои карандаши, пожалуйста!»

Главное, первый толчок делать что-то получен. Напишите сценарий, роман, начните писать картину, отдайте рецепт своего шоколадного печенья в правильные руки, сделайте что-нибудь. Вы не понимаете, откуда пришел этот толчок. Такое ощущение, что он просто зашел к вам в дом, не постучавшись. До сих пор вы чувствовали себя вполне счастливым человеком, удовлетворенным своей работой… До сих пор.

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

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

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

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

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

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

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

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

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

Как быть креативным (глава 2)

(перевод Виктории Шидловской книги Hugh Macleod «How to be creative»)

2. Идея не должна быть большой, она должна всего лишь изменить мир

Как быть креативным / How to be creative

Ну и где твоя бизнес-модель? - ТЫ моя бизнес модель, богатенький Буратино...

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

Я такой же завистливый как все. За много лет я перепробовал массу вещей, безуспешно пытаясь вытащить свою карьеру из трясины посредственности. Попробовал себя в бизнесе, в искусстве… Однажды вечером после очередного фальстарта я просто сдался. Сидя в баре, выжженный до тла работой и вообще жизнью, я начал рисовать картинки на оборотке визиток, просто, без всякой причины. Мне даже не нужна была причина. Я делал это потому, что там были визитки, и они привлекли меня каким-то случайным образом.

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

Можно было ни на кого не производить впечатление, ради разнообразия.

Можно было почувствовать абсолютную независимость, абсолютную свободу, ради разнообразия.

Эта идея могла принадлежать только мне, и никому другому, ради разнообразия.

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

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

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

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

А чем более потрясающего, тем больше людей обратят на нее внимание. Тем больше она изменит мир.

Вот чему научило меня рисование комиксов на визитках.

Как быть креативным (на русском)

Начинаю перевод книги Hugh Macleod «How to be creative». Книга за последние пять лет приобрела невероятную популярность на западе. Hugh Macleod — художник-карикатурист, который придумал рисовать кариткатуры на обратной стороне визитных карточек. В книге он рассказывает, как быть креативным, то есть — творческим человеком. Не как стать, а как быть тем, кто уже несет тяжкий крест таланта :).

Печатать буду по одной-две главы. Так что следите за обновлениями.

  1. Игнорируйте всех.
Как быть креативным / how to be creative

Нет ничего плохого в том, чтобы быть овцой, главное при этом - быть КРУТОЙ овцой! Овца: "О-о-о! Я потрясающая!"

Чем более оригинальной будет ваша идея, тем меньше другие люди смогут посоветовать. Когда я только начал рисовать комиксы на обратной стороне визитных карточек, все думали, что я дурак. Типа, почему бы мне не заняться чем-то более реальным, вроде ути-пути-открыточек на рождество?
Вы не сможете понять, насколько ваша идея хороша в тот момент, когда она только родилась. И никто не сможет. Единственное, на что вы можете надеяться – на то хорошее сильное чувство, которое она у вас вызывает. И верить в это чувство. А это совсем не так просто, как считают некоторые оптимисты.
Спрашивать мнение друзей тоже не очень хорошая мысль. Дело не в том, что они не хотят помочь. Просто они не знают и миллионной доли вашего внутреннего мира, независимо от того, как они стараются понять, а вы – объяснить.
Плюс к тому, большая идея изменит вас. Ваши друзья могут любить вас, но они не хотят, чтобы вы изменились. Если вы изменитесь, то и ваши отношения с ними изменятся. Им нравится существующий порядок вещей, они любят вас именно таким, какой вы есть, а не таким, каким вы можете стать.
Вывод: у них нет никакого желания видеть вас изменившимся. И они будут сопротивляться всему, что катализирует этот процесс. Такова человеческая природа. И вы такой же.
Еще хуже обстоят дела с коллегами по бизнесу. Они привыкли иметь с вами дело на определенный манер. Они привыкли контролировать ваши отношения. И думают в первую очередь о собственном процветании. Конечно, они могут быть заинтересованы и вашем процветании, но это не приоритет в их жизни.

Хорошие идеи нарушают баланс власти в отношениях, вот почему хорошие идеи всегда встречают отпор окружающих.

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

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

Горизонтальная прокрутка с ява-скриптом 2, урок по CSS и jQuery

Перевод Виктории Шидловской урока Horizontal Scrolling Menu made with CSS and jQuery от Andrew Valums.

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

Посмотреть результат

Добаляем базовые стили

div.sc_menu {
/* Установите эти значения, чтобы мы могли просчитать отступ слева*/
position: relative;
height: 145px;
width: 500px;
/* Add scroll-bars */
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* Здесь максимальная ширина для пользователей без Javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* Remove default margin */
margin: 0;
background: url(‘navigation.png’);
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* Мы добавим заголовок под каждой картинкой */
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}

Значения “width” и “overflow” добавлены для того, чтобы у тянущегося div-а появились скроллбары. Мы указываем значение “position” для того, чтобы ява-скрипту было легче просчитать отступ. Не забывайте, что отступ всегда просчитывается относительно родителя. Вы можете посмотреть, что получилось, здесь.

Добавляем эффект hover (когда мышь проходит над элементом) и рамки (borders)

Значение “display: none” прячет заголовки, и мы прописываем “display:block” к “:hover”, чтобы показывать их, когда мышка находится над картинкой.

“-webkit-border-radius” и “-moz-border-radius” делают углы наших рамок скругленными в таких браузерах, как Firefox, Safari и Chrome. К сожалению, Internet Explorer не поддерживает это свойство и будет отображать обычные углы.

Вот как выглядит меню, если поддержка ява-скриптов отключена.

Код:

.sc_menu span {
 display: none;
 margin-top: 3px;
 text-align: center;
 font-size: 12px;
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50);
 opacity: 0.5;
}

jQuery

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Вот, что вы должны знать, чтобы понять код:

$() – это сокращенное имя для функции $(document).ready(), самая часто используемая функция jQuery. Это позволяет вызывать скрипт сразу после загрузки дерева страницы.

$(function(){
  // Your code here
});

Мы будем использовать событие “mousemove”, чтобы запускать скрипт при движении мышки над меню.

“ul.width()” не возвращает значение реальной ширины всех изображений, так как мы задали ширину списка с помощью CSS, чтобы выводить все изображения в одну линию. Мы можем получить эту ширину, сложив вместе ширину последнего изображения и его отступ слева.

Мы используем функцию “lastLi[0]” из коллекции jQuery и “offsetLeft”, чтобы получить координаты левого верхнего угла последней картинки относительно div-а.

Атрибут “lastLi[0]” возвращает Х-координату мышки относительно страницы, но нам нужно получать эту координату относительно div-а, поэтому мы воспользуемся “div.offset().left”

Список картинок должен двигаться быстрее, чем мышь над ним, поэтому его движение задаем с помощью формулы “(ulWidth-divWidth) / divWidth”.

Вот ява-скрипт:

$(function(){
 //Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области
 var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // левый отступ (margin) ненумерованного списка
               ulPadding = 15;
  //Указываем переменную для ширины меню
  var divWidth = div.width();
  //Удаляем скроллбары
  div.css({overflow: 'hidden'});
  //Ищем последний элемент списка
  var lastLi = ul.find('li:last-child');
  //Когда пользователь проводит мышкой над меню
  div.mousemove(function(e){
    //Так как ширина списка увеличивается с загрузкой каждой новой картинки,
    //то мы пересчитываем ее каждый раз
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

Также решение для нескольких скроллер-меню на одной странице:

$(function(){
//Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области

var div = $(’div.sc_menu’),
ul = $(’ul.sc_menu’),
ulPadding = 15;

// Удаляем скроллбары
div.css({overflow: ‘hidden’});

// Когда пользователь проводит мышкой над меню
div.mousemove(function(e){

//Получаем ширину меню
var divWidth = $(this).width();

// Ищем последний элемент списка
var lastLi = $(this).find(’li:last-child’);

//Так как ширина списка увеличивается с загрузкой каждой новой картинки,
//то мы пересчитываем ее каждый раз
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX – div.offset().left) * (ulWidth-divWidth) / divWidth;
$(this).scrollLeft(left);
});
});

В общем, нужно перетащить расчеты ширины списка и координат последнего элемента внутрь функции и задействовать $(this).scrollLeft(left) вместо div.scrollLeft(left).

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

Добавила прокрутку с ява-скриптом 3 — горизонтальная прокрутка колесиком и перетаскиванием!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

Уроки HTML5 – создаем макет

Перевод Виктории Шидловской статьи из журнала Smashing Magazine — Coding A HTML 5 Layout From Scratch

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

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

  1. Использовать Вежливое ухудшение для того, чтобы вещи оставались на своих местах при отображении в действующих браузерах.
  2. Использовать Прогрессивное улучшение, чтобы оставаться на острие событий.
  3. Использовать HTML5 вместе с быстро-растущей технологией Microformats.
  4. Иметь четкое представление о самых замечательных возможностях, которые обещает нам появление HTML5 и CSS3.

Для начала лучше прочитать следующие статьи:

HTML5 – введение в новый язык разметки

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Я также расчитываю на то, что вы знаете основы HTML, CSS, включая все «старые» тэги и свойства.

До того, как мы начнем…

Есть пара вещей, которые вы должны знать о HTML5. Дело в том, что этот язык не для всех. Поэтому вы должны тщательно выбирать, где и когда его применять. Думайте о всех способах разметки, как об инструментах, которые находятся в вашем распоряжении и используйте нужный инструмент в нужном месте. Так что если, предположим, ваш документ написан на XHTML strict, то нет никакой необходимости переписывать его на HTML5.

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

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

Несколько слов о Прогрессивном улучшении и Вежливом ухудшении

Итак, что означают эти термины? Вежливое ухудшение – широко распространенная техника, когда сначала используют новейшую технологию, а потом подгоняют ее под старые браузеры. Мы делаем это ежедневно. Большинство из нас сначала пишут код под Firefox, а потом фиксируют и исправляют ошибки под Explorer. Это и есть Вежливое ухудшение в действии.

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

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

1. Дизайн

Это шаблон, который мы сейчас будем собирать:

дизайн шаблона на HTML5

Данный шаблон включает все элементы, которые мы будем изучать в этом уроке, а именно: название страницы и ее слоган (name & slogan), рекламный блок (в оригинале featured block, не смогла подобрать аналог на русском, у нас обычно блоки «Новости» или «Акции» – прим. переводчика), список постов (post listing), экстра-раздел с линками (extras section), подвал с описанием страницы (about box) и, наконец, копирайт (copiright).

2. Разметка страницы

Стартовая разметка страницы, HTML5-скелет:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" />
<!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
        <script src="js/IE8.js"></script><![endif]-->
<!--[if lt IE 7]>
        <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body>
</body>
</html>

Несколько замечаний:

  • 3 помеченных комментариями записи для IE. Первая встраивает html5 shiv из Google Code (читайте HTML5 SHIV теперь в виде скрипта!). Вторая включает IE8.js для лучшей обратной совместимости с IE7 и ниже. Третья – это файл CSS, который исправляет баги в IE6.
  • Использование id “index” и class “home” в тэге <body>. Это просто привычка, которую я выработал за последний год, она упростила сборку сложных макетов.
  • Упрощенный charset для лучшей обратной совместимости с действующими браузерами.
  • Я использую синтаксис XHTML 1.0 при сборке шаблона на HTML5. Так как я МОГУ использовать этот синтаксис, то так я и делаю. Однако вы можете использовать обычный HTML. Отличия от HTML – закрывание самозакрывающихся тэгов (<br />, например) и отсутствие кавычек в размерных атрибутах (width = 200). Но это на ваш выбор.

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

Если бы существовал рентген-аппарат для вебсайтов, то вот такой скелет вы бы увидели:

основа для HTML5 - шаблон

Шапка (header)

шапка шаблона на HTML5

Понятие header так же элементарно, как его перевод с английского. В спецификации написано:

«Элемент header отображает группу презентационных элементов и навигацию».

Также мы будем использовать элемент <nav>.

Спецификация о nav:

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

Было много бурчанья по поводу спецификации элемента nav, так как фраза «главные навигационные блоки» слишком раплывчата. Но так как сейчас мы говорим о главной навигации всего сайта, то ничего главнее быть не может. Так что после пары id и классов наш header выглядит так:

<header>
        <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
        <nav><ul>
               <li><a href="#">home</a></li>
               <li><a href="#">portfolio</a></li>
               <li><a href="#">blog</a></li>
               <li><a href="#">contact</a></li>
        </ul></nav>
</header><!-- /#banner -->

Рекламный блок (featured)

рекламный блок - шаблон HTML5

Его лучше всего разметить как <aside>, так как спецификация aside гласит:

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

В спецификации достаточно много обоснований для использования этого элемента в нашем случае. А внутри этого блока происходит много чего еще. Во-первых, внутри будет заметка, а значит мы будем использовать тэг <article>.

У нас также есть два последовательных заголовка: «Featured Article» и «HTML5 in Smashing Magazine!», так что мы будем использовать еще один элемент — <hgroup>. Это прекрасный тэг, предназначенный для группирования тэгов <h#>, — как раз наш случай. Он существует для маскирования элемента h2 (заголовка второго уровня), что спасет разработчиков от лишней головной боли в будущем.

И последний элемент в этом блоке – логотип журнала Smashing Magazine. Для этого у нас есть еще один элемент разметки — <figure>. Этот тэг предназначен для включения контента, обычно с заголовком, который самодостаточен и отделен от остального содержимого. Мы также могли бы использовать тэг <legend> для заголовка. К сожалению, он не работает в некоторых браузерах, которые пытаются добавить <fieldset>, и этот баг невозможно преодолеть силам простого CSS (читайте Что такое HTML5 SHIV – уроки HTML5). Поэтому я предлагаю обойтись без <legend>, остановимся пока на использовании <figure>.

Код рекламного блока будет выглядеть так:

<aside><article>
        <figure>
               <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
        </figure>
        <hgroup>
               <h2>Featured Article</h2>
               <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
        </hgroup>
        <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->

Основное содержимое (body)

Основное содержимое шаблона HTML5

Следующий этап – создание «тела» нашего документа. Так как этот блок отображает главное содержимое, а оно представляет собой группу тематических сообщений, то без сомнения здесь можно применить тэг <section>.

Для постов мы используем элемент <ol>, так как это обычный список статей. Каждый <li> будет содержать <article>, а внутри у нас будут располагаться <header> для заголовка поста, <footer> для информации о посте и <div> для содержимого поста. Да, <div>. Причина использования <div> очень проста: мы будем использовать hAtom 0.1 Microformat, а он требует div-а для того, чтобы контент растягивался. Так как никакой другой элемент не подходит для этого (это не section, не article и не footer), то мы возьмем <div> — он не несет никакой семантической нагрузки и отобразит разметку максимально чисто.

Со всеми этими тэгами и вставленным hAtom microformat код будет выглядеть так:

<section>
        <ol>
               <li><article>
                       <header>
                               <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
                       </header>
                       <footer>
                               <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                                      10th October 2005
                               </abbr>
                               <address>
                                      By <a href="#">Enrique Ramírez</a>
                               </address>
                       </footer><!-- /.post-info -->
                       <div>
                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                       </div><!-- /.entry-content -->
               </article></li>
               <li><article>
                       ...
               </article></li>
               <li><article>
                       ...
               </article></li>
        </ol><!-- /#posts-list -->
</section><!-- /#content -->

Для продвинутых: да, я не использовал элемент <time>. Этот тэг сравнительно новый и несовместим с текущим microformat. Так как я в самом деле использую hAtom, то вместе ни microformat, ни новый тэг не будут работать. Если вы не используете microformat, то можно использовать <time>.

Экстра-раздел

раздел Экстра шаблона HTML5

Экстра-блок – еще один раздел нашего сайта. Вы можете посомневаться немного, какой тэг лучше сюда подойдет: <aside> или <section>. В конце концов, так как раздел не совсем тематически отделен от основного содержимого (все же это тематические линки и социальная сеть), то лучше используем тэг <section>.

Здесь мы найдем другое применение тэгу <div>. В целях стилизации и разделения на группы мы добавим два дива: один для блогролла и один для социального раздела.

Что касается остального, то здесь нечего решать: используем наш обычный <ul> для списка ссылок в обоих разделах. Выглядит это так:

<section>
        <div>
               <h2>blogroll</h2>
               <ul>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
               </ul>
        </div><!-- /.blogroll -->
        <div>
               <h2>social</h2>
               <ul>
                       <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
                       <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
                       <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
                       <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
                       <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
                       <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
               </ul>
        </div><!-- /.social -->
</section><!-- /#extras -->

Описание страницы и копирайт (about box & copyright)

подвал (футер) шаблона HTML5

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

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

Так как ближайшим «родителем» нашего <footer> является <body>, то более чем правильно разместить оба элемента здесь, указывая автора и владельца сайта.

Для блока «о сайте» мы используем тэг <address>, который будет содержать контактную информацию о своем ближайшем «родителе» — элементов <article> или <body>. Мы также используем hCard Microformat (для того, чтобы роботы и люди могли иметь более полное представление о контактной информации; о микроформатах будет написано позже – прим. переводчика). Для копирайта мы используем обычный тэг <p>. Так что в конце концов подвал выглядит так:

<footer>
        <address>
               <span>
                       <strong><a href="#">Smashing Magazine</a></strong>
                       <span>Amazing Magazine</span>
               </span><!-- /.primary -->
               <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
               <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
        </address><!-- /#about -->
        <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Собираем все вместе

Итак, после всех этих манипуляций код выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" />
<!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
        <script src="js/IE8.js"></script><![endif]-->
<!--[if lt IE 7]>
        <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body>
<header>
        <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
        <nav><ul>
               <li><a href="#">home</a></li>
               <li><a href="#">portfolio</a></li>
               <li><a href="#">blog</a></li>
               <li><a href="#">contact</a></li>
        </ul></nav>
</header><!-- /#banner -->
<aside><article>
        <figure>
               <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
        </figure>
        <hgroup>
               <h2>Featured Article</h2>
               <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
        </hgroup>
        <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
<section>
        <ol>
               <li><article>
                       <header>
                               <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
                       </header>
                       <footer>
                               <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                                      10th October 2005
                               </abbr>
                               <address>
                                      By <a href="#">Enrique Ramírez</a>
                               </address>
                       </footer><!-- /.post-info -->
                       <div>
                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                       </div><!-- /.entry-content -->
               </article></li>
               <li><article>
                       ...
               </article></li>
               <li><article>
                       ...
               </article></li>
        </ol><!-- /#posts-list -->
</section><!-- /#content -->
<section>
        <div>
               <h2>blogroll</h2>
               <ul>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
               </ul>
        </div><!-- /.blogroll -->
        <div>
               <h2>social</h2>
               <ul>
                       <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
                       <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
                       <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
                       <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
                       <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
                       <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
               </ul>
        </div><!-- /.social -->
</section><!-- /#extras -->
<footer>
        <address>
               <span>
                       <strong><a href="#">Smashing Magazine</a></strong>
                       <span>Amazing Magazine</span>
               </span><!-- /.primary -->
               <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
               <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
        </address><!-- /#about -->
        <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
</body>
</html>

3. CSS

Как и основной код, наш CSS сначала выглядит очень просто. Это шаблон, который я открываю в начале работы над любым проектом:

/*
        Name: Smashing HTML5
        Date: July 2009
        Description: Sample layout for HTML5 and CSS3 goodness.
        Version: 1.0
        Author: Enrique Ramírez
        Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
        body {
               background: #F5F4EF url('../images/bg.png');
               color: #000305;
               font-size: 87.5%; /* Base font size: 14px */
               font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
               line-height: 1.429;
               margin: 0;
               padding: 0;
               text-align: left;
        }
/* Headings */
h2 {font-size: 1.571em}        /* 22px */
h3 {font-size: 1.429em}        /* 20px */
h4 {font-size: 1.286em}        /* 18px */
h5 {font-size: 1.143em}        /* 16px */
h6 {font-size: 1em}    /* 14px */
h2, h3, h4, h5, h6 {
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
        color: #C74350;
        padding: 0 1px;
        text-decoration: underline;
}
a:hover, a:active {
        background-color: #C74350;
        color: #fff;
        text-decoration: none;
        text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
        list-style: outside disc;
        margin: 1em 0 1.5em 1.5em;
}
ol {
        list-style: outside decimal;
        margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
        /* Thead */
        thead th {padding: .5em .4em; text-align: left;}
        thead td {}
        /* Tbody */
        tbody td {padding: .5em .4em;}
        tbody th {}
        tbody .alt td {}
        tbody .alt th {}
        /* Tfoot */
        tfoot th {}
        tfoot td {}

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

  • Для оптимального кодирования некоторая информация обо мне в начале файла.
  • 2 импорта в начале файла. Первый — Eric Meyer’s CSS reset. Второй – персонализированные глобальные формы, смысл которых я объясню позже.
  • Базовые стили для основных тэгов.

Объяснение некоторых свойств

Во-первых, я использую свойство CSS3 text-shadow. Для объяснения прилагаю пример:

text-shadow: 1px 5px 2px #333;

Благодаря этому мы получим тень цветом #333, отбрасываемую текстом на 1 пиксель вправо, 5 пикселей вниз и с размытием в два пикселя. Просто, не так ли? Вы можете использовать значения hex и rgba плюс CSS unit (кроме %).

Также у нас в распоряжении эта крошка:

* p:last-child {margin-bottom: 0;}

Эта строка удалит margin вниз в тэге <p>, если он является последним дочерним элементом (child) у своего «родителя» (parent). Дя тех, кто незнаком с ООП: пример – child таблицы – это <tr> или <td>; соответственно, <table> — их родитель. Последний child таблицы – это последний tr, то есть – последняя строка. То, что мы сделали в нашем примере — полезно для избежания слишком больших вертикальных расстояний между параграфом (текстом) и нижней границей таблицы.

Наконец, у нас есть пара селекторов:

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

::selection – это CSS3 selector, который позволяет нам задавать стиль выделяемого текста. Имеет только две возможности – задавать цвет фона и цвет шрифта. ::-moz-selection тоже должен быть прописан, так как Мозилла не распознает селектор ::selection.

Запускаем HTML5

Как я уже говорил ранее, HTML5 пока еще не распознается браузерами. А если браузер не распознает элемент, он не может применить к нему стили.

Справедливо предположить, что все браузеры будут применять что-то вроде display:inline для нераспознанных элементов. Это не тот стиль, который мы хотели бы видеть в действии для таких элементов, как <section>, поэтому мы должны объяснить браузеру, как он должен отображать эти элементы:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
        display: block;
}

Ну вот! Теперь мы можем стилизовать наши элементы так, как если бы они были обычными div-элементами!

Некоторые из вас наверное заметили, что я добавил атрибут class=”body” в главном разделе нашего макета. Я хочу, чтобы «тело» моего сайта было определенной ширины – 800 пикселей. И я никогда не был фанатом использования огромных растянутых div-ов для этих целей. Поэтому мы используем базовую технику центрирования с помощью margin-ов. Также я добавлю пару общих классов, которые будут использованы для второстепенного контента.

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

Стилизозвание header

Начнем с header. Это просто. Мы всего лишь зададим отступы и кое-какое стилизование текста. Ничего такого, чего мы не делали до сих пор.

/*
        Header
*****************/
#banner {
        margin: 0 auto;
        padding: 2.5em 0 0 0;
}
        /* Banner */
        #banner h1 {font-size: 3.571em; line-height: .6;}
        #banner h1 a:link, #banner h1 a:visited {
               color: #000305;
               display: block;
               font-weight: bold;
               margin: 0 0 .6em .2em;
               text-decoration: none;
               width: 427px;
        }
        #banner h1 a:hover, #banner h1 a:active {
               background: none;
               color: #C74350;
               text-shadow: none;
        }
        #banner h1 strong {font-size: 0.36em; font-weight: normal;}

Сейчас стилизуем навигацию. Опять ничего особенного:

/* Main Nav */
#banner nav {
        background: #000305;
        font-size: 1.143em;
        height: 40px;
        line-height: 30px;
        margin: 0 auto 2em auto;
        padding: 0;
        text-align: center;
        width: 800px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
        color: #fff;
        display: inline-block;
        height: 30px;
        padding: 5px 1.5em;
        text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
        background: #C74451;
        color: #fff;
        text-shadow: none !important;
}
#banner nav li:first-child a {
        border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
}

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

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

Вы могли также заметить !important. Используется для отмены стиля по умолчанию (text-shadow) без сложных уточнений. В данном примере — больше в обучающих целях.

Стилизование блоков Featured и Body

Далее – CSS для обоих блоков. Заметьте, там нет стилей для постов, только для основного контента.

/*
        Featured
*****************/
#featured {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}
#featured figure {
        border: 2px solid #eee;
        float: right;
        margin: 0.786em 2em 0 5em;
        width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
/*
        Body
*****************/
#content {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px 20px;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

Опять-таки, — ничего нового, обычные стили: margin, background, color и text. Повторяю это для того, чтобы вы поняли, что стили в HTML5 такие же простые как были до этого.

Стили для блока Extra

Наконец что-то интересное. Но начнем с базового стилизования.

/*
        Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
        color: #C74350;
        font-size: 1.429em;
        margin-bottom: .25em;
        padding: 0 3px;
}
#extras a:link, #extras a:visited {
        color: #444;
        display: block;
        border-bottom: 1px solid #F4E3E3;
        text-decoration: none;
        padding: .3em .25em;
}
        /* Blogroll */
        #extras .blogroll {
               float: left;
               width: 615px;
        }
        #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
        /* Social */
        #extras .social {
               float: right;
               width: 175px;
        }

Как вы видите на картинке, у меня трехколоночный макет для блока blogroll с плавающими <li>, и последняя колонка с социальной информацией гораздо Уже двух остальных. Макет хорош и так, но меня беспокоит одна вещь: я про border под каждой строкой.

CSS3 для HTML5

Голубым выделена область, которая мне не нравится. Я добавил по одному border-у под каждым элементом: <li> и <a> тэги имеют подчеркивание снизу шириной в один пиксель, но разного цвета, и я не хочу этого подчеркивания в самой последней строке. Так что мы удалим border у последних двух элементов в блогролле и одного в социалке.

Сначала удалим подчеркивание у последних <li> каждого блока. С использованием селектора CSS3 :last-child, мы можем вычленить последний <li> у родительского <ul>.

#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}

Таким образом мы удалили подчеркивание для ‘li’ и ‘li a’ в последнем элементе. Но как удалить его для двух предыдущих?

CSS3 для HTML5

Встречайте :nth-last-child().

#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

Выглядит сложно? На самом деле мы просто указываем на последние два элемента с конца, как раз те, где я хочу удалить border.

Как и следовало ожидать, этот прием не работает в IE, хотя IE8.js поддерживает :last-child, он не поддерживает :nth-last-child, так что подчеркивание в нем появится. Но это не главная дизайнерская проблема, так как информация на сайте все равно доступна. Так что не будем заострять внимание на удалении border-ов в IE.

Добавление иконок в социальный раздел
Добавим немного специй. Мы все знаем, как здорово выглядят маленькие иконки напротив каждой ссылки. Мы везде встречаем этот дизайнерский прием. Существует миллион способов сделать это, но мы воспользуемся новым селектором CSS3.

Знакомьтесь: a[n='b'] выделит все <a> с атрибутом n значения b. Например, если мы используем a[href='picture.jpg'], то мы укажем CSS3 на элемент <a href="picture.jpg">. Это здорово, но не свовсем то, чего мы хотим добиться, так как в нашем случае URL-ы картинок могут различаться. Вот несколько селекторов, которые могут нам пригодиться:

  • a[n] выделит все <a> с атрибутом n, независимо от его значения.
  • a[n='b'] выделит все <a> с атрибутом n значения b.
  • a[n~='b'] выделит все <a> с атрибутом n, который равен b, а b в свою очередь – одно из значений в списке разделенных пробелами чисел (или букв).
  • a[n^='b'] выделит все <a> с атрибутом n который начинается со значения b.
  • a[n*='b'] выделит все <a> с атрибутом n со значением b где-либо в пределах имени (или значения).

Последний вариант подходит нам как нельзя лучше. Так что мы будем выделять все <a> тэги с кусочком текста где-нибудь в пределах URL. Вот наш код:

#extras div[class='social'] a {
        background-repeat: no-repeat;
        background-position: 3px 6px;
        padding-left: 25px;
}

/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}

Первый кусок кода добавит отступ (padding) к социальным ссылкам, чтобы появилось место для иконок. Он также добавит фон по умолчанию, чтобы мы не делали этого потом. Вам наверное интересно, почему я написал div[class='social']вместо того, чтобы написать div.social. Просто потому, что некоторые браузеры (IE, как всегда) не поддерживают этот вид селектора, а мы не хотим появление белого зазора перед сдвинутыми ссылками. Поэтому прописывание того же фона, что и для фона иконок, будет нашей страховкой. IE в таком случае не выполнит ни padding, ни background image, а все остальные браузеры выполнят.

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

Стилизуем footer

И наконец – footer. Как и прежде – обычный CSS, ничего нового, кроме border radius:

/*
        About
*****************/
#about {
        background: #fff;
        font-style: normal;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px;
        text-align: left;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
        Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

Список постов

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

/* Blog */
.hentry {
        border-bottom: 1px solid #eee;
        padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
        /* Content */
        .hentry footer {margin-bottom: 2em;}
        .hentry footer address {display: inline;}
        #posts-list footer address {display: block;}
        /* Blog Index */
        #posts-list {list-style: none; margin: 0;}
        #posts-list .hentry {padding-left: 200px; position: relative;}
        #posts-list footer {
               left: 10px;
               position: absolute;
               top: 1.5em;
               width: 190px;
        }

Я удаляю все margin и padding для последнего поста (чтобы исчез большой зазор внизу блока). Также я использую селектор ‘>’, который указывает на конкретный дочерний элемент (child). Например #content > .hentry укажет на элемент a.hentry, находящийся прямо внутри #content. Если бы .hentry находился, к примеру, в списке, то это правило уже бы не сработало, так как .hentry в таком случае был бы «внуком» (grandchild), а не прямым наследником (child) элемента #content. Так что мы указываем именно на пост.

Продолжаем код:

#posts-list .hentry:hover {
        background: #C64350;
        color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
        color: #F6CF74;
        text-shadow: 1px 1px 1px #333;
}

Этот код изменит фон <li>, цвет текста и цвет ссылок, когда мышка находится над <li>.

HTML5 позволяет пользователям заключать в тэг <a> целые блоки информации. Так что мы можем заставить весь элемент <hentry> вести себя как единая ссылка. Но после нескольких тестов я выяснил, что Firefox 3.5.1 не готов к таким экспериментам, возможно, от слишком большого количества неизвестных эелементов внутри .hentry. Safari, Opera и даже IE6 вели себя правильно. Взгляните на тестовую страницу. Ниже несколько скриншотов, если у вас есть только один браузер.

Opera 9.64:

HTML5+CSS3 Opera

Safari 4.0.2:
Превью HTML5+CSS3 Safari

Internet Explorer 6:

HTML5+CSS3 Internet Explorer

Firefox 3.5.1:

HTML5+CSS3 Firefox

Так что в Firefox выделение блоков информации в качестве ссылок не работает. Однако мы можем добавить хороший эффект элементу <li>.

Оптимизация под IE6

Наконец, мы должны как-то довести все это до IE6. Ниже файлы ie.css и ie6.css, каждая строка имеет комментарий справа или сверху, который объясняет, что происходит.

Это код для ie.css:

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */

Этот для ie6.css

#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */

/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}

Итак, как выглядит теперь наш макет? Взгляните на финальный продукт. Он был протестирован на IE6, Firefox 3, Firefox 3.5, Opera 9.64 и Safari 4.0.2, везде отображается правильно.

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

Читать далее:

Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!

HTML5 – введение в новый язык разметки

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать».

%d такие блоггеры, как: