Блогуңуз же вебсайтыңыз үчүн 29 CSS баш жана төмөнкү колонтитулдар

CSS колонтитулу

Төмөнкү жана төмөнкү колонтитулдар Жаңы баракты түзүүдө маанилүү элементтер веб же блог, же башка эч нерсе жок болсо, аларды веб-дизайндын учурдагы стандарттарына ылайыкташтырып жаңыртышыбыз керек. Алар биздин веб-сайтка кирген адамдар адатта чоң көңүл бурган жайлар, ошондуктан биз аларга кам көрүп, иштешибизден тышкары, көзгө жагымдуу болуш үчүн, аларды эркелетишибиз керек.

Ошондуктан биз бөлүшөбүз деп жатабыз Блогуңузда же веб-сайтыңызда колдоно турган 29 CSS баш жана төмөнкү колонтитулдар, жана ошону менен сиз издеген сапаттын ошол чекитин бериңиз. Бул тизме толук экрандуу макала баштарынан, ошондой эле стандарттуу көлөмдөн, туруктуу же туруктуу баштардан, колонтитулдардан жана айрым видео баштардан турат, бул сиздин веб-сайтыңызга дагы бир көз караш берет.

Ийилген баш

Ийилген баш

Тарабынан аныкталган баш анын ылдый жагындагы ийилген стили бул аны веб-сайт же блог үчүн өзгөчө бир баш сөз кылат. Бул таза CSS, андыктан веб-сахналаштырууну текшерүү үчүн убакыт талап кылынат, анткени аны блогуңузга кошуп койсоңуз болот.

Parallax сүрөтүнүн аталышы

Parallax

Parallax сүрөтүнүн эффектиси менен, бул аталыш өзүн-өзү аныктайт CSS фон-сүрөт абалын колдонуу. Эффект коду үчүн баш сүрөтү барактын жогору жагына жайгаштырылат.

Бурчтуу туруктуу баш

Бурчтуу баш

Бул баш веб-баракчанын жогору жагында жакшы орнотулган ошол диагоналдык сызык менен айырмалоо колдонуучунун көз-карашынын туурасынан өтүп турат. Бул CSS псевдоэлементтерин фондук сүрөтү бар туруктуу башты түзүүдө кантип колдонсо болорун көрсөтөт.

Туура баш

Кыйшык

Берилген мисалда келтирилген ушул баш аталыш үчүн CSS жана HTML ошол диагональ сызыгы боюнча бүт экранды экинчи жагынан кесүүчү.

SVG анимациясы бар баш

Curved svg

Ал колдонсо да, абдан жөнөкөй баш өзүн айырмалоо үчүн SVG анимациясы бул тизмеде биз бар. Веб-баракчалардын чоң тизмесин көрө аласыз бул жерден SVG анимациялары менен.

Div менен бекитилген баш

Div белгиленди

Parallax сүрөт эффектиси менен, чоң эффект менен айырмаланган туруктуу баш чычкан менен жылдырганда, калгандары жылып жатканда, туруктуу фондук сүрөт менен жетишти.

Parallax көп катмарлуу иллюстрациясы

Көп катмар

Сонун аяктоо баш Көп катмарлуу HTML, CSS жана JavaScript жана аны видео оюндар дүйнөсүнө байланыштуу веб-сайт үчүн мыкты колдонсо болот. Бою сонун бүтүрүү.

Бекитилген посттун аталышы

Бекитилген пост

HTML, CSS жана JavaScript тилдеринде жасалган ар бир билдирүү үчүн туруктуу баш. Биз кулап жаткан учур, баш минималдаштырылат жана жогору жагында бекитилген.

Анимация менен толук экрандын баш аты

Анимацияланган толкундар

Ошол анимацияны берген баш жанынан жылат жана бул көрүүчүнү эс алдыруучу таасир берет.

Толук экран Баатырдын сүрөтү

Баатырдын образы

менен чоңойтуу эффектисибул толук экран ал улуу оригиналдуулуктун бири катары ачылат. Конок айланып өтүү үчүн жылдырууну көп колдоно турган веб-сайт үчүн идеалдуу.

Баскычы бар Flexbox 

Баскычы бар Flexbox

Баскычты көрсөтүү үчүн экрандын бүткүл туурасын талап кылган баш. Баракчаларды ачуу үчүн кемчиликсиз CSS flexbox менен.

Flexbox Hero Header

Flexbox баатыры

Эффекти бар баш параллакс жана флексбокс жөнөкөй негизинен анын жасалгалуулугу менен айырмаланат.

Түрмөктөгү жабышчаак баш

Жабышкак баш

Анын аты айтып тургандай, качан баш аталышы жылганда чычкан менен жылдырабыз калган веб-баракчаны көрүү үчүн.

Responsive Scrolling Sticky

Ыкчам жылдыруу

Меню беттин жогору жагына жеткенде, дагы бир чоң эффективдүү баш аталышы эмне үчүнжана ошол учурда ал туруктуу бойдон калууда жана биз сайтты жылдырууну уланта алабыз.

Жылдыруу аталышы

Жылдыруу аталышы

Ал башкалардан айырмаланып турат туура жана назик анимация биз кыймылдап жатканда. Анын аягында, баштын үстү жагында туруктуу бойдон калат.

Жооптуу жылдыруу башы

Жооптуу жылдыруу баш

Үчүн дагы бир сонун анимация бул башты башкалардан айырмалоо HTML, CSS жана JavaScript менен.

Header In / out

жандуу баш

Эффект менен айырмаланган баш Жылдырылгандан кийин кирүү / чыгуу жана бул кайра жаралуу сезимин пайда кылат.

Аталышы өчүп калды

Аталышы өчүп калды

Дагы бир анимациялык эффект кызыктуу жана абдан жарашыктуу HTML, CSS жана JavaScript тилдеринде.

Жашырылган баш ат

Авто жашыруу

Ага ылайык жашырганда башка аталыш анимация менен жылдырууну колдонобуз бул байкалбай калат, бирок абдан сапаттуу.

Parallax колонтитулу

Parallax колонтитулу

HTML, CSS жана JavaScript менен туруктуу же туруктуу колонтитул. Of көлөкө менен улуу сапат иш жүзүндө.

Мазмун масштабындагы колонтитул

Төмөнкү колонканын масштабы

Үчүн жогорку сапаттагы жана оригиналдуу колонтитул келген адамды таң калтыруу бул веб мейкиндигин көркөм жол менен көрсөтүү үчүн.

Коомдук Медиа Колонтитулу

коомдук медиа

Үчүн баса турган колонтитул социалдык тармактарга алып баруучу баскычтар мыкты белгилүү. Чычкан көрсөткүчүн ар бир социалдык тармакка калтырганда пайда болгон анимация өзгөчө орунду ээлейт.

Анимацияланган мобилдик колонтитул менюсу

Animated footer mobile

Бул колонтитулду көрүү үчүн веб браузер терезесин кыскартып, сиз жасай аласыз 2-3 бөлүмдү тап колдонуучу мобилдик түзмөктөн таба алган. Ал 767 пиксель боюнча көрсөтүлгөн.

Simple Fixed Footer

Simple Fixed

HTML жана CSSте жасалган бул а жөнөкөй колонтитул, анча-мынча ызы-чуусуз жана гүлдөп өсөт.

Видеонун аталышын реакциялоо

Видеонун аталышын реакциялоо

Менен баш жөнөкөй видео React.js.

Video Header

Видеонун башы

башка жөнөкөй видео менен баш жана абдан сапаттуу.

Mix-Blend менен толук экрандын видео башы

Толук экран

Көрсөтүү a толук экрандагы видео аралаштыруу режимин колдонуп катмардагы текст менен.

Video Header анимациясы

Видео баш анимациясы

Анимация болгон Adobe After Effects менен настройкаланган бардык браузерлерге шайкеш келет. Ал мобилдик телефондо иштебейт.

Градиент менен жооп берген видео баш

сезгич

El градиент деген эмне калгандарынан ушул видеонун башына.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

2 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   TecnOku ал мындай деди:

    Алардын бардыгы мени ишендиришти. Рахмат

    1.    Manuel Ramirez ал мындай деди:

      Эч нерсе эмес!