• Создаем анимированные кнопки при помощи CSS3

    • Translation


    В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

    В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

    Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

    Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

    Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
    Читать дальше →
    • +199
    • 39.1k
    • 40
  • Создаем оригинальные hover-эффекты при помощи CSS3

    • Translation


    Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.

    Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
    Читать дальше →
  • Sisyphus.js — защищаем данные форм пользователя от случайных потерь

      В чём проблема?


      Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

      Представьте себе бурю эмоций, испытываемых пользователем, только что потерявшим все вводимые данные — а ведь оставалось немного допечатать и отправить форму. Вот если бы только был способ восстановить эти данные, а не заниматься сизифовым трудом…
      Читать дальше →
    • Subtle Patterns: фоновые текстуры для вашего сайта

        Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



        Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

        Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.
        Читать дальше →
        • +232
        • 67.1k
        • 29
      • 12+ полезных Google Chrome chrome:// команд

          Все знают, что для того чтобы попасть в меню у Хрома, нужно нажать на Гаечный ключ в правом верхнем углу.

          Однако есть несколько особенностей, которые не доступны из меню, которые вы можете увидеть только с помощью chrome:// команд.

          Под катом приведены 12 самых полезных chrome:// команд, которые должны знать все.
          Читать дальше →
        • Оформление изображений на CSS3

          • Translation
          При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
          Читать дальше →
        • Почтовые рассылки: письменная кухня

          • Tutorial


          Каждый день я получаю различные рассылки от многих сервисов, и по роду деятельности с удовольствием их критикую. Но на этот раз мне пришло письмо от PayPal c рекламой магазинов-партнеров, которое меня очень приятно удивило. Это натолкнуло меня на мысль «приготовить» подобную рассылку и поделиться этим с вами.
          Читать дальше →
        • Написание сложных интерфейсов с Backbone.js

            image

            Backbone.js это каркас для создания RIA JavaScript приложений, его автором является Jeremy Ashkenas, создатель CoffeeScript, Backbone является частью компании Document Cloud ей же «принадлежит» Underscrore.js. Backbone — очень легкая библиотека, помогающая вам создавать интерфейсы. Она может работать с любыми библиотеками, к которым вы привыкли.
            Backbone это набор классов, размером менее 4Кб, которые формируют структуру вашего кода и помогают создавать качественные MVC веб-приложения.
            Backbone формирует структуру тяжелых JavaScript приложений, внесением моделей с key-value подобным хранилищем и своими событиями, коллекций с богатыми API, видов (ориг. views) с декларативной обработкой событий и соединяет все это в в одно приложение, поддерживающее RESTful JSON интерфейс.

            Backbone не может работать без Underscore.js. Для поддержки REST API и работы с DOM элементами в Backbone.View настоятельно рекомендуется подключить json2.js и jQuery-подобную библиотеку: jQuery или Zepto

            В статье будет рассмотрена структура Backbone.js, будет поэтапно создано простое Todo приложение.
            Читать дальше →
          • Backbone.js для «чайников»

              Backbone.js для чайников
              Как то поздним вечерком мне пришла мысль изучить Backbone.js и привязать его к уже написанному на jQuery сервису. Сервис уже серьёзно расширился и меня достало это нагромождение обработчиков кликов, запросов и логики. Поэтому, я как усердный школьник полез в официальную документацию. Но либо я тупой, либо мой английский меня подкачал, либо то и другое вместе, но я не черта не понял. Я прочитал уже второй раз, внимательно, и для особо одарённых мест использовал google translate. Прочитал также и пример ToDo List. Всё показалось понятно, ровно до той поры пока я не стал писать. После чего я взял всё что нашел по этой библиотеке, как на английском так и переводы. Прочтя кипу документации я решил, что сейчас вроде всё понял. Я напрягся, но… Не вышел каменный цветок у мастера Данилы, т.е. вышло, но это явно был не цветок, и камень как то неправильно пах. Тогда, как прилежный ученик, я решил написать «Hello, KittyWorld» с нуля. Попутно комментируя и сохраняя шаги в hg, у меня получилось введение в backbone.js framework для таких как я, особо одарённых.
              Данные 7 шагов с комментариями.
            • Content editable в HTML5

              HTML5
              Одним из нововведений HTML5 стала возможность редактировать часть страницы прямо в браузере. Эта фича получила название content editable. Она работает во всех современных браузерах. Чтобы сделать часть страницы редактируемой, нужно поставить тегу атрибут contenteditable="true". Под тегом может стоять практически всё: текст с форматированием, картинки, списки и даже flash-ролики. Но пользователь может добавлять толко текст, остольное он может только удалять. В этом посте я покажу пример использования content editable на веб-сайте.
              Читать дальше →
            • Мой подход к созданию ТЗ на шаблонные сайты

              eyestopper

              Вместо эпиграфа.


              Поймал дед золотую рыбку. Она ему говорит:
              — Чего тебе, дед?
              — Хочу чтоб мой аппарат был длиной до колен.
              Взяла рыбка и укоротила деду ноги.
              Мораль: ставьте корректно техническое задание.

              Добрый день великий и могучий Хабр.
              Некоторое время назад было несколько постов о технических заданиях (Как поставить задачу для простого (шаблонного) сайта, Почему мы никогда не составляем ТЗ. А что взамен?, Правила технического задания), которые хотелось бы продолжить и рассказать про мой подход к написанию ТЗ на шаблонные сайты.
              Читать дальше →
            • Doit.im — корова с развитой мускулатурой

                Таск менеджеров дофига. Удобных — намного меньше.
                Именно на этом стоит популярность Remember The Milk — простота использования и пресловутое неуловимое usability.
                RTM, когда я увидел его в первый раз, понравился мне своим мобильным клиентом и простотой так сильно, что я, посмотрев по сторонам, проплатитл pro-аккаунт на пару лет и жил не зная горя.

                Но, пару дней назад, блуждая по просторам интернета и почитывая хабр, я наткнулся на сервис, который по всем параметрам выигрывает у RTM, а именно — Doit.im.



                Под катом, небольшой обзов сервиса в картинках: web, pc, mobile.
                Читать дальше →
              • О самодельных фирменных конвертах для дисков

                • Translation


                Хочу поделиться с вами одним из способов показать клиенту, что работа выполнена более чем на 100%.

                Разрабатывая любой материал, мы передаем результат своей работы в электронном виде на цифровом носителе (CD или DVD-диски) лично клиенту или просто в электронном письме без использования физического носителя. Все зависит от оговоренного способа работы с клиентом.

                Суть способа проста — оформляем фирменный конверт для дисков. Такой вариант не только даст впечатление более качественной работы, но и даст возможность вспомнить контактные данные разработчика.
                Читать дальше →
              • Пять способов вызвать функцию

                • Translation
                Мне часто приходится сталкиваться с JavaScript-кодом, ошибки в котором вызваны неправильным понимаем того, как работают функции в JavaScript (кстати, значительная часть такого кода была написана мной самим). JavaScript — язык мультипарадигменный, и в нем имеются механизмы функционального программирования. Пора изучить эти возможности. В этой статье я расскажу вам о пяти способах вызова функций в JavaScript.
                Читать дальше →
              • Переменные в Фотошопе или как импортировать внешние PSD-файлы влёгкую

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

                Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

                Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.
                Читать дальше →
              • Практический CSS: рецепт успеха

                • Translation
                Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

                Если вы посмотрите на стандартное ресторанное меню (или рецепт), там слева расположены названия блюд, за ними идет пунктирная линия до правого края, где расположена цена этого блюда. Давайте посмотрим на рисунок 1, чтобы понять, о чем идет речь.

                Рисунок 1. Стандартное меню
                Рисунок 1

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

                Читать дальше →
              • Подборка 10 css3 кнопок

                  С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



                  В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.
                  Читать дальше →
                • Принцип цикады и почему он важен для веб-дизайнеров

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

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

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