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

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

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

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

Надеюсь, вы уже имели удовольствие видеть подобные разделительные линии в дизайне некоторых сайтов. Обычно такую линию рисуют в фотошопе в 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).

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

jQuery для чайников | Введение

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

Тэги: jQuery

Данный цикл статей предназначен для вебмастеров, которым вовсе не интересно вникать в программные премудрости библиотеки JavaScript по имени jQuery, но очень хочется использовать все ее навороты в своих веб-сайтах. О каких наворотах идет речь? Все вы наверняка видели на современных сайтах различные всплывающие или наоборот прячущиеся панели, сайдбары – гармошки, картинки плавно затухающие или скользящие, классные фото-галереи и т.п. Красиво, черт!

В шаблонах Wordpress а ля “премиум” уже просто не обходится без слайдера с картинками. Смотрится красиво и стильно. Хочется ведь и в своем шаблоне что-то подобное прикрутить. Самое простое, конечно же, взять готовый буржуйский шаблон и банально заменить в нем диз на свои каляки-маляки, оставив функционал как есть. Но кто даст гарантию, что шаблон после этого не поплывет? Мало ли где что-нибудь напутали. Поэтому хотя бы на уровне грамотного пользователя jQuery (не разработчика!) изучить данный предмет стоит. Вот этим и займемся.

Еще раз, для прояснения: в данном цикле статей будет в самой простой и доступной форме показан ряд примеров практического применения библиотеки jQuery, без глубокого вникания в суть происходящих процессов. Кому интересно более детальное изучение предмета — читайте профильные форумы и блоги. Вот несколько ссылок:

1. Статья из Wiki
2. Руководство jQuery (рус)
3. Документация на jQuery-Docs.Ru
4. LinkExchanger Blog
5. Сайт разработчиков jQuery

Так как сегодняшний пост озаглавлен словом Введение, то с jQuery мы познакомимся пока что лишь в общих чертах. Чтобы сложилось достаточно простое и внятное понимание, о чем вообще идет речь.

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

Выглядело это достаточно просто. В код веб-страницы вставлялась ссылка на внешний файл скрипта:

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

Практически точно также мы пристегиваем к странице файл стилей. Это просто.

Другой вариант — непосредственная вставка кода самого скрипта прямо в веб-страницу. Для этого в нужном месте страницы, там, где предполагалось показывать некую фишку (текущую дату, например), добавлялась следующая конструкция:

<script type="text/javascript"> программный код самого скрипта </script>

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

Библиотека эта постоянно совершенствуется и пополняется. Ее свежую версию всегда можно скачать с официального сайта разработчиков jquery.com. На данный момент времени (27.01.2010) свежая версия имеет номер 1.4.1

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

Enjoy!