- Метки урока:
- css
- web дизайн
Создаем точечные линии через 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
Просмотров: 54637
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.