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

10.02.2010 | Рубрики: jQuery | Комментарии (22)
Тэги: ,

jqsipleslide.gif

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

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

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

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

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

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

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

07.02.2010 | Рубрики: Дизайн | Комментарии (16)
Тэги: , , ,

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

hr1.png

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

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

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

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

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

hr2.png

Стр. 23 из 67«...«20212223242526»...»