Создаем точечные линии через CSS

В этом уроке пойдет речь о создании горизонтальных и вертикальных линий состоящих из точек, которые частенько используются при создании сайтов.

Делаются эти полосы очень просто. Полоса может быть сколько угодно длинной потому что состоит из растиражированной точки.

Под большим увеличением эта точка выглядит примерно так:

Скачать изображения этих точек для создания подобных линий можно здесь.

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

HTML часть

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

<div class="line"></div>

CSS часть

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

Ширину горизонтальной линии Вы можете регулировать, меняя значение свойства width.

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

HTML часть

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

<div class="line2"></div>

CSS часть

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

Высоту горизонтальной линии Вы можете регулировать, меняя значение свойства height.

Вот, что получилось у меня

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 14 Мая 2008
Просмотров: 52534
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 14 Мая 2008 20:30
    Влад
    Спасибо за полезный урок
  • 15 Мая 2008 17:26
    Андрей
    О. спосибо за урок, довно хотел узнать как делат такую красивую линию.
  • 16 Мая 2008 22:27
    Евгений
    Хм, а у меня не работает : )
  • 18 Мая 2008 01:13
    Оля
    Спасибо!
  • 20 Мая 2008 20:37
    Владимир
    С днюююхой....!!! Седне у содателя сайта день рожденья ... Так давайте все вместе ХОРОМ дружно поздравим ЕГО ... !!!!
  • 20 Мая 2008 23:22
    Оля
    П О З Д Р А В Л Я Ю !!! :-)))
  • 21 Мая 2008 19:50
    jackbv
    спосибо !!!!! ваши уроки очень полезны !!!! вы просто МОЛОДЕЦ !!!
  • 28 Мая 2008 12:39
    Александр
    Спасибо Евгений за простонародный стиль общения и доступные уроки!
  • 29 Мая 2008 07:43
    Антон
    Такие эффекты можно делать и без изображений - только на CSS. Интерес представляет использование различных изображений, а не точек, тогда можно получить оригинальные эффекты. А в целом, Евгений, информация у Вас на сайте полезная. Успехов вашей молодой семье.
  • 8 Июня 2008 23:07
    Serga
    спс
  • 8 Июня 2008 23:07
    Serga
    спасибо
  • 13 Июня 2008 18:34
    Serga
    спс
  • 22 Июня 2008 16:36
    rinat
    уроки просто улёт
  • 26 Июня 2008 19:25
    skiw
    спасибо
  • 27 Июня 2008 20:28
    Виталий
    Спасибо за уроки! Если бы все учителя так преподавали свои уроки, то думаю умных людей стало бы на много больше.
  • 5 Июля 2008 20:23
    Nik
    Спасибо ОГРОМНОЕ
  • 12 Июля 2008 11:02
    Джамшед
    Спасибо за такой прекрасный урок
  • 14 Июля 2008 13:54
    worTex
    Хороший урок .Спасибо :)
  • 8 Августа 2008 18:49
    Олег
    Большое спасибо за инфу. Сайт уникальный в своем роде. Материал подобран очень грамотно и что самое главное, доходчиво преподнесён. Еще раз спасибо.
  • 17 Декабря 2008 21:22
    илья
    воспользовался. катит.
  • 6 Января 2009 16:38
    Дима
    Привет.А как повторить эту линию? Мне нужно чтоб она отображалась и сверху и с низу текста.Например вот как у вас выделениестатей
  • 23 Февраля 2009 03:44
    Almas
    Сделал эти линии в IE 6 И текст сполз под линиями примерно на 4px Кто нить обьясните вот майл kello2@mail.ru
  • 25 Февраля 2009 21:32
    Алмас
    Пожалуйста ответьте Сделал эти линии в IE 6 И текст сполз под линиями примерно на 4px Кто нить обьясните Хотя в Лисе и Опере все Ок ??? Ответьте Сергей И Евгений
  • 7 Мая 2009 09:09
    ABCD
    А так не проще? border:1px solid #444
  • 24 Июля 2009 11:20
    skif
    Легче просто написать: border-left: 1px dashed black; или border-top: 1px dashed black; Зачем придумывать колесо :)
  • 11 Июля 2011 16:11
    Kite_1988
    Гениально!! Клац, клац клац :))
  • 31 Августа 2011 07:52
    Дмитрий Ли
    А разве так не проще? div {border-left:1px dotted #000}
^ Наверх ^