Assalomu alaykum, do'stlar, bizning blogimizga xush kelibsiz, bugungi blogimizda HTML va CSS-da qo'shimcha Matn fonida videoni qanday yaratishni ko'rib chiqamiz.

Ko'pincha biz videoning ustki qismiga sarlavha beramiz va video fonda o'ynaladi va videoda matn paydo bo'ladi, shuning uchun biz HTML va CSS yordamida ushbu matnni video orqali yaratamiz.

Shunday qilib, keling, matnli video loyihamizni manba kodlarini qo'shish orqali boshlaylik. Buning uchun birinchi navbatda Html kodidan foydalanamiz.

Video ustidagi matn uchun HTML KODI

<video playsinline autoplay muted loop>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  	<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<header>
  <nav>
    
    <a href="#">Shop</a>
    <a href="#">Stores</a>
    <a href="#">Products</a>
  </nav>  
</header>
<div class="overlay">
  <h2>Meet the crazy-smart women we asked.</h2>
</div>

Endi ushbu kodda biz video yorlig'i va uning atributlaridan foydalangan holda videoni fon sifatida qo'shmoqdamiz, keyin biz sarlavha va nav yorlig'ini ochamiz va ularning ichida biz navigatsiya sifatida ishlatiladigan langar yorlig'i yordamida ma'lum havolalarni qo'shamiz. havolalar.

Shundan so'ng, biz navbat va sarlavha tegini yopamiz va keyin div sinfidagi h2 yordamida matnning asosiy qismini qo'shamiz.

Endi biz berilgan CSS kodidan foydalanib, uni video fonida joylashtirish uchun matn tayyorlayapmiz.

Video ustidagi matn uchun CSS KODI

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}
header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Buni oson tushunish uchun ushbu kodni bosqichma-bosqich tushuntirib bering. Shunday ekan, boshlaylik.

1-QADAM:Birinchi bosqichda biz import xususiyatidan foydalanib shriftlarni import qilamiz, so'ngra zamonaviy shriftlar, to'g'ri tekislash va jozibali fon yaratish uchun fon, chet va shriftlar oilasini qo'shamiz.

Keyinchalik, tekislash uchun biz shunchaki kenglik, balandlik, tepa va chapni qo'shamiz, so'ngra mutlaq qiymat uchun pozitsiyani aniqlaymiz, biz video foydalanuvchini interaktiv va qo'llab-quvvatlovchi ob'ekt xususiyatlarini qo'shamiz.

Yuqoridagi tushuntirish uchun kod.

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}
body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

2-QADAM:Ikkinchi bosqichda biz matnni markazga moslashtiramiz va shaffof fon qo'shamiz va matn rangini qo'shamiz, bu esa video fonidan qoplangan so'zni ajratib ko'rsatish imkonini beradi. Veb-to'plam kabi ba'zi qadriyatlar, uni markazga moslashtirish va fon bilan tuzatish uchun asosli kontent.

Endi biz fon, shrift rangi, vazn, chekka va aralashtirish rejimini qo'shish orqali so'zning ustiga qo'yish uchun uslubni yaratishni boshladik, shunda matn qoplamasi amalga oshiriladi. Bizning talablarimizga muvofiq qiymatni qo'shing.

.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}

3-QADAM:Ushbu oxirgi bosqichda biz fon qo‘shish va ularni markazga tekislash, so‘ngra o‘lchamlar bilan jozibali shrift ranglarini yaratish orqali navigatsiya panelini shakllantiramiz. Tushuntirish uchun kod o'chirilgan.

header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}

Endi biz loyiha uchun manba kodini muvaffaqiyatli qo'shdik. Shunday qilib, biz endi loyihani berilgan Chiqish bo'limida ko'rishimiz mumkin.

Endi biz HTML va CSS yordamida Matnli videoni muvaffaqiyatli yaratdik. Siz ushbu loyihadan o'zingizning shaxsiy ehtiyojlaringiz uchun foydalanishingiz mumkin va tegishli kod satrlari quyida ko'rsatilgan kod qalam havolasi bilan berilgan.

Agar siz ushbu blogni foydali deb bilsangiz, google-da Manba kodlari bilan Front End Projects uchun tasodifiy kodni qidirib ko'ring va Tasodifiy Instagram sahifasi bilan kodni kuzatib boring.

REFER CODE —Kod uzatish

YOZGAN —Ragunathan S

Video kodlashda ushbu matnni qoplash uchun qaysi kod muharriridan foydalanasiz?

Men shaxsan VS Code Studio-dan foydalanishni tavsiya qilaman, bu oddiy va ishlatish uchun qulay.

Bu loyiha javob beradimi yoki yo'qmi?

HA! bu sezgir loyiha

Ushbu loyihani yaratish uchun har qanday tashqi havolalardan foydalanasizmi?

No!