» » >
Дизайнерские хитрости - линии благодаря css
19.09.2013, 16:55




Вдавленная линия:

Добиться нужного результата можно несколькими вариантами:

- первый вариант, использовать тег hr которому пропишем css стили, такой вариант устарел по той причине, что он отображается так как нужно, только в браузере Mozilla Firefox, выкладываю для тех кто захочет его додумать.

CSS-Code

hr {
  margin: 0 ;  
  border: medium none;
  border-bottom: 1px solid #fff;
  background-color: #D0D0D0;  
  color: #D0D0D0;
  height: 2px;
}

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

HTML-Code

<div class="line-1"></div>
CSS-Code
Выделить всё
.line-1 {
  width:100%;  
  border-top: 1px solid #D0D0D0;
  border-bottom: 1px solid #fff;
  height: 0px;
}

- третий вариант, это прописать div ячейки двух пиксельное изображение линии, которое будет повторяться по горизонтали и прижато к нижней краю ячейки

HTML-Code

<div class="line-2"></div>
CSS-Code

.line-2 {
  width:100%;  
  height: 2px;
  background: url(http://ucoz-helper.ucoz.com/HTML-CSS/fon_pix.gif) repeat-x bottom;
}
Вдавленная ячейка с информацией:

Тут всё просто как дважды два, основной ячейки div, мы прописываем края рамки, тут главное понять какую цветовую гамму выставлять:

- фон страницы, должен быть темнее белого цвета
- фона ячейки, должен быть темнее или светлее основного фона страницы
- левая и верхняя линия ячейки, должна быть темнее основного фона страницы
- правая и нижняя линия ячейки, должна быть светлее основного фона страницы

HTML-Code

<div class="line-3"></div>
CSS-Code

.line-3 {
  width:100%;  
  height:100px;  
  background: #F4F5F6;
  border-top: 1px solid #D0D0D0;
  border-left: 1px solid #D0D0D0;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;  
}
Двойные рамки:


Очень часто используются в европейских блогах:

- первый вариант, прописать стандарты CSS3, но двойные рамки получаться не очень яркими

HTML-Code

<div class="line-4"></div>
CSS-Code

.line-4 {
  width:100%;  
  height:100px;  
  background: #E7EBEE;
  border:1px solid #D0D0D0;  
  -moz-box-shadow:inset 0px 0px 2px #fff;
  -webkit-box-shadow:inset 0px 0px 2px #fff;
  box-shadow:inset 0px 0px 2px #fff;
}

- второй вариант, поместить в основную ячейку div, ещё одну ячейку и прописать в стилях нужные значения, а именно размер внутренний ячейки с белой рамкой

HTML-Code

<div class="line-5">
  <div class="line_vn"></div>
</div>
CSS-Code
Выделить всё
.line-5 {
  width:500px;  
  height:100px;  
  background: #E7EBEE;
  border:1px solid #D0D0D0;  
}  
   
.line_vn {
  width:498px;  
  height:98px;  
  border:1px solid #fff;  
}

или чтобы не прописывать лишние стили и теги, пропишем основной ячейки outline, который будет отвечать за внешнюю рамку, а border, за внутреннюю:

HTML-Code

<div class="line-6"></div>
CSS-Code

.line-6 {
  width:500px;  
  height:100px;  
  background: #E7EBEE;  
  outline: 1px solid #D0D0D0;
  border:1px solid #fff;  
}
Закруглённые края:


HTML-Code

<div class="line-7"></div>
CSS-Code

.line-7 {
  width:500px;  
  height:100px;  
  background: #f6f6f6;  
  border:1px solid #D0D0D0;  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;  
}

Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 1923 | Загрузок: 78 | Источник: www.center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<