« Заменяем <hr /> через CSS для uCoz (8 вариантов) »

Описание материала:

В сегодняшнем материале, мы будем заменять стандартный код


на другой, через CSS стили. Мы предоставим Вам выбор из 8 вариантов, каждый вариант полностью отличается друг от друга. Установка будет очень проста, что Вам нужно будет сделать, так это в CSS таблице заменить свой стиль на выбранный.

1 Вариант:


Код
hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);  
  background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);  
  background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);  
  background-image: -o-linear-gradient(left, #ccc, #333, #ccc);  
}

2 Вариант:


Код
hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));  
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));  
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));  
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));  
}

3 Вариант:


Код
hr {
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
}

4 Вариант:


Код
hr {
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

5 Вариант:


Код
hr {
  border: 0;
  height: 0; /* Firefox... */
  box-shadow: 0 0 10px 1px black;
}
hr:after {
  content: "\00a0";
}

6 Вариант:


Код
hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

7 Вариант:


Код
hr {
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;  
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

8 Вариант:


Код
hr {
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr:after {
  content: "§";
  display: inline-block;
  position: relative;  
  top: -0.7em;  
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}


Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Блог | Просмотров: 758

Теги к материалу: css, hr /, 8 вариантов, через, ucoz, Заменяем, для

Поделиться в соц. сетях:
Комментариев к материалу: 12
Спасибо Вам, автор данного материала)
0
Виктор Ягодин 19.07.2016 в 00:27
Пожалуйста)
0
BlackHARD 29.03.2016 в 08:22Спам
Вот может пригодится:
☢☣☠
1
Виктор Ягодин 29.03.2016 в 19:30
Спасибо, пригодится многим)
0
BlackHARD 29.03.2016 в 08:14Спам
Вместо §, поставлю значёк радиации и для сталкерского сайта пойдет) cranky
1
Виктор Ягодин 29.03.2016 в 19:30
Ну у кого фантазия огромная, может много чего придумать)
0
Zafar Vakhabov 18.03.2016 в 06:27Спам
Спасибо! smile
0
Виктор Ягодин 18.03.2016 в 12:30
Не за что) biggrin
0
Второй вариант больше нравится, на старом шаблоне ставил.
1
Виктор Ягодин 17.03.2016 в 23:45
А мне почему-то нравится стандарт)
0
Красивые линии получились.
1
Виктор Ягодин 17.03.2016 в 23:45
Не плохие)
0
avatar