Персональный сайт

Как сделать линии из изображений в html через CSS

SHIISH — Mon, 24 Dec 2012 13:19:51 GMT

Скриншот

Источник: сеоша.рф

В этом уроке пойдет речь о создании горизонтальных и вертикальных линий состоящих из изображений, которые частенько используются при создании сайтов. Делаются эти полосы заданием стиля через CSS. Используются такие линии в основном для оформления границ страницы и для разделения статей, в частности, в формате блога. Полоса может быть сколько угодно длинной потому что состоит из растиражированного рисунка.

Вообще, для создания обычной пунктирной линии в css используют значения dashed (прерывистая линия) и dotted (пунктир), например:

border-left: 1px dashed black; или border-top: 1px dashed black;
Из изображений также можно построить пунктирные и прерывистые линии, но это нецелесообразно, поэтому будем использовать какой-нибудь интересный рисунок.

Для создания горизонтальной линии:

HTML часть

Вставьте этот участок кода в том месте страницы, где Вам нужна линия.

Код

CSS часть

Код

.line {
background:url(img/line1.gif) top left repeat-x; height:1px; width:500px;
}

img/line1.gif - путь к изображению отрезка линии. Ширину горизонтальной линии Вы можете регулировать, меняя значение свойства width.

Для создания вертикальной линии:

HTML часть

Вставьте этот участок кода в том месте страницы, где Вам нужна вертикальная линия.

Код

CSS часть

Код

.line2{
background:url(img/line2.gif) top left repeat-y; height:500px; width:1px;
}

Высоту горизонтальной линии Вы можете регулировать, меняя значение свойства height, толщину (зависит от ширины изображения) - width.

Меню на css с эффектом flash

SHIISH — Mon, 24 Dec 2012 13:12:49 GMT

Скриншот

источник: сеоша.рф

В этом уроке мы будем учиться делать интересное меню с использованием CSS.

Набор графики, который понадобится для реализации меню - скачать 7 изображений. Желательно их поместить в папку images. Если иначе, исправьте в коде пути к файлам изображений.

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

HTML часть:

Основу меню будет составлять маркированный список, созданный тэгом

, при этом, у каждой из ссылок должен быть уникальный класс.

Кроме этого мы должны внутри каждой ссылки оставить пустой элемент , который нам понадобится для создания эффекта, при котором одно изображение сменяет другое при наведении мыши.

Код

CSS стили

#menu

Код

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span

position:absolute

Код

#menu span {
display: none;
position: absolute;
}

#menu a

text-indent