“Копировать в буфер” плагин для jQuery – zClip

zClip -  jQuery-плагин для создания функции “Копировать в буфер” с помощью невидимого Flash-файла.

Плагин построен на базе популярной библиотеки Zero Clipboard + полностью совместим с Flash 10 и ниже.

Библиотека очень легковесна (~7Kb) и имеет поддержку CSS-событий “:hover” и “:active”.

zClip накрывает прозрачным Flash-элементом целевой элемент, чтобы перехватить события “click”, “mouseenter” и “mouseleave”.

Так же есть две callback-функции: “before copy” и “after copy”.

Начните свой HTML5-проект с Initializr

Наверняка Вы знаете о HTML5 Boilerplate, прекрасном базовом HTML/CSS/JS шаблоне, с помощью которого можно руками сделать свой проект на HTML5.

Initializr – генератор, основанный на HTML5 Boilerplate, и помогающий вам кастомизировать изначальный шаблон.

Он позволяет Вам опробовать функции:

• будет ли использоваться “рыьный” контент
• будут ли использоваться JavaScript и jQuery
• будет использоваться Modernizr или html5shiv
• будет ли использоваться .htaccess, web.config или nginx.conf

P.S. В шаблоне убрана некоторая функциональность Boilerplate, которая в основном не используется.

Бесплатный набор для User Interface дизайна

Webalys создал прекрасный бесплатный набор User Interface Design Framework для веб-дизайнеров, которым, кстати, я и сам успешно пользуюсь. В набор включены: GUI библиотека – сотни векторных элементов интерфейса, набор из 260 минималистических иконок для дизайна интерфейсов (за 47 долларов можно купить полный набор из 760 иконок), библиотека из 200 стилей для Adobe Illustrator.

Теперь можно быстро создавать сетки для шаблонов в Illustrator’e. Вы можете легко модифицировать любой из элементов, так как все они векторные.

Пример формы заказа на сайте гостиницы, сделанный за две минуты (включая запуск Illustrator’а):

LimeJS – игровой HTML5 фрэймворк для тачскрин-девайсов

LimeJS – JavaScript фрэймворк, позволяющий создавать игры на HTML5. Игры, созданные с помощью LimeJS, не требуют никаких плагинов, только современный браузер.

Сейчас LimeJS поддерживает практически все HTML5-браузеры: Chrome, Safari, Firefox и даже Opera. И, конечно, библиотека работает на двух современных мобильных платформах: iOS (iPad, iPhone и iPod Touch) и Android.

Modular Grid Pattern: сетки для Photoshop и других редакторов изображений

Modular Grid Pattern – сайт, позволяющий Вам сделать собственную сетку для дизайна сайта несколькими способами.

Первый – это бесплатное расширение для Adobe Photoshop (совместимо с CS5), которое позволяет создавать сетки прямо в приложении.

Второй – создание сетки онлайн, где Вы можете установить baseline, обтекание, ширину/высоту модуля, количество модулей и ширину всего контейнера страницы. На выбор создается три варианта сетки:

• PNG-паттерн (для GIMP)
• Photoshop-паттерн
• маска прозрачности (для Adobe Fireworks)

 

CeraBox – альтернативный Ligthbox на MooTools

CeraBox – стабильно работающая и легкая в использовании альтернатива Lightbox, написанная с помощью MooTools.

CeraBox может показывать изображения, SWF-файлы или содержание любого html-тега, а так же может подгружать содержимое в iframe или с помощью ajax.

Скрипт умеет группировать изображения в галереи (добавляя кнопки вперед/назад).

Атрибут title может использоваться для отображения дополнительной информации об изображении.

И последнее, но не менее важное – CeraBox умеет разворачиваться как в фиксированный размер, так и подстраиваться под размер изображения.

Создавайте журнальную компоновку с Treesaver

Treesaver – JavaScript-фреймворк для создания журнальных компоновок, которые динамически адаптируются к размеру экрана браузера на компьютере или другом устройстве (кпк, смартфоны, iPad). Дизайнер использует для верстки стандартные правила HTML и CSS, и никакого программирования на JavaScript.

JavaScript занимает 25K места в сжатом состоянии. Работает со всеми современными браузерами, а так же создает приемлемую верстку для старых браузеров. Тем не менее, Traasaver все еще сырой, в нем много багов которые нужно исправлять.

Isotope – jQuery-плагин для гибких анимированных лэйаутов

Isotope – изысканный jQuery-плагин для анимированной сортировки данных в блоках. Можно скрывать и показывать данные по признакам, сортировать, располагать на странице. Синтаксис очень простой, но представление все равно получается очень красивым. И самое интересное – в плагине присутствует расширенная поддержка CSS3 для транзакций.

Тем не менее, Вы можете бесплатно использовать плагин только в некоммерческих проектах. Коммерческая лицензия покупается единоразово за отдельную плату для каждого разработчика. Вы всегда можете посмотреть на Masonry в качестве альтернативы.

jShowOff: jQuery-плагин слайдер контента

jShowOff – гибкий jQuery-плагин ротации либого типа контента в HTML, который просто создается слайды из дочерних элементов враперов (например <li>).

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

Навигацию по слайдам можно выполнить с помощью постраничной навигации, кнопок вперед-назад, и/или с помощью самбнейлов (все настраивается в опциях).

Дайте IE возможность рендерить декоративные элементы CSS3

CSS Level 3 известен своими фишками в области стайлинга html-элементов. Скругленные края, нормальные отбрасываемые тени, градиентные заливки фона и много чего еще. Все это можно сделать с помощью CSS3! Но, поскольку Internet Explorer не поддерживает стандраты CSS3, нужно подключать CSS3 PIE.

PIE написан специально для Internet Explorer. Подключается он, как behavior и позволяет распознать опции CSS3 + отрендерить их в IE. CSS3 PIE позволяет Internet Explorer 6-8 рендерить несколько разных фич CSS3, которые не доступны в стандратном IE.