• Принцип цикады и почему он важен для веб-дизайнеров

    • Translation
    Пару лет назад я прочитал интересные факты о жизненном цикле периодических цикад. Обычно мы не видим вокруг себя много этих насекомых, потому что бóльшую часть своей жизни они проводят под землёй и тихо сосут корни растений.

    Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

    Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
    Читать дальше →
  • Место сценариста в команде разработки игр



      Здравствуйте, меня зовут Мария Кочакова, я сценарист проекта Skyforge в Allods Team. Эта статья подытоживает два года моей работы игровым сценаристом. Все это суровые реалии жизни сценаристов компьютерных игр, то, с чем мы сталкиваемся ежедневно. Категоричность формы продиктована важностью содержания.

      Сценарий компьютерной игры

      Нарративная (повествовательная) часть игры состоит из сеттинга, сюжета и текста.

      Сеттинг — это мир игры, его законы и реалии. Примеры сеттинга: постапокалипсис, фэнтези-средневековье, киберпанк…
      Читать дальше →
    • Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое

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

      Быстрое изменение состояния посреди анимации

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

      @keyframes toggleOpacity {
        50% { opacity: 1; } /* Turn off */
        50.001% { opacity: 0.4; }
      
        /* Keep off state for a short period */
      
        52.999% { opacity: 0.4; } /* Turn back on */
        53% { opacity: 1; }
      }
      

      Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:


      Читать дальше →