Blogingiz yoki veb-saytingiz uchun 29 ta CSS sarlavhalari va altbilgileri

CSS altbilgisi

Sarlavhalar va altbilgilar Yangi sahifa yaratishda muhim elementlar veb yoki blog, yoki boshqa hech narsa bo'lmasa, ularni veb-dizaynning amaldagi standartlariga javob berish uchun yangilashimiz kerak. Ular bizning veb-saytimizga tashrif buyuruvchilar odatda katta e'tibor beradigan joylardir, shuning uchun biz ularga g'amxo'rlik qilishimiz va funktsional bo'lishdan tashqari, ular ko'zni quvontiradigan darajada etarlicha erkalashimiz kerak.

Shuning uchun biz baham ko'rmoqchimiz Blogingizda yoki veb-saytingizda foydalanishingiz mumkin bo'lgan 29 CSS sarlavhalari va altbilgileriva shu tariqa siz izlayotgan sifatning ushbu nuqtasini bering. Ushbu ro'yxat to'liq ekranli maqola sarlavhalaridan, shuningdek veb-saytingizga yana bir nuqtai nazar berish uchun standart o'lchamlardan, belgilangan yoki belgilangan sarlavhalardan, altbilgilardan va ba'zi video sarlavhalardan iborat.

Egri sarlavha

Egri sarlavha

Tomonidan aniqlangan sarlavha uning pastki qismida egri uslubi bu veb-sayt yoki blog uchun juda maxsus sarlavha qiladi. Bu sof CSS, shuning uchun veb-sahifangizda o'zingizni blogingizga qo'shsangiz qanday ko'rinishini sinab ko'rish uchun vaqt talab etiladi.

Sarlavha tasviri Parallax

parallaks

Parallax tasvir effektiga ega ushbu sarlavha o'zini o'zi bilan belgilaydi CSS fon-rasm holatidan foydalaning. Sarlavha tasviri katta effekt kodi uchun sahifaning yuqori qismida joylashgan bo'ladi.

Burchakli sobit sarlavha

Burchakli boshcha

Ushbu sarlavha veb-sahifaning yuqori qismida yaxshi o'rnatilgan diagonal chiziq bilan farqlang foydalanuvchi ko'rinishining butun gorizontalini kesib o'tadi. CSS psevdo-elementlari yordamida fon rasmi bilan sobit sarlavha yaratish uchun qanday foydalanish mumkinligi ko'rsatilgan.

Saralangan sarlavha

To'g'ri

Ushbu sarlavha uchun CSS va HTML berilgan misolda tavsiflangan bu diagonali chiziq bo'ylab butun ekranni bir tomondan ikkinchi tomonga kesib o'tadigan.

SVG animatsiyasi bilan sarlavha

Egri svg

Juda oddiy sarlavha, garchi u ishlatsa ham o'zingizni ajratib ko'rsatish uchun SVG animatsiyasi biz ushbu ro'yxatdagi narsalardan. Siz veb-sahifalarning katta ro'yxatiga kirishingiz mumkin bu yerdan SVG animatsiyalari bilan.

Div bilan sarlavha o'rnatildi

Div aniqlandi

Parallax tasvir effekti bilan, ajoyib effekt bilan ajralib turadigan sobit sarlavha sichqoncha bilan aylanayotganda qolganlar aylanayotganda sobit fon tasviri bilan erishildi.

Parallaks ko'p qatlamli illyustratsiyasi

Ko'p qatlam

Ajoyib tugatish boshi Ko'p qatlamli HTML, CSS va JavaScript va bu video o'yinlar dunyosi bilan bog'liq veb-sayt uchun juda yaxshi ishlatilishi mumkin. Butunlay ajoyib tugatish.

Ruxsat etilgan post sarlavhasi

Ruxsat etilgan post

HTML, CSS va JavaScript-da qilingan har bir xabar uchun belgilangan sarlavha. Biz pastga tushgan payt, sarlavha minimallashtiriladi va tepada o'rnatildi.

Animatsiya bilan to'liq ekran sarlavhasi

Animatsiya qilingan to'lqinlar

Animatsiya taqdim etadigan sarlavha yon tomonga siljiydi va bu tomoshabinga tasalli beruvchi ta'sir ko'rsatadi.

To'liq ekran qahramoni tasviri

Qahramon obrazi

con kattalashtirish effekti, bu sarlavha to'liq ekran u buyuk o'ziga xoslik sifatida namoyon bo'ladi. Ushbu veb-sayt uchun juda mos keladi, unda mehmon uni aylantirish uchun aylantirishdan juda yaxshi foydalanadi.

Flexbox tugmasi bilan 

Flexbox tugmasi bilan

Tugmani ko'rsatish uchun ekranning butun kengligini oladigan sarlavha. Sahifalarni ochish uchun juda yaxshi CSS flexbox bilan.

Flexbox qahramon sarlavhasi

Flexbox qahramoni

Effektli sarlavha parallaks va flexbox juda sodda asosan uning dizayni nafisligi bilan ajralib turadi.

Yopishtiruvchi boshcha aylanmoqda

Yopishqoq boshcha

Nomidan ko'rinib turibdiki, qachonki belgilangan sarlavha harakatlanayotganda sichqoncha bilan siljiymiz veb-sahifaning qolgan qismini ko'rish uchun.

Javob berkitib o'tish

Javobli aylantirish

Menyu sahifaning yuqori qismiga etib borganida, yana bir ajoyib effektli sarlavha, nima uchunva o'sha paytda u barqaror bo'lib qoladi va biz saytni aylantirishni davom ettira olamiz.

Sarlavhani aylantiring

Sarlavha sarlavhasi

Bu boshqalardan farq qiladi to'g'ri va nozik animatsiya biz harakatlanayotganda. Uning oxirida, eshitish vositasi yuqori qismida joylashgan bo'lib qoladi.

Javob beruvchi aylantirish sarlavhasi

Javob beruvchi aylantirish sarlavhasi

Uchun yana bir ajoyib animatsiya ushbu sarlavhani boshqalardan ajratib oling HTML, CSS va JavaScript bilan.

Sarlavha kirish / chiqish

sarlavhani jonlantirish

Effekt bilan ajralib turadigan sarlavha O'tkazgandan keyin kirish / chiqish va bu qayta tiklanish hissi tug'diradi.

Sarlavha yo'qoldi

Sarlavha yo'qoldi

Boshqa animatsiya effekti qiziquvchan va juda oqlangan HTML, CSS va JavaScript-da.

Yashirilgan sarlavha

Avtomatik yashirish

Shunga ko'ra yashirganda boshqa sarlavha biz animatsiyani aylantirishni ishlatamiz bu e'tiborga olinmaydi, lekin juda sifatli.

Parallaks tagligi

Parallaks tagligi

HTML, CSS va JavaScript-ga ega sobit yoki sobit altbilgi. Of soya bilan ajoyib sifat tasirida.

Tarkib ko'lami bilan altbilgi

Altbilgi shkalasi

Uchun yuqori sifatli va o'ziga xos altbilgi mehmonni hayratda qoldiring ushbu veb-maydonni namoyish etishning oqilona usuli uchun.

Ijtimoiy media altbilgisi

ijtimoiy media

Ajratib turadigan altbilgi ijtimoiy tarmoqlarga yo'naltiradigan tugmalar eng taniqli. Sichqoncha ko'rsatgichini har bir ijtimoiy tarmoq ustiga qo'yishda ishlab chiqarilgan animatsiya ajralib turadi.

Animatsiyalangan mobil altbilgi menyusi

Animatsiya qilingan altbilgi mobil

Ushbu altbilgini ko'rish uchun veb-brauzer oynasini qisqartirish orqali siz buni qila olasiz 2-3 qismni toping foydalanuvchi mobil qurilmada topishi mumkin. U 767 pikselda ko'rsatiladi.

Simple Fixed Footer

Oddiy Ruxsat etilgan

HTML va CSS-da ishlab chiqarilgan juda shov-shuvsiz va shov-shuvsiz oddiy altbilgi.

Video sarlavhasini reaksiya qiling

Video sarlavhasini reaksiya qiling

Sarlavha bilan oddiy video React.js.

Video sarlavhasi

Video sarlavhasi

Boshqa oddiy video bilan sarlavha va juda sifatli.

Mix-Blend bilan to'liq ekranli video sarlavhasi

To'liq ekran

A-ni ko'rsatish to'liq ekranli video mix-blend rejimidan foydalangan holda qatlamdagi matn bilan.

Video sarlavhasi animatsiyasi

Video sarlavhasi animatsiyasi

Animatsiya edi Adobe After Effects bilan moslashtirilgan barcha brauzerlarga mos kelish uchun. U mobil telefonda ishlamaydi.

Gradient bilan javob beradigan video sarlavhasi

javob

El gradient - bu ajralib turadigan narsa qolgan qismdan ushbu video sarlavhasiga.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

2 ta sharh, o'zingizni qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   TecnOku dijo

    Ularning barchasi meni ishontirdi. Rahmat

    1.    Manuel Ramires dijo

      Salomat bo'ling!