Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifadagi havola ostiga chiroyli chizilish shakllantirib, kontentni yanada chiroyli qilamiz. Buning uchun biz CSSning ajoyib uslublaridan va  HTMLdan foydalanamiz.

Standart holda veb-sahifadagi havolalar ostida chiziq doimiy mavjud bo'ladi:

Stabdart havola
Stabdart havola

 

Biz esa standart havola ostidagi chiziqni shunday harakatlantiramizki, ajoyib bir tuyg'uni foydalanuvchiga baxsh etadi:

Nostandart ost chizilish
Nostandart ost chizilish

 

Maqsadumizni aniqlashtirib oldik, endi kod yozishga o'tamiz.

Yuqoridagi animatsion tasvirda havolaga 5 xil ko'rinishda uslub berilgan. Siz o'zingizga ma'qulini qilishingiz mumkin. Quyidagi kodda hamma usulni ko'rib chiqamiz.

Demak, HTML faylda havolani hosil qilish uchun </a> elementidan foydalanamiz. Eslab qoling, agar bizga harakatlanuchi chiziq havolaning yuqorida bo'lishi kerak bo'lsa, ushbu elementga biror selektor berish kerak.

 

HTML:

<div class="links">
  <h1>Havolalarning ostiga o'zgacha chizilishi</h1>
  <p class="left">
    Chapdan: 
    <a href="#">Mana bunday</a>, <a class="top" href="#">Hattoki tepadan ham mumkin</a>
  </p>
  <p class="center">
    Markaz bo'yicha: 
    <a href="#">Go'zallik</a>
  </p>
  <p class="right">
    O'ngdan: 
    <a href="#">Mana bunday</a>, <a href="#">Yoki mana bunday</a>
  </p>
</div>

 

Agar animatsion tasvirga diqqat qilgan bo'lsangiz, chiziqning umumiy 3 xildagi harakat turini sezasiz. Bu - chapdan o'ngga, markazdan chekkalarga, o'ngdan chapga.   

 

Avvalo, sahifa uchun umumiy bo'lgan xossalarni yozamiz. Ahamiyatlisi, havoladan standart tag chiziqni olib tashlash uchun  text-decoration: none;  dan foydalanamiz.

 CSS:

body  {
  font-family: sans-serif;
  font-weight: 300;
  font-size: 24px;
}
.links  {
  margin: auto;
  width: 80%;
}
a {
  text-decoration: none;
  position: relative;
}

 

Birinchi, chapdan o'ngga harakatlanuvchi chiziqni hosil qilamiz. Buning uchun :before psevdoelementidan foydalanamiz. .left a::before uchun   width: 0%;  height: 2px;  transition: 0.2s; xossalarini yozamiz. Ya'ni, left klasidagi havolaning qalinligi 2px bo'lishi, hozircha uzunligi havolaning 0% uzunligiga teng bo'lishini kiritamiz. 

Qachonki unga bizga yaxshi tanish bo'lgan :hover psevdoklasi biriktirilganda, width: 100%;  left: 0;  bo'lsin. Ya'ni chiziq paydo bo'lishni boshlaydi va kursor olinganda o'ng tarafga o'tib yo'qoladi.

Agar bizga yuqorida paydo bo'lishi kerak bo'lsa,  .left a.top::before {top: 0;} ni kiritamiz.

.left a::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #000;
  transition: 0.2s;
}
.left a:hover:before {
  width: 100%;
  left: 0;
}
.left a.top::before {
  top: 0;
  }

 

O'ng tarafdan paydo bo'lish ham huddi shunday algoritmda bo'ladi, ammo kodda left ning o'rniga right ishlatiladi.

.right a::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #000;
  transition: 0.2s;
}
.right a:hover:before {
  width: 100%;
}

 

Markazdan paydo bo'lish esa bir o'zgarish bilan farq qiladi. Transform xossasi qo'shiladi. Ya'ni .center a::before uchun transform: scaleX(0);  yoziladi. Bu xossa X o'qi bo'yicha chiziq uzinligini berkitib turadi. Qachonki kursor huduga olib kirilsa, transform: scaleX(1);  xossasi ishlaydi va chiziq sekin paydo bo'ladi.

.center a::before {
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: 0.2s;
  transform: scaleX(0);
}
.center a:hover:before {
  transform: scaleX(1);
}

 

Endi esa natijani ko'ramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!