- Boshqalar

HTML + CSS Yordamida «Uchburchak Clip» effekti

Assalom alaykum hozir sizlar bilan «O’zbekistondagi tarixiy joylar» misolida HTML va CSS yordamida oddiy ammo chiroyli «Uchburchak Clip Effekti»ni yaratishni o’rganamiz.

  • Birinchi navbatda bizga kerak bo’ladigan rasmlar uchun, web saytning asosiy papkasida «images» nomli papka yaratamiz va O’zbekiston tarixiy joylari fotosuratlarini ushbu papka ichiga joylaymiz.
  • «images» papkasi yoniga «index.html» faylini yaratamiz. Maqola juda uzun bo’lib ketmasligi uchun html va css fayllarimiz tarkibini, codlar ichida izohlar bn qoldiraman !

index.html fayli tarkibi:

<!-- odatiy html sahifa boshlanishi -->
<!DOCTYPE html>
<!-- sahifa tili -->
<html lang="en">
<!-- sahifa bosh qismi, faqat browserlar uchun malumotlar va korsatmalar saqlaydi -->
  <head>
    <!-- sahifa kodirovkasi -->
    <meta charset="UTF-8" />
    <!-- sahifa barcha qurulmalarda yaxshi joylashishi uchun browserga korsatma -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- sahifa nomi, odatda yuqorida ko'rinib turadi va qidiruv tizimlari uchun muhim -->
    <title>Historical Places in Uzbekistan.</title>
    <!-- css formatdagi stillar tablitsasini bog'lash uchun ko'rsatma -->
    <link rel="stylesheet" href="style.css">
  </head>
  <!-- sahifaning tana qismi -->
  <body>
    <!-- har bir seksiya uchun quti sifatida, "promo" class nomi bn div tegi, etibor 
      bering css faylni ortiqcha narsalar bn to'ldirmaslik uchun, rasm qoplamasi sifatida 
      ishlatiladigan rang shu yerda har bir rasm uchun alohida berilgan -->
    <div class="promo" style="--overlay-color: hotpink;">
      <!-- rasm uchun quti vazifasida, "image-wrapper" class nomi bn div tegi-->
      <div class="image-wrapper">
        <!-- rasm joylashtirish tegi -->
        <img src="images/atemurtash.jpg" alt="rasm1" />
      </div>
      <!-- rasm nomi va sichqoncha faqat rasm ustida joylashgan vaqtdagina ko'rinadigan
         va to'liq malumotga bo'limiga yetaklaydigan kichik yozuv -->
      <h2 class="title" data-cta="See in detail →">Amir Timur Square</h2>
    </div>



    <!-- istagancha rasmlar qo'shishimiz mumkin -->
    <div class="promo" style="--overlay-color: yellow;">
      <div class="image-wrapper">
        <img src="images/registan.jpg" alt="rasm2"/>
      </div>
      <h2 class="title" data-cta="See in detail →">Registan</h2>
    </div>
    <div class="promo" style="--overlay-color: dodgerblue;">
      <div class="image-wrapper">
        <img src="images/khiva.jpg" alt="rasm3"/>
      </div>
      <h2 class="title" data-cta="See in detail →">Khiva</h2>
    </div>
    <div class="promo" style="--overlay-color: darkgreen;">
      <div class="image-wrapper">
        <img src="images/fergana.jpg" alt="rasm4"/>
      </div>
      <h2 class="title" data-cta="See in detail →">Fergana</h2>
    </div>
  </body>
</html>
  • » index.html» fayli yoniga «style.css» faylini yaratamiz.

«style.css» fayli tarkibi:

/* google fonts serveridan "sura" nomli shriftni import qilamiz */

@import url("https://fonts.googleapis.com/css2?family=Sura:wght@400;700&display=swap");

/* kiyinchalik o'zgartirilishi mumkn bolgan css peremennilarni belgilab olamiz */

 :root {
    --size: 60vmin;
    --space: 8vmin;
    --duration: 300ms;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* barcha elementlar uchun border boxni belgilaymiz */

* {
    box-sizing: border-box;
}


/* body tegi uchun kerakli sozlamalarni biriktiramiz */

body {
    display: grid;
    place-items: center;
    grid-gap: var(--space);
    margin: 0 auto;
    padding: var(--space);
    font-family: "Sura", sans-serif;
    color: white;
    background-color: rgb(29, 30, 34);
}


/* promo classi bn nomlangan div tegi uchun joylashuv turi, cursor turi, balandlik
 va kenglikni yuqorida berilgan  peremenniylarga tenglashtirib belgilaymmiz */

.promo {
    position: relative;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
}


/* title class nomi bn yaratilga 2- darajali sarlavha tegi H2 uchun 
kerakli sozlamalarni biriktiramiz */

.title {
    --font-size: calc(var(--size) / 8);
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: var(--font-size);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform: translate(-10%, -50%);
    transition: transform var(--duration) var(--ease-out);
}


/* title class nomi bn yaratilga 2- darajali sarlavha tegi H2 activ holatda bolganda uchun 
kerakli sozlamalarni biriktiramiz va  ushbu element tarkibida keltirilgan "data-cta atrebutiga birikttirilgan 
yozuvnu korsatamiz*/

.title::after {
    content: attr(data-cta);
    display: inline-block;
    margin-left: 1.5vmin;
    font-size: calc(var(--font-size) / 3.25);
    font-weight: 400;
    letter-spacing: 0.125vmin;
    opacity: 0;
    transform: translateX(-25%);
    transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}


/* image-wrapper class nomi bn yaratilga va ichida suratni saqlagan 
div tegi uchun  kerakli sozlamalarni biriktiramiz */

.image-wrapper {
    width: var(--size);
    height: var(--size);
    overflow: hidden;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    transition: transform var(--duration) var(--ease-out), clip-path var(--duration) var(--ease-out);
}


/* surat uchun kerakli sozlamalarni biriktiramiz */

.image-wrapper img {
    position: relative;
    width: 120%;
    height: 100%;
    object-fit: cover;
    transform: translateX(-10%);
    transition: transform var(--duration) var(--ease-out);
}


/* image-wrapper class nomi bn yaratilgan va ichida suratni saqlagan 
div tegi activ bolganda kerakli sozlamalarni biriktiramiz */

.image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    mix-blend-mode: multiply;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity var(--duration) var(--ease-out);
}


/* promo class nmga ega teg sichqoncha bn koo'rilgan holatda 
surat uchun kerakli sozlamalarni biriktiramiz */

.promo:hover img {
    transform: translateX(0);
}


/* promo class nmga ega teg sichqoncha bn koo'rilgan holatda 
image-wrapper class nomi bn yaratilgan 
div tegi uchun kerakli sozlamalarni biriktiramiz  */

.promo:hover .image-wrapper {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    transform: translateX(25%);
    transition-timing-function: var(--bounce-out);
}

.promo:hover .image-wrapper::after {
    opacity: 1;
}


/* promo class nmga ega teg sichqoncha bn koo'rilgan holatda 
title class nomi bn yaratilgan 
div tegi uchun kerakli sozlamalarni biriktiramiz  */

.promo:hover .title {
    transform: translate(5%, -50%);
    transition-timing-function: var(--bounce-out);
}

.promo:hover .title::after {
    opacity: 1;
    transform: translateX(0);
    transition-timing-function: var(--bounce-out);
}

Mana amaliy ishimiz ham tayyor natijani ushbu sahifada k’rishingiz mumkin: https://infomir.uz/demos/1-clip-path/