• intro.js — пошаговое руководство для веб-страницы



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

      <a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
      
      Читать дальше →
      • +129
      • 47,4k
      • 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), и одна мысль мне не давала спать — «Как же они сделали такие классные игры?».

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

            Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.
            Читать дальше →
          • Подборка инструментов для фронт-энд разработки

            • Перевод
            Как разработчику, мне очень нравятся инструменты, которые помогают сэкономить время или упростить процесс разработки фронт-энда. В этой статье я собрал мои любимые веб-инструменты для упрощения разработки веб-интерфейсов.

            Картинки кликабельны.

            Form builder


            Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
            image
            Читать дальше →
          • Делаем ядерную люстру на 100'000 люмен

              Существует стереотип, что «IT»-шник должен сидеть в полумраке, освещаемый лишь светом монитора. Не знаю как вам, а мне всегда было комфортнее при ярком освещении. Сначала это было 3x100W обычных лампочек, потом 250W люминесцентных ламп, после последнего переезда — одна 500W галогенка… Но этого все-же было недостаточно. Всегда хотелось иметь такое освещение, чтобы не хотелось свет сделать ярче. О создании такой люстры я сейчас и расскажу.
              Читать дальше →