10 Нових інструментів для веб-розробки і дизайну

69

Продовжуємо знайомитися із цікавими новинками інструментів для веб-розробників і дизайнерів. Намагаюся в міру можливості стежити за появою нових рішень в плані розробки сайтів. І звичайно ж, мене дуже цікавить все нове і прогресивне в цій темі. Всілякі сервіси, бібліотеки скриптів, готові пакети елементів користувальницького інтерфейсу, дивовижні і складні функції css3, зібрані в єдиний набір правил. Загалом все те, що робить роботу веб-дизайнерів і розробників сайтів ще більш цікавою та продуктивною.

Пропоную на розгляд, чергову добірку корисних інструментів для веб-розробки, що вийшли в світ з-під пера досточтимых буржуїнів, саме останнім часом.

Анімаційний 3D ефект для шрифту

Инструменты для веб-разработки и дизайна

Codrops являє докладний урок по створенню цікавого анімаційного 3D ефекту розкриття для шрифту, з допомогою CSS перетворень і переходів. Експеримент заснований на ідеї відкритого проекту Edenspiekermann для Kroller-Muller Museum, є ще одним новим, творчим підходом відображення 3d шрифту. За допомогою даного ефекту можна створювати приголомшливі, динамічні заголовки, тим самим ще більше привертаючи увагу користувачів.

[ Демо ] [ Код ]


Scrolld.js

Инструменты для веб-разработки и дизайна

Унікальний в своєму роді плагін jQuery з відкритим вихідним кодом, що забезпечує високоточну прокручування розділів односторінкових макетів сайтів і зручну навігацію, з оновленням значень даних у режимі реального часу. Якщо по простому, це ще один чудовий інструмент, для створення динамічного скролінгу(прокручування) сторінки, що став дуже популярним, спосіб організації і представлення контенту(змісту) сучасних веб-сайтів.
З Scrolld.js прокрутка до потрібних пунктів завжди буде точною і забезпечить максимальну зручність для користувачів. Scrolld.js спеціально розроблений для підтримки адаптивних дизайнів довгих сторінок з комфортною навігацією по розділам. Scrolld.js дуже простий у використанні та налаштуванні, розгортається в робочий стан займе всього лише кілька хвилин.

[ Демо 1 ] [ Демо 2 ] [ Демо 3 ] [ Демо 4 ] [ Код ]


Sticky-Kit

Инструменты для веб-разработки и дизайна

Дуже легкий jQuery-плагін для створення стабільних елементів(блоків з вмістом) при прокручуванні сторінки сайту. Такі своєрідні стиккеры, у ролі яких, можна використовувати різні блоки сайту та його окремі елементи. За допомогою цього плагіна, ви зможете легко зробити будь-яку область сторінки приклеєною до верхньої частини вікна, при прокрутці користувачем об’ємного вмісту сайту вниз, найчастіше такий спосіб застосовується при створенні стабільної бічної колонки, або панелей з кнопками соц-сервісів, а також різних рекламних блоків.

[ Демо & Исходники ]


Metro UI CSS 2.0

Инструменты для веб-разработки и дизайна

Metro UI CSS — безкоштовний набір правил, для створення сайтів з інтерфейсом в популярному стилі Windows 8. Розробляється Metro UI CSS, як самостійний незалежний інструмент, справжня бібліотека, простий і легкий HTML, CSS, Javascript фреймворк, для більш швидкої і зручної роботи веб-розробників і дизайнерів. Проект з відкритим вихідним кодом, так що ви сміливо можете редагувати і вносити свої зміни.

[ Демо & Исходники ]


Font Combiner

Инструменты для веб-разработки и дизайна

Font Combiner — Універсальний генератор веб-шрифтів, що включає в себе велику бібліотеку готових шрифтів і можливість редагування і створення свого власного, в потрібному розмірі, і форматі.

[ Сервіс ]


stickUp

Инструменты для веб-разработки и дизайна

Простий плагін, який прикріплює елементи сайту(меню, інформаційні або рекламні блоки, і т. д) у верхній частині вікна браузера, при прокрутці вони завжди знаходяться у полі зору користувачів. Плагін працює, як на декількох сайтах, так і на сайтах виконаних у вигляді однієї сторінки, що використовують скролінг змісту.

[ Демо & Исходники ]


Simptip

Инструменты для веб-разработки и дизайна

Прості кросбраузерні CSS підказки написані на Sass. Використовуючи готові правила, ви можете виводити підказки в різних напрямках (зверху, зліва, знизу, праворуч). Ви також зможете оформити підказки в різні кольори, згідно з галуззю застосування(інформаційні підказки, попередження і т. д). І нарешті, ви можете використовувати інші, не менш корисні функції, такі як округлені краю, косі стрілки, прояви і ефекти загасання підказок, і підказки з многострочным змістом.

[ Демо & Исходники ]


Slippry

Инструменты для веб-разработки и дизайна

Адаптивний слайдер зображень за допомогою плагіна jQuery. Slippry написаний з розрахунком на майбутнє, з використанням забійної зв’язки останніх функцій jQuery, різних трюків CSS3 і елементів HTML5. Якщо вам потрібен простий слайдер, то це рішення точно для вас. Slippry має купу дійсно потрібних налаштувань, з підключеними CSS і Sass ви зможете зробити свій, унікальний слайдер, тим самим додавши своїм проектам ще більше движухи.

[ Демо & Исходники ]


Magic Effects

Инструменты для веб-разработки и дизайна

Пакет ефектів CSS3 анімації. У наборі правил представлені анімаційні ефекти для різних елементів сайту. Наприклад, за допомогою цього фреймворку CSS3, ви з легкістю зможете перетворити мініатюри зображень, зробити їх рухомими при натисканні, те ж саме дуже просто застосувати і до посиланнями, кнопок і інших елементів інтерфейсу сайту.

[ Демо & Исходники ]


Textillate.js

Инструменты для веб-разработки и дизайна

Цей плагін використовується для створення текстових CSS3 анімацій, який поєднує в собі ряд бібліотек, забезпечують більш гнучкі налаштування і розширюють можливості плагіна. Все, що вам потрібно зробити, це підключити плагін до ваших веб-проектів і почати створювати різні дивовижні ефекти, для тексту, а можливості плагіна Textillate.js, досить широкі. Ви зможете приємно здивувати своїх користувачів, новизною і динамічним поданням. Для прикладу, можете застосувати плагін для виводу змінюються заголовків нових або популярних записів вашого блогу.

[ Демо & Исходники ]


Сьогодні ми розглянули лише найменшу частину всього того нового і цікавого в плані веб-разрабоки і дизайну. Інтернет постійно розвивається, вимагає все нових і нових рішень. Сподіваюся, ця стаття допоможе тим кому воно треба, поповнити свою обойму інструментів, або наштовхне на створення свого, не менш цікавого і корисного продукту, а чим чорт не жартує.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: