Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

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

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

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

Начать надо с главного. Я гедонист. Нет, правда! В хорошем смысле слова: сценарий «обколоться анашой» и тупеть для меня не очень интересен. Просто я думаю, что все в жизни должно быть классно и интересно. А если нет — сделай так чтобы было.
Этот текст я начал писать в ночном тайском автобусе, следующем с острова Пхукет в Бангкок. Одно из ребер графа Москва-Бангкок-Хошимин-Муине-Паттая-Пхукет-Панган-Самуи-Бангкок-Бали-Москва, растянутого во времени на 5 месяцев.



Одно важное замечание: я не сбегал, не валил, не заводил трактор.
Просто однажды осознал, что радость жизни теперь можно черпать большей ложкой, и эпоха офиса может быть сменена на хайлевел фриланс.
Что такое хайлевел фриланс? Это когда работаешь за нормальные 20-30 баксов в час; не общаешься с заказчиками-гопниками; не кидаешь, не ждешь кидалова; работаешь с полной отдачей меньше 40 часов в неделю (кто работает в офисе реальные 8 часов и не сгорает через полгода?); контрибьютишь в open-source проекты по мере надобности и заводишь свои… потому что хочется это делать!

Все знают офисных монстров PowerPoint и Keynote, но почему-то мало кто с радостью в них работает. И действительно, что делать, если ты совсем не бухгалтер, а разработчик или просто гик и гораздо комфортнее чувствуешь себя в коде, чем в офисных пакетах? У меня для тебя хорошие новости: презентации уже очень давно можно делать прямо в браузере, а писать с помощью таких простых и знакомых вещей, как HTML, CSS или даже Маркдаун.

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

Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:

• веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
• десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
• мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)

К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

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

В этой заметке я хочу показать вам процесс создания нового дизайна для скрипта интернет-магазина Simpla.

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

1. Активируется при загрузке страницы.
2. Проверяет наличие записи окончания отсчета в Cookie браузера посетителя.
3. Если запись есть — то считывает её. Если записи нету — то берёт время указанное в настройках скрипта, и делает запись в Cookie браузера посетителя.
4. Производятся преобразования времени в формат для более гибкой настройки оформления счетчика.
5. Выводится счетчик либо надпись о завершении отсчета (если время закончилось) в место вызова скрипта.

Появилась надобность создать сайт с фотогалереей. И пошел искать CMS для сих утех. После некоторого поиска обнаружил неприятную тенденцию. Есть CMS для фотогалерей, но не с современной навигацией, без Lightbox и так далее. Есть красивые HTML шаблоны с всякими вкусностями (например, Gamma Gallery), но без системы управления контентом. Рассматривать Wordpress и др. для сайта только с фотками — слишком накладно. Даже опечалился, но поиск натолкнул на одну новую CMS Koken. После небольшого рассмотрения понял, что это именно то, что мне нужно: первоклассная админка с множеством настроек, и современное отображение галерей. А с напильником так вообще красота получается.

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

Продолжение перевода серии статей «5 уроков просмотра стартапов»,
прошлая статья Настоящие нечестные конкурентные преимущества

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



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

Недальновидно, не правда ли?

Что, если кто-нибудь скопирует вашу гениальную бизнес-идею?

Около двадцати человек на Answers OnStartups задали этот вопрос в той или иной форме:

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

Как я могу ответить на этот вопрос?

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

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

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

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

В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

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

Большие и популярные сайты

Behance - работы лучших дизайнеров со всего мира

В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]

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

Form Builder



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

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



Демонстрация стилей / Скачать исходники

Ребята с webmasterworld.com решили собрать все факторы, которые учитивает Google при ранжировании сайтов. Официальным представителем было заявлено (еще на тот момент), что их более 200. Пока список выглядит так, не исключено, что некоторые пункты включают в себя несколько факторов.

Многие веб-сайты выводят предупреждения об устаревших браузерах или и вовсе отправляют пользователя устанавливать новый браузер или Google Chrome Frame.
jReject — специальный плагин для jQuery, позволяющий отображать подобные уведомления с помощью нескольких строчек кода.