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

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

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

Ийилген баш

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

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

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

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

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

Туура баш

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

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

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

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

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

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

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

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

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

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

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

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

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

Баскычы бар Flexbox 

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

Flexbox Hero Header

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

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

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

Responsive Scrolling Sticky

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

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

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

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

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

Header In / out

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

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

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

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

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

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

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

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

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

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

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

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

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

Simple Fixed Footer

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

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

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

Video Header

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

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

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

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

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

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

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