» »

Меняем на сайте hr под свой оригинальный


Меняем на сайте hr под свой оригинальный

Как поняли, что hr отвечает за полосы, которые обязательно стоят в дизайн на сайте. И по умолчанию идут стандартные, а просто полоса от начало и до конца. Но и не нужно забывать, что hr также прописывают, когда пишут статью или мануал, просто ставя в текст. Но теперь можно сменить на что то красивей или просто, на измененную что здесь разберем один стиль.

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



Мы видим там

Код
iframe, object, embed {max-width: 100%;}


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

Ставим стили.



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

Теперь сам стиль устанавливаем в CSS сайта.

Код
hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgb(122, 125, 127), rgba(0,0,0,0));
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(24, 114, 175, 1), rgba(0,0,0,0));
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(24, 114, 175, 1), rgba(0,0,0,0));
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(24, 114, 175, 1), rgba(0,0,0,0));
}


Теперь нам можно самому настроить и даже вывести оттенок цвета, поставил серый, вы можете поставить под свой дизайн. Также можете, сто плавно исчезает, сделать больше, или наоборот меньше, но и шире, за это отвечает height: 1px; вообщем как вам нужно отредактировать.
06.04.2016 Просмотров: 479 Комментарий: (14)

Поделиться в социальных сетях

Материал разместил

Комментарий: 14
MikkeyZer
MikkeyZer 06.04.2016 01:241
+1
Я думаю что все таки стандартный лучше smile
Kosten
Kosten 06.04.2016 02:352
0
Но это твоя точка зрение, другому может такой формат понравился, главное им можно рулить и сделать как нужно.
MikkeyZer
MikkeyZer 06.04.2016 02:593
0
В этом вы правы
workman
workman 06.04.2016 09:235
0
Слушайте всегда сторожил сайтов и все будет ривно. ))
workman
workman 06.04.2016 07:384
0
Выдернул у MikkeyZer на сайте ???
MikkeyZer
MikkeyZer 06.04.2016 12:356
0
Наверное,но вы классно сделали красиво смотрится я тут думал вчера оставить не оставить а потом посмотрел и решил что пусть останется так стильно смотрится :)ъ
Kosten
Kosten 06.04.2016 12:367
0
У него у видел а нашел на одном блоге, там много так то представлено, но думаю, можно с одного все сделать.
workman
workman 06.04.2016 13:208
0
Ну можно еще задать картинкой например так
Код
hr {
  background:url(ссылка на картинку) no-repeat top center;
  height:42px;
  border:none !important;
}
Angerfist
Angerfist 06.04.2016 13:4010
0
Картинкой попроще, благо их навалом в сети на любой вкус, главное прозрачность фона png)
workman
workman 06.04.2016 13:239
0
А вот так можно сделать вертикальную линию HR
Код
<hr noshade style="height: 200px; width: 1px;">
workman
workman 06.04.2016 14:2111
0

Kosten
Kosten 06.04.2016 14:4712
0
Это явно какой то тематический.
Maryges
Maryges 06.04.2016 15:5213
0
В интернете полно, но нужно понимать, если поставить картинку на этот сайт, как будет смотреться, правильно сказано.
Цитата Kosten
Это явно какой то тематический.

Пот какой то клан можно поставить.
Kosten
Kosten 06.04.2016 16:2014
0
Потому и разместил в блоге а не скрипты категория, здесь просто разбор полетов по одному материалу, так как можно сказать по стилям они одинаковы.
avatar