Меняем на сайте hr под свой оригинальный - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 5
Гостей: 5
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


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

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

Мы видим там:
Code
hr {border-top:1px dashed #c5c5c5;border-bottom:0px dashed #c5c5c5;border-right:1px dashed #c5c5c5;border-left:1px dashed #c5c5c5;}

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

Мы просто как видите поменяли, и где раньше стояли, те которые нам предоставила система, на это место поставили свой стиль а старый убрали. Теперь сам стиль устанавливаем в CSS сайта.
Code
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; вообщем как вам нужно отредактировать.

Важно!

При копировании материала указывать ссылку на источник.

- 375
- 06-Ноября-2016
- 0
Материал разместил:

Похожий материал
Похожего материала не найдено...
Статьи сайта