Приёмы web-дизайна

Тени с помощью CSS3

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

На самом деле реализовать тени средствами CSS достаточно легко и просто, определив необходимые правила соответсвующему div. Дополнительная разметка теперь не требуется, достаточно создать дополнительные псевдоэлементы, помещённые за основным объектом. Сделать это можно с помощью замечательного свойства box-shadow. Синтаксис box-shadow реализуется следующим образом:

box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]

Ниже представлены типовые примеры для этого свойства. С помощью таких псевдоэлементов, как before и after мы реализуем отбрасывание внутренней и внешней тени для блока:

Создание внешней тени

Создаем динамические закладки на jQuery

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

Основой для наших закладок будет служить тег li. Данная методика достаточно примитивна: при добавлении закладки, переменный счетчик генерирует для нее id и для id формируется соответствующее содержание.

HTML-код

Созданная нами HTML разметка закладки содержит только единственный элемент li – кнопку добавления закладки.

Как избавиться от обтекания содержания?

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

Для начала, предлагаю вам скачать доп. файлы.

Не игнорируйте :focus

Зачастую, при написании CSS файла для нового веб-проекта, используются псевдокласс :hover, который отвечает за состояние объекта, когда на него наведена мышь. Здесь нередко возникает ошибка из-за небрежности в написании правил для :hover без выполнения псевдокласса :focus, который устанавливает фокус на объекте страницы. Насколько глубокими будут проблемы от подобного недосмотра зависит от назначенных действий для :hover.

Игнорирование :focus не вызовет серьезных трудностей, если для :hover определены простые правила, вроде изменения цвета при наведении мышки на объект. Если фокус поменяется посредством клавиатуры, актуальный объект попросту не выделится.

Выезжающая панель на Mootools

Здравствуйте. Данный урок мы посвятим созданию всплывающих панелей для сайта. Для разработки панели нам потребуется малейшее представление о Mootools и, конечно же, знание CSS-стилей, необходимых для создания её дизайна. Прежде чем начать, скачайте файл-архив с исходниками, там же вы найдете пример получившейся панели (index.html). Если вы скачали и все просмотрели, приступим к реализации этого элемента.

Меню "аккордеон"

Здравствуйте, начинающие вебмастеры! Вы, наверное, не раз сталкивались с различными видами меню, каждый из которых имеет свой красивый дизайн и возможности. Сегодня мы рассмотрим выпадающее меню типа "аккордеон". Сначала не забудьте скачать исходники файлов, они пригодятся нам в ходе данного урока.

Скачать файл-архив с исходником

Шаг 1. Конструкция меню в HTML.

Сперва создадим html-каркас, который станет основой для нашего нового меню. Ниже вы увидите пример такого html – каркаса:

Бесплатные WISIWYG редакторы

Для полноценной работы с вашим сайтом, будь-то собственная разработка или применение CMS, в обязательном порядке потребуется установка качественного и функционального WISIWYG редактора. Критериями в данном вопросе может служить наличие модульности, API, поддержка XHTML, кроссбраузерность и возможность установки файлового менеджера. Среди бесплатных решений наиболее приемлемым и популярным вариантом является применение редакторов TinyMCE или CKEditor (FCKeditor). Кратко рассмотрим каждый по отдельности.

TinyMCE

Делаем зум изображений с помощью jQuery

Иногда при разработке проекта возникает необходимость применения зума (лупы) для отдельных частей изображений. Вариантов реализации существует довольно много, но мы рассмотрим лишь один конкретный плагин jQuery – CloudZoom. Среди преимуществ этого плагина следует выделить следующие: простая интеграция с HTML, кроссбраузерность, размер и быстродействие, плавность зумирования, режим галереи, возможность осуществлять различные режимы увеличения, гибкость настройки, работоспособность без CSS, бесплатность.