Сортировать статьи по: дате | популярности | посещаемости | комментариям | алфавиту

17 свежих инструментов для веб-дизайнеров и разработчиков

Несмотря на то, что в интернете можно видеть множество инструментов для веб-дизайнеров и разработчиков, им всегда чего-то не хватает, чего-то, что помогло бы облегчить повседневные задачи. Удобный инструмент – это как благословение для разработчиков и дизайнеров. Имея в запасе отличные инструменты, можно сильно облегчить процесс веб-разработки, и сэкономить много времени. Ниже мы хотим предоставить вам список удобных и свежих инструментов для дизайнеров и веб-разработчиков. Надеемся, что эти инструменты помогут вам в выполнении повседневных задач и ускорят рабочий процесс.

Подборка переходов между страницами

Сегодня мы хотим поделиться с вами подборкой с креативными эффектами перехода между страницами. Здесь мы собрали несколько анимаций, которые можно применять к «страницам» для создания интересных эффектов при переходах. Хотя некоторые эффекты очень простые (например, скольжение), в других используется перспектива и 3d transforms для создания эффекта глубины и динамичности.

34 бесплатных Open Source сниппетов CSS-кода для разработчиков

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

Автоматическая нумерация изображений при помощи CSS Counters

При написании статей, записей в блоге, руководств или чего-либо другого, вы зачастую используете по несколько изображений, графиков, фотографий или даже видео, а также отрывки кода, которые иллюстрируют предложенный контент. И часто случается так, что вам нужно использовать какую-то подпись к изображению, или даже нумерацию, чтобы ваши пользователи могли уследить за тем, к какому фрагменту текста относится то или иное изображение.

И именно это мы собираемся реализовать в сегодняшней статье: комбинировать элемент «figure» с CSS counters, чтобы ваши вставленные элементы (особенно изображения) стали особенно привлекательными!

Анимация с появлением текста на CSS Animations

Сегодня мы хотим рассказать вам о том, как сделать небольшой текстовый эффект при помощи css-анимации и тени текста. Возможно, вы уже встречались с подобной анимацией текста при просмотре, к примеру, трейлеров к фильмам. После просмотра Introducing Briefs (это, конечно, не трейлер к фильму, но превью к очень интересному приложению), мы вдохновились на воссоздание подобного эффекта при помощи CSS.

Дизайн пользовательских интерфейсов: воссоздаем крутой эффект переворота из OS X при помощи CSS3 3D Rotation

В спецификации CSS3 доступны два типа трансформаций: 2D и 3D. В нашей предыдущей статье мы обсуждали двухмерные трансформации, реализованные посредством CSS3. Так что на этот раз мы хотим рассказать вам о 3D-пространстве, и конкретно для сегодняшней статьи мы выбрали эффект переворота из OS X.

11 невероятных jQuery-плагинов для создания туров по сайту

Всегда сложно предугадать, как пользователи просматривают ваш сайт и воспринимают изложенную на страницах информацию, будь то полная версия сайта или веб-приложение. Существуют инструменты, которые помогают нам проанализировать это при помощи A/B-тестов – это помогает повысить уровень удобства использования вашего сайта. Тем не менее, вы всегда можете направить пользователей в нужное русло при просмотре вашего сайта, чтобы убедиться в том, что они ничего не упустят.

Исследование: используем закодированные изображения в CSS (background-image)

Опытные дизайнеры даже не задумываются ни о чем, когда им нужно поместить фоновое изображение на страницу при помощи CSS. Обычно все делают это следующим образом: указывают параметр background-image с прямой ссылкой до исходного изображения. Тем не менее, URL каждого добавленного изображения создает дополнительный запрос к серверу. Другими словами, если у нас будет 10 разных URL, браузеру понадобиться сделать 10 разных HTTP-запросов. Существуют и другие способы использования фоновых изображений – в форме спрайт-изображения при помощи CSS, либо в форме закодированного изображения.

Апрель 2013: Что нового появилось в сети для веб-дизайнеров?

Апрельский выпуск обзора новинок для веб-дизайнеров и разработчиков включает в себя новые веб-приложения, jQuery-плагины и javascript-ресурсы, а также мобильные приложения, образовательные ресурсы, наборы для создания набросков, фреймворки, инструменты для веб-разработки, а также несколько хороших новых комплектов шрифтов.

CSS Matic: WYSIWYG для CSS-разработчиков

Прошли те времена, когда нам нужно было разрабатывать CSS-код полностью вручную. Уже долгое время появляются все новые и новые «помощники». Эти помощники обычно охватывают отдельные аспекты CSS, и предоставляют более или менее удобный графический интерфейс, который позволяет визуально заниматься разработкой CSS-кода. Сегодня мы хотим представить вам новый сервис из Испании, который охватывает все задачи, связанные с разработкой CSS. Этот сервис был назван CSS Matic, и его создатели довольно известны в сфере веб-дизайна.