• Онлайн редактор для Bootstrap— LayoutIt

      Twitter Bootstrap становится всё популярнее и популярнее, многие используют его в своих проектах, думаю еще больше людей используют для прототипирования интерфейсов. Я не исключение. И вот сегодня утром наткнулся на интересный сервис — LayoutIt. По сути LayoutIt — это онлайн редактор для создания интерфейсов с использованием Bootstrap. Редактор представляет собой Drag & Drop интерфейс.

      Читать дальше →
    • Coolpix P7700 и Coolpix P310 — два практичных компакта от Nikon



        Пока жду новинку от Samsung — планшет Samsung Galaxy Note 8, решил попробовать описать 2 компактных фотоаппарата от Nikon — модели Coolpix P7700 и Coolpix P310.

        Младшая из описываемых моделей легко помещается во внутренний карман куртки, и, несмотря на компактные габариты, даёт возможность делать достойные снимки. Старшая модель Coolpix P7700 оборудована более качественной матрицей, светосильным зум-объективом NIKKOR с 7,1-кратным увеличением и быстрой диафрагмой, благодаря чему пространство для фото- и видеоэкспериментов, которое открывает перед вами этот инструмент огромно.

        В то время, когда тестировал эти фотоаппараты, погода в Киеве, не смотря на конец марта, стояла снежно-зимняя (1, 2, 3). На улице морозно, за окном метель, дороги и тротуары под толстым снежным слоем. В общем, было весело! Хоть вьюга со временем и утихла, но мороз держался ещё много дней, поэтому большинство фотографий для этого тестового обзора пришлось делать в комнатных условиях. В такой нелёгкой ситуации меня выручила кормушка, которую видно из окон моего дома, а также птицы, любезно согласившиеся попозировать перед фотоаппаратом за семена подсолнуха.

        Возможности ручного управления в обоих фотоаппаратах очень порадовали: колесика регулировки выдержки и диафрагмы находятся именно там где надо, быстрый доступ к изменению баланса белого, светочувствительности (ISO) и поправке экспозиции в COOLPIX P7700, программируемые кнопки в двух рассматриваемых моделях, всё это очень и очень кстати. Больше информации о фотоаппаратах, примеры снимков и отснятое видео с птицами разных видов вы найдёте под Хабракатом (Осторожно, траффик — фото и слайдшоу).
        Читать дальше →
      • Повторяющийся зубчатый фон на CSS



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

          Важные требования к такому забору:

          • Никаких изображений!
          • Он должен спокойно тянуться по горизонтали
          • Обязательно должен поддерживать неравномерный фон у подложки
          • Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

          Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

          Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.
          Читать дальше →
        • intro.js — пошаговое руководство для веб-страницы



            Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты data-intro и data-step с описанием и номером шага соответственно к нужным элементам страницы. Вот так:

            <a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
            
            Читать дальше →
            • +129
            • 46,9k
            • 24
          • Хороших иконок много не бывает



              Не так давно в поисках пиктограмм для интерфейса нашел любопытный ресурс WebHostingHub Glyphs.

              У ребят уже нарисовано более 1000 пиктограмм, которые доступны как PNG так и как шрифты.
              А что самое приятное, и не маловажное тем кто работает на «заграницу» использование бесплатно даже для коммерческого использования!

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

              Посмотреть и пощупать можно тут :) http://www.webhostinghub.com/glyphs/.

              Update: Мир, как оказалось, очень тесен!
              Читать дальше →
              • +138
              • 60,9k
              • 49
            • Загадка выпадающего списка «Амазона»

                Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



                Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
                Читать дальше →
              • То, что вам никто не говорил о z-index

                • Перевод

                Проблема z-index в том, что многие просто не понимают, как он работает.
                Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

                Описание проблемы:


                Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
                Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index
                , равный 1, у остальных двух z-index не задан.
                Читать дальше →
              • Всем, всем, всем: время обновлять свой CSS3

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

                Читать дальше →
              • Анимированные кнопки произвольной ширины на CSS3

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

                  image
                  Читать дальше →
                • Ретенция, или почему пользователь вернется в игру?

                  Привет, Хабр!

                  Меня всегда интересовал геймдев. Несколько лет назад я сделал шаг и окунулся в этот мир. Меня поражал успех Энгри Бердс (Angry Birds), взлёт и падение Зинги (Zynga), и одна мысль мне не давала спать — «Как же они сделали такие классные игры?».

                  Прошло немало времени, накопился ящик опыта, в закромах образовались какие-то отрывочные записи и комментарии. Я решил все структурировать и систематизировать, стараясь ответить на один из краеугольных вопросов — «Почему же пользователь вернётся в игру?».
                  Читать дальше →