Mësime | HTML dhe CSS | Ndarësi i temës

Ndarësi i temës në faqe të uebit (hr)

Elementi <hr> në HTML e përfaqëson një ndarje tematike në mes elementeve të nivelit të paragrafit: për shembull, një ndryshim i temës në një artikull, ose të një zhvendosje të temës brenda një pjese të faqes.

Në të kaluarën është paraqitur elementi <hr> si një vijë horizontale për tu treguar si pamje në faqe. Edhe pse mund të shfaqet ende si element i pamjes, ky element tani përkufizohet në terma semantikë, në vend të termave projektues.

Nëse dëshironi të vizatoni një vijë horizontale, duhet ta bëni këtë duke përdorur kod të përshtatshëm CSS. Pa CSS, e vetmja etiketë e cila ju duhet është <hr />

Demonstrim

Rregullat e jetës:

Mos mendo asnjë ditë për të kaluarën, ajo nuk ekziston më.

Mos u brengos se çka të thonë të tjerët për ty, jeto jetën tënde.

HTML

<div class="container mbajtesi-me-ndares">
<h4>Rregullat e jetës:</h4>
<hr class="teksti-i-ndaresit" data-content="1">
<p>Mos mendo asnjë ditë për ditën e djeshme, ajo nuk ekziston më.</p>
<hr class="teksti-i-ndaresit" data-content="2">
<p>Mos dëgjo se çka thonë njërëzit tjerë, jeto jetën tënde.</p> 
</div>

CSS

.mbajtesi-me-ndares hr {
  border: none !important;
  border-top: 1px solid #8c8b8b;
  background-image: linear-gradient(to right, #f0f0f0, #8f8f8f, #f0f0f0);
  overflow: visible;
  text-align: center;
  }
.mbajtesi-me-ndares hr::after {
  background: #fff;
  padding: 0 4px;
  position: relative;
  top: -16px;
  }
.mbajtesi-me-ndares h4 {
  margin: 20px auto;
  text-align: center;
  width: 200px;
  font-size: 12px;
  border: 1px solid rgba(111, 111, 111, 0.2);;
  background-color:rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 4px;
  }
.mbajtesi-me-ndares p {
  text-align: center;
  margin-top: 20px; 
  margin-bottom: 40px;
  }
.teksti-i-ndaresit {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: #000;
  text-align: center;
  height: 1.5em;
  opacity: .5;
  }
.teksti-i-ndaresit:before {
  content: '';
  background: linear-gradient(to right, transparent, #818078, transparent);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  }
.teksti-i-ndaresit:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  border: 2px solid #8c8b8b;
  color: #000;
  padding: 0 .5em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fff;
  }