Websovet | Полезные советы по созданию веб сайтов

jQuery для чайников | Начальные сведения | Простой слайдер

Дата: 10.02.2010 | Рубрики: jQuery | Комментарии (5)

Привет всем любителям и осваивателям прелюбопытнейшей штуковины по имени jQuery! Продолжим наши изыскания и изучения.

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

Но обо всем по порядку. Для начала еще раз остановимся на том, как пристегнуть библиотеку jQuery к странице вашего сайта. Понятное дело, что саму б-ку нужно вначале скачать. Идем на родину — jquery.com Скачать можно как полную версию (156 Кб), так и минимизированную (69 Кб). Разница между ними лишь в удобстве чтения для разработчиков. Если хотите поковыряться в коде самой б-ки, то качайте полную версию. Если только для использования на вашем сайте, то минимальную. В минимальной просто оставлен весь функционал, но убраны все комментарии. Файл с библиотекой кладем в корневую папку сайта.

Чтобы пристегнуть б-ку к странице, необходимо в пределах тэгов <head></head> прописать адрес к б-ке:

<script type="text/javascript" src="jquery.js"></script>

Читать полностью →

Создание стильной разделительной линии средствами CSS

Дата: 07.02.2010 | Рубрики: Дизайн | Комментарии (12)

Тэги: css, hr, html тэги, Дизайн

Для начала просто картинка, чтобы было понятно, о чем собственно идет речь:

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

Однако можно вполне обойтись и без картинки. Для этого используем старый добрый тэг <hr />, которому зададим несколько хитрых правил в стилях. Данный тэг добавляет на страницу разделительную линию, оставляя над и под собой по одной пустой строке. По умолчанию эта линия выглядит не слишком кошерно — обычная черная черта слева направо через всю страницу. Приукрасим ее:

hr { padding-bottom: 1px; background-color: #9b9b9b; border-bottom:1px solid #F4F4F4; }

Цвет линии #9b9b9b — темно-серый. Под ней мы разместили более светлый блик #F4F4F4 в виде нижнего бордера. Но так как у данного тэга весьма своеобразный способ отображения самое себя, то для необходимого эффекта следует добавить нижнее поле padding-bottom в 1 пиксель.

В результате получаем практически тот же результат, как если бы это была нарисованная в фотошопе двухцветная линия толщиной в 2 пикселя:

Ролловер на 4 состояния из одной горизонтальной картинки

Дата: 03.02.2010 | Рубрики: Верстка | Комментарии (4)

Тэги: css, Верстка, псевдо-классы, Ролловер

Обычно картинки для ролловера располагают вертикально, как в примере “Простой ролловер”. Но то же самое можно сделать и при размещении картинок горизонтально. В чем особенный смысл? Да ни в чем. Просто может быть кому-то так покажется более прикольным. Или понятным.

Для пущего форсу сегодняшний ролловер сделаем заточенным аж на четыре состояния: не-при-делах, в-чем-дело, вперед-вперед и отвалите-я-устал. То есть, состояние покоя, состояние готовности при наведении курсора мыши, непосредственно срабатывание и возврат в исходное состояние. В правилах CSS для ссылок за все эти четыре состояния отвечают соответствующие псевдо-классы :link, :hover, :active и :visited

Для начала подготовим одну большую картинку, на которой последовательно разместим три плашки:

Как видите, все достаточно просто и прозаично: каждая из трех плашек составляет в длину ровно 180 пикселей. Высота картинки — 50 пикселей. Запишем, а затем разберем правила в листе стилей CSS:

a:link, a:visited { background: url(rollover-gor.gif) no-repeat 0 0; width: 180px; height: 50px; color: #fff; display: block; font: bold 24px Arial; text-decoration: none; padding: 8px 0 0; } a:hover { background-position: -180px 0; color: #333; text-decoration: none; } a:active { background-position: -360px 0; color: #ff0; text-decoration: none; }

Для начала мы прописали общим фоном всю картинку, но при этом задали координаты 0 0 и ограничили размер видимого пространства прямоугольником 180х50 пикселей. Это как раз размер одной плашки. Чтобы при манипуляциях с мышкой срабатывала вся поверхность кнопки, а не только текст ссылки, необходимо добавить в набор правило display: block;

Обратите внимание: первый набор правил прописан одновременно для двух псевдо-классов :link и :visited. То есть, после всех срабатываний кнопка будет возвращаться в исходное состояние. Можно отдельно для посещенной ссылки (:visited) прописать свои правила. Это уже на ваш вкус.

Другие правила из первого набора, думаю, не вызовут сложностей.

Рассмотрим два последующих. Для псевдо-класса :hover мы заменили правило для отображения фона — background на более конкретное — background-position. Фон у нас уже задан, и нам остается лишь сменить координаты видимой части картинки. Для этого мы как-бы “сдвигаем” окно видимой части на -180 пикселей влево. В результате станет видна вторая плашка.

Точно также поступаем и для псевдо-класса :active. Только теперь сдвигаем фон уже на все -360 пикселей (180+180=360).

Все просто. Пример такого ролловера можно посмотреть здесь