BarCode

IP

Le Cafe Noir

Locks

Ant

Hero

Fiot

Neck & Body

La Femme

CodeFish

EcoFood

Dense

CodeMouse

Xmas

SevenSparrows

Crown

CloudCorner

Ehome

Half

Half

Но если слова мои выглядят неубедительными, то прежде чем качать взгляните на скриншот. Сомнения «качать-некачать» пропадают, верно? Добавлю, что в архиве также лежат шрифты, использованные в теме, и исходники (правда в формате png).

Скачать

В распространении таких дебатов немало поучаствовал Стив Джобс, который во время одной из встреч, посвященных выпуску iPad негативно отзывался о мультимедийной технологии Adobe Flash и называл ее устаревшим пожирателем ресурсов. Он же призвал веб сообщество отказаться от флеша в пользу более современных технологий, Adobe Flash – устаревший пожиратель ресурсов таких как HTML5. Многие разработчики подхватили эту идею и сейчас значительное количество приложений для того же iPad разрабатываются именно на HTML5, а всем известные лидеры онлайн видео YouTube и Vimeo еще в конце января 2010 года объявили, что вскоре планируют внедрить поддержку элемента <video> HTML5.

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

1. Adobe Flash (ранее известная как Macromedia Flash)
2. HTML (ну что про него еще скажешь?)
3. Canvas (элемент HTML 5, который предназначен для создания bitmap изображения при помощи JavaScript), который на сегодняшний день наиболее часто используется для построения графиков, простой анимации и игр в веб-браузерах
4. SVG (язык разметки масштабируемой векторной графики, предназначенный для описания двумерной векторной и смешанной векторно/растровой графики в формате XML)

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

1. HTML
2. Canvas
3. SVG
4. Flash

Но это еще не все. Для каждого примера вы можете варьировать количество частиц, изменяя их число в строке ввода. Например:
1. Canvas 250
2. Canvas 500
3. Canvas 1000

…и включать\отключать отображения тени, меняя значения true/false:
1. Canvas
2. SVG
3. Flash

Этот тест был проделан для разного количества частиц (250, 500, 1000, 2000 и 4000), разных браузеров и операционных систем. И что же? Если не вдаваться в подробности, то Flash по прежнему находится на лидирующей позиции, за ним идет Canvas, потом HTML и SVG. Хотя надо отдать должное Safari – на невысоком количестве частиц он отлично поддерживают собственную технологию.

Графики по браузерам:
- Safari 4.0.3, OS X
- Firefox 3.6, Windows XP
- Chrome 4.0.249.89, Windows XP
- Internet Explorer 8, Windows XP

И в завершение

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

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

Приятного просмотра!

Coldi

скачать

Pincoyablack

скачать

Cube

скачать

Cow-cow

скачать

Glide(cyr)

скачать

Mod(cyr)

скачать

Oval

скачать

Portal

скачать

Mammagamma

скачать

Digitica

скачать

Ripe

скачать

Bender(cyr)

скачать

Donna

скачать

Museo

скачать

Arca(cyr)

скачать

Скачать все шрифты

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

365 Design

DJ Loop

Ripple

Typies

Bio

Seolution

Wrong / Right

Vuzum

Big Shift

Killed Productions

Hole

KASEY

Open Box

Umbrella Prints

Wave

Look

MonKey

Get Wired

Dash

Spry

Fhoke

Для тех, кто не знает или сомневается, напомним, что граватар (от англ. gravatar) – это глобально распознаваемый аватар (globally recognized avatar) – простое изображение размером 80х80 пикселей, которое «следует» за вами от блога к блогу. Само изображение храниться на специальном сервере и подгружается рядом с оставленным вами комментарием, идентифицируя вас по адресу электронной почты. Но тут есть одно условие — сайт или блог должен поддерживать граватары.

В последних версиях Wordpress для установки граватара никакие специальные плагины не требуются, поддержка добавлена в систему по умолчанию. Для более же ранних версий существуют Gravatar 1.1, Gravatars2 и Easy Gravatars Plugin.

Кстати, завести себе граватар очень просто: достаточно зарегистрироваться на сайте gravatar.com и следовать инструкциям. Для своей учетной записи вы можете настроить сразу несколько адресов, загрузить нужное количество изображений и потом с легкостью менять их под настроение или тематику оставляемого комментария. как поменять заданный по умолчанию граватар? Также аватару присваивается определенный рейтинг (прямо как американским фильмам), определяющий его содержание: определяется присутствует ли на изображении секс, насилие, нецензурная лексика и тому подобное. Следуя этому рейтингу, некоторые сайты могут отказываться отображать граватар (по понятным причинам).

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

Итак, как же поменять заданный по умолчанию граватар?

С поддержкой граватаров, вроде бы, все понятно. Качаем-устанавливаем плагин в живем спокойно. Но что если у пользователя нет граватара? Для этого в панели инструментов вашего блога на Wordpress в закладке Параметры есть раздел Обсуждения. В нем, помимо настроек для модерирования комментариев и спам фильтров, можно выбрать Аватар по умолчанию, который будет отображаться в комментариях пользователей, не имеющих своего аватара или граватара. Можно выбрать из уже предложенных вам изображений. Но если вы хотите, чтобы ваш блог и здесь был уникален, лучше добавить оригинальное изображение. Здесь мы предложим использовать, например, ваш логотип, ведь дополнительная реклама еще никому не мешала.

Для начала откройте functions.php, расположенный в папке сайта. Если у вас такого нет, то создайте, и добавьте туда следующий код:

add_filter(  'avatar_defaults', 'newgravatar' );
 function  newgravatar ($avatar_defaults) {
   $myavatar =  get_bloginfo('template_directory') .  '/images/gravataricon.gif';
   $avatar_defaults[$myavatar] =  "WPBeginner";
   return $avatar_defaults;
};

В соответствии с этим кодом, изображение подгружается из папки theme directory и в нашем случае имеет название gravataricon.gif. WPBeginner – имя аватара, которое будет отображаться в админ панели.

Теперь смело заходите в Параметры — Обсуждение (Settings > Discussion) в админ панели вашего блога и выбирайте картинку на ваш вкус! И больше никаких безликих человечков!

…Честно говоря, я шокирован, что в 2010 году я все еще встречаю «веб дизайнеров», которые не могут закодить собственные дизайны. Нет оправдания.”

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

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

Ни для кого не секрет, что многие объявления о работе сегодня пестрят предложениями для дизайнеров, владеющими HTML, CSS, JavaScript, asp.net и т.п. Что это? Желание работодателя сэкономить или отображение современных тенденций рынка веб технологий?

Веб дизайн должен начинаться там, где он будет жить, а именно — в браузере.Около 90% дизайнеров разрабатывают макет домашней страницы в графическом редакторе (или если называть вещи своими именами — в Photoshop). Клиент предлагает свои правки и после окончательного утверждения страницы она переходит в руки кодера. Однако есть приверженцы принципиально иной схемы «сайтостроительства». Они считают, что веб дизайн должен начинаться там, где он будет жить, а именно — в браузере.

Каким же образом это реализуется и есть ли в этом смысл?

Шаг 1. Начинается все со структурирования контента. Иными словами – базовой разметки, определяющей что и в какой последовательности должно находиться на странице. На этой стадии это чистый HTML. Плюс очень часто клиент сам предлагает приемлемое для него расположение объектов на странице и этот шаг становится сущей формальностью. А к собственно дизайну и вовсе не имеет никакого отношения, а относится непосредственно к верстке. Например http://owltastic.com/clients/24ways/step1/index.html

Шаг 2. Теперь очерченному контенту придается более человеческий вид. Здесь в дело вступает CSS. Всего несколько стилей, и страница имеет уже совсем другой вид. Но все еще ничего о дизайне.

Шаг 3. Наконец переходим к дизайну — добавляем странице презентабельности и уникальности: выбираем цвета и шрифты в соответствии со спецификой проекта, хорошим вкусом и требованиями клиента. С новым CSS3 этот процесс, конечно, заметно упростился: во-первых, выбор шрифтов больше не ограничен семейством SansSerif и возможности типографики практически не ограничены. Во-вторых, цветовые возможности значительно расширены благодаря палитре RGBa. В-третьих, множественные бэкграунды, градиенты и тому подобные вещи. Но об этом всем позже.

Шаг 4. На этом этапе сайт уже начал принимать свои конечные очертания и теперь надо его немного приукрасить и добавить изюминку. Если вы хорошо знакомы с инструментарием и уже набили руку с CSS3 и его text-shadow, box-shadow и тому подобными свойствами, то, вероятно, не будете чувствовать себя ограниченным в средствах, как это было раньше. Вы с легкостью сможете добавить объем кнопкам, градиент, выделить необходимые элементы, вставить бэкграунд. Здесь лучше всего будет использовать файлы в формате .png с альфа каналом, чтобы в случае замены цвета фона не пришлось менять все изображения.

Итак, у вас получился хорошо структурированный макет домашней страницы с элементами дизайна, который вы можете отослать заказчику. Естественно, редкий клиент сразу согласится, что вы отлично поработали. Как правило, у него возникнет желание что-то исправить. У клиента всегда возникает желание что-либо исправить Если эти изменения будут касаться исключительно внешнего вида, то сделать необходимые изменения не составит для вас особого труда. Рассмотрим лишь некоторые из них. Например шрифт. Нет ничего проще, чем изменить font-face . То же с цветом фона. Если говорить о более сложных изменениях, например скругленных краях боксов, то раньше это могло принести некоторые неудобства. Но CSS3 border-radius поможет вам справится и с этим.

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

Во-вторых, извечное «но» Internet Explorer. Фокус не пройдет если ваш клиент до сих пор пользуется IE (а таких по статистике от 25 до 54,3 %!). Более того, если макет одобрят, большинство использованных в нашем примере функций придется разрабатывать для IE отдельно, а это значит все же рисовать проект в Photoshop, а это уже никак не похоже на экономию времени.

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

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

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

И в заключение.

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

Удачного вам выбора!

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

Чтобы поставить ссылку на себя в Twitter блоггеры обычно используют небольшой баннер, или картинку с расширением .gif, .png, .jpeg, и т.п. (что в принципе не всегда чем-то отличается от обычного баннера), или ставят простую ссылку… Но все это давно не ново. Мы хотим предложить вашему вниманию оригинальное решение Джесса Флореса, демонстрирующее возможности типографики в HTML (в данном случае шрифта Arial) и трансформаций CSS3 (-webkit-transform:rotate).

Демо:

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

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

Deibi

смотреть / скачать

Sketchetica

смотреть / скачать

Giro

смотреть / скачать

Clutchee

смотреть / скачать

Tribbon

смотреть / скачать

KnucklePuck

смотреть / скачать

Folk

смотреть / скачать

Etcetera

смотреть / скачать

Amputa Bangiz

смотреть / скачать

Betlog Square

смотреть / скачать

Slimbo

смотреть / скачать

Tozuna

смотреть / скачать

VAL

смотреть / скачать

Days

смотреть / скачать

LOT

смотреть / скачать

Cube 02

смотреть / скачать

FILE

смотреть / скачать

Zag

смотреть / скачать

Hetilica Bold

смотреть / скачать

Paranoid

смотреть / скачать

Скачать все шрифты

Посмотрим, как же на практике реализуются возможности CSS3. Создадим простую, но элегантную кнопку.

Она обладает следующими преимуществами:

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

Демо:

Итак, начнем.

1.Разметка

Для начала создадим собственно файл HTML, содержащий нашу кнопку:

<button>Notify me</button>

Так выглядит кнопка по умолчанию:

2.Основные стили

Создадим файл style.css и зададим несколько базовых стилей:

button{
   color:#08233e;
   font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
   padding:14px;
}

В них нет ничего сверхъестественного и на данном этапе внешний вид кнопки таков:

3.Бэкграунд

Добавим фон (Помните, что мы хотим иметь возможность использовать эту кнопку столько раз, сколько нам понадобиться, в том числе и для разных проектов):

[adsense]1. Открываем Photoshop и создаем новый файл размером 10px x 100px
2. Выделяем верхнюю половину файла и создаем на новом слое прямоугольник белого цвета
3. Задаем для фона прозрачность 30%
4. Сохраняем наше изображение как overlay.png

Выберите цвет для вашей кнопки и задайте его вместе с созданным только что оверлеем.

background:url(overlay.png) repeat-x center #ffcc00;

Получаем кнопку красивого желтого цвета с приятным эффектом.

4.Бордер

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

border:1px solid #ffcc00;

5.Скругленные края

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

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

Казалось бы, уже неплохо. Но не будем останавливаться на достигнутым и уделим внимание деталям.

6.Совершенство на уровне пикселей

Добавим бордер в 1 px и такого же размера внутреннюю тень. Здесь нам пригодятся цвета палитры RGBa. (используем прозрачность 50%)

border-bottom:1px solid #9f9f9f;
   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
   -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

7.Делаем ее рабочей

Чтобы у пользователей не возникало сомнений, что это действительно кнопка и она рабочая, добавим курсор, который будет появляется при наведении:

cursor:pointer;

8.Оверлей

Как же будет выглядеть наша кнопка при наведении? Здесь мы снова используем RGBa.

background-color:rgba(255,204,0,1);

Так мы визуально ничего не изменим. Добавим еще одну строчку.

button:hover{background-color:rgba(255,204,0,0.8);}

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

Полный код

button{
   color:#08233e;
   font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
   padding:14px;
   background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
   border:1px solid #ffcc00;
   -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;  border-bottom:1px solid #9f9f9f;
   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);  cursor:pointer;
}    

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}

Вот и все! Как видите сделать красивую кнопку в CSS довольно просто. Ну а для тех кому это делать лень, мы предлагаем скачать готовую кнопку.