Как стать автором
Обновить
0
0
Артем @eatart

Пользователь

Отправить сообщение

Cufón – используйте шрифты, какие душа пожелает

Время на прочтение4 мин
Количество просмотров90K
Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:
  1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.
Читать дальше →
Всего голосов 119: ↑111 и ↓8+103
Комментарии106

Как сделать favicon в png

Время на прочтение1 мин
Количество просмотров118K
Знаете, фавикончики в ico это как-то прошлый век =) Давайте будем модными, современными и все такое. Короче, берем иконку в png (да-да, с прозрачностью и всеми делами), сохраняем в размере 16×16, на сайте (в блоке <head>, ага) подключаем так:

<link rel="icon" type="image/png" href="favicon.png" />

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

<link rel="apple-touch-icon" href="apple-touch-favicon.png"/>

Над записью витает дух уже почти сгнившего трупа IE6, который вообще не знает о чем это все, ну да и фиг с ним =) Все, изыди.

UPD: Спасибо хабраюзеру NickyX3 за интересное уточнение:
Автор забыл указать, что иконда для springboard тачей и яблофонов будет в таком варианте закруглена по углам и на нее будет наложен блик автоматически самоим девайсом. Для избежания этого (совсем красивая кастом иконка) вместо apple-touch-icon следует написать apple-touch-icon-precomposed.
Всего голосов 182: ↑145 и ↓37+108
Комментарии53

Git Workflow

Время на прочтение6 мин
Количество просмотров118K

1 Вступление



В топике освещаются не столько подробности работы с git, сколько его отличия от схемы разработки других систем контроля версий, и общий подход (выработанный по большей части личным опытом и Git Community Book) к работе.


Читать дальше →
Всего голосов 120: ↑116 и ↓4+112
Комментарии147

Grid Design или вёрстка с Сеткой.

Время на прочтение4 мин
Количество просмотров42K
На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков — «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»
Читать дальше →
Всего голосов 41: ↑35 и ↓6+29
Комментарии98

IE7 { css2: auto; }

Время на прочтение2 мин
Количество просмотров936
IE7 — библиотека JavaScript, заставляющая эксплорер работать по стандартам. Устраняет множество проблем с css, делает правильной обработку полупрозрачных PNG под IE5 и IE6.

Читать дальше →
Всего голосов 41: ↑37 и ↓4+33
Комментарии62

Вкусный CSS: Sass + Compass

Время на прочтение2 мин
Количество просмотров70K

Что такое Haml/Sass?


Haml (xHTML Abstraction Markup Language) это язык разметки для упрощённой генерации xHTML. В свою очередь эквивалент Haml для css — это Sass (Syntactically Awesome StyleSheets).

В данной статье я расскажу чем примечателен Sass. И с помощью чего sass-файл можно скомпилировать в css.
Читать дальше →
Всего голосов 55: ↑47 и ↓8+39
Комментарии78

Движок микроблоггинга Reactor

Время на прочтение1 мин
Количество просмотров8.4K
image
Все началось с того, что мы решили сделать свой микроблоггинговый сервис. Покопались в интернетах в поисках более-менее подходящего готового движка микроблоггинга, толком ничего не нашли. Потом рассмотрели кандидатуру движков обычного блоггинга — Wordpress, LiveStreet, BigStreet. Мы уже немного работали с ними, и решили не использовать в виду их архитектурных недостатков (наше ИМХО). Оставалось сделать что-то свое, но не с нуля, а используя фреймворк Symfony в связке с ORM Doctrine.

Будем краткими.
# Что это? — Движок микроблоггинга с картинками и настроениями, альфа версия. Пример работы движка — http://joyreactor.ru/
Читать дальше →
Всего голосов 75: ↑56 и ↓19+37
Комментарии57

Базовый css-шаблон

Время на прочтение1 мин
Количество просмотров3.9K
Вечером знакомый попросил быстро сделать ему основу для его блога. Даже не сверстать макет, а сделать именно основу.

Так как я сижу без работы и становится скучно, решил безвозмездно посодействовать. Что получилось, смотрите под ниже.
Читать дальше →
Всего голосов 128: ↑99 и ↓29+70
Комментарии76

Исследование на тему замены стандартных кнопок

Время на прочтение8 мин
Количество просмотров2.7K
В процессе работы над интерфейсом одного продукта, появилась надобность в изготовлении собственного дизайна кнопок. За это время код, который заменяет стандартную кнопку на требуемую несколько раз переписывался и в данный момент тоже далёк от идеала. Учитывая все текущие проблемы кросс-браузерности, за это время выяснились и получилось нижеописанное.

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


Читать дальше →
Всего голосов 81: ↑60 и ↓21+39
Комментарии113

Делаем красивые кнопочки

Время на прочтение4 мин
Количество просмотров12K
Зачастую стандартный вид кнопочек не может сочетаться с концепцией дизайна, которую придумал дизайнер, поэтому он рисует свои кнопочки.

Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.

Например:
<a href="some_page.html"><img src="button.gif" alt="Button"></a>
<input type="image" src="button.gif" alt="Button">


* This source code was highlighted with Source Code Highlighter.


Вроде бы все просто, но тогда верстальщику придется под каждую форму или ссылку вырезать новую картинку, тем самым плодя кучу картинок и тратя драгоценное время.
Читать дальше →
Всего голосов 95: ↑72 и ↓23+49
Комментарии53

Многоуровневое дерево с маркерами (HTML, CSS). Продолжение с jQuery

Время на прочтение7 мин
Количество просмотров41K
Посмотреть в работе многоуровневое дерево с маркерами.В продолжение темы про дерево немного переделал код и подключил jQuery. Теперь дерево живое, узлы разворачиваются, как этого многие ожидают видя подобное дерево.
Теперь оформление дерева делает скрипт — сам расставляет маркеры для элементов с вложенными узлами.
Благодаря использованию скрипта HTML стал проще.

UPD 05.04.2009: обновлены скрипты, есть несколько вариантов скриптов.
UPD 09.04.2009: продолжение
Читать дальше →
Всего голосов 50: ↑47 и ↓3+44
Комментарии44

Шпаргалки

Время на прочтение1 мин
Количество просмотров1.9K
Недавно я делал обзор электронной книги Orsio b731. Внимательные читатели узрели на фотографиях папку шпаргалок и попросили поделиться. Что ж, держите! ;)

image
Читать дальше →
Всего голосов 82: ↑62 и ↓20+42
Комментарии20

Многоуровневое дерево с маркерами (только HTML, CSS, без Javascript)

Время на прочтение5 мин
Количество просмотров23K
Многоуровневое дерево с маркерами (только HTML, CSS)До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792
Читать дальше →
Всего голосов 107: ↑105 и ↓2+103
Комментарии81

Blueprint

Время на прочтение4 мин
Количество просмотров27K
Blueprint — довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE.

Со страницы проекта на Google Code скачиваем архив.

В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Читать дальше →
Всего голосов 54: ↑50 и ↓4+46
Комментарии73

Ускорение верстки — да поможет Notepad++

Время на прочтение2 мин
Количество просмотров103K
Я уже довольно-таки давно верстаю в Notepad++, пробовал и другие редакторы — не срослось. Основная причина, по которой мне нравился раньше этот редактор — подсветка кода. Видел. что есть много каких-то настроек, но небыло необходимости в них разбираться — ведь и так всё работает прекрасно.

Ситуация изменилась, когда объем работы вырос, и я физически не успевал верстать то, что вроде как должен успевать. Конечно, есть свои html и css заготовки, но копипастить их — сомнительный выигрыш во времени. Работа по FTP через Total Commander тоже не очень то удобна — много лишних телодвижений.

И вот я решил потратить время на настройку своего любимого Notepad++, слышал где-то что гибко он настраивается :)

(Описание скорее для тех разработчиков, которые не в курсе всех прелестей Notepad++, знающие могут дальше не читать).
Подробнее с картинками...
Всего голосов 118: ↑103 и ↓15+88
Комментарии206

Начало пути — Часть 6. Основы сведения и мастеринга.

Время на прочтение6 мин
Количество просмотров236K
Вот, с грехом пополам, мы и добрались до финальной статьи. Она будет про сведение и мастеринг. Первым делом поясню чем сведение отличается от мастеринга, расскажу немного про такую штуку как SideChain и еще парочку трюков. В конце — небольшая таблица, которая до сих пор помогает мне при эквализации.
Читать дальше →
Всего голосов 34: ↑34 и ↓0+34
Комментарии62

20 «НЕ» для веб-дизайнеров

Время на прочтение6 мин
Количество просмотров12K

У каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.
Читать дальше →
Всего голосов 196: ↑152 и ↓44+108
Комментарии178

Масштабируемая картинка на фоне сайта

Время на прочтение4 мин
Количество просмотров20K
Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.
Смотрим что получилось ...
Всего голосов 69: ↑53 и ↓16+37
Комментарии50

Танцы с бубном для блондинок, или о tabbed menus и хитрой работе с графикой

Время на прочтение5 мин
Количество просмотров1.4K
Собственно, перепал мне не так давно небольшой заказец. Вроде и несложный — а потанцевать с бубном немного пришлось. А всё из-за того, что заказчик оказался немного «падкой на дизайн блондинкой» (образно говоря), и требовал строгого соответствия конечного результата макету. Требовал попиксельно, и его совершенно не волновали такие вопросы, как валидность, семантичность и всё такое. «Хоть таблицами сверстай, а сделай». И сегодня речь пойдёт о том, как в таких условиях сделать весьма хитровыделанно нарисованное меню табами. Как и за свой код не устыдиться, и не пасть в грязь лицом перед заказчиком, вот в чём вопрос?
Читать дальше →
Всего голосов 63: ↑57 и ↓6+51
Комментарии99

Закрепляем jQuery — 25 отличных советов

Время на прочтение19 мин
Количество просмотров168K
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение


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

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

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

Содержание


  1. Загружайте фреймворк с Google Code
  2. Используйте «шпаргалку» (cheat sheet)
  3. Соединяйте все ваши скрипты и уменьшайте размер файла
  4. Используйте возможности Firebug для ведения логов
  5. Минимизируйте операции выборки в пользу кэширования
  6. Сводите манипуляции с DOM-деревом к минимуму
  7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
  8. Используйте «id» вместо классов, где это возможно
  9. Задайте контекст своим селекторам
  10. Используйте последовательности вызовов методов с умом
  11. Научитесь правильно использовать анимацию
  12. Научитесь назначать и делегировать события
  13. Используйте классы для сохранения состояния
  14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
  15. Пишите собственные селекторы
  16. Подготавливайте HTML и модифицируйте его, когда страница загружена
  17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
  18. Используйте служебные функции jQuery
  19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
  20. Как узнать что картинки загружены?
  21. Всегда используйте последнюю версию
  22. Как проверить, что элемент существует?
  23. Добавляйте класс «JS» в элемент «html»
  24. Возвращайте «false» для отмены поведения по-умолчанию
  25. Короткая запись для события готовности документа


Rock'n'Roll!
Всего голосов 188: ↑182 и ↓6+176
Комментарии109

Информация

В рейтинге
Не участвует
Откуда
Россия
Дата рождения
Зарегистрирован
Активность