Төмөнкү жана төмөнкү колонтитулдар Жаңы баракты түзүүдө маанилүү элементтер веб же блог, же башка эч нерсе жок болсо, аларды веб-дизайндын учурдагы стандарттарына ылайыкташтырып жаңыртышыбыз керек. Алар биздин веб-сайтка кирген адамдар адатта чоң көңүл бурган жайлар, ошондуктан биз аларга кам көрүп, иштешибизден тышкары, көзгө жагымдуу болуш үчүн, аларды эркелетишибиз керек.
Ошондуктан биз бөлүшөбүз деп жатабыз Блогуңузда же веб-сайтыңызда колдоно турган 29 CSS баш жана төмөнкү колонтитулдар, жана ошону менен сиз издеген сапаттын ошол чекитин бериңиз. Бул тизме толук экрандуу макала баштарынан, ошондой эле стандарттуу көлөмдөн, туруктуу же туруктуу баштардан, колонтитулдардан жана айрым видео баштардан турат, бул сиздин веб-сайтыңызга дагы бир көз караш берет.
көрсөткүч
- 1 Ийилген баш
- 2 Parallax сүрөтүнүн аталышы
- 3 Бурчтуу туруктуу баш
- 4 Туура баш
- 5 SVG анимациясы бар баш
- 6 Div менен бекитилген баш
- 7 Parallax көп катмарлуу иллюстрациясы
- 8 Бекитилген посттун аталышы
- 9 Анимация менен толук экрандын баш аты
- 10 Толук экран Баатырдын сүрөтү
- 11 Баскычы бар Flexbox
- 12 Flexbox Hero Header
- 13 Түрмөктөгү жабышчаак баш
- 14 Жооптуу сыдыруу жабышчаак
- 15 Жылдыруу аталышы
- 16 Жооптуу жылдыруу башы
- 17 Header In / out
- 18 Аталышы өчүп калды
- 19 Жашырылган баш ат
- 20 Parallax колонтитулу
- 21 Мазмун масштабындагы колонтитул
- 22 Коомдук Медиа Колонтитулу
- 23 Анимацияланган мобилдик колонтитул менюсу
- 24 Simple Fixed Footer
- 25 Видеонун аталышын реакциялоо
- 26 Video Header
- 27 Mix-Blend менен толук экрандын видео башы
- 28 Video Header анимациясы
- 29 Градиент менен жооп берген видео баш
Ийилген баш
Тарабынан аныкталган баш анын ылдый жагындагы ийилген стили бул аны веб-сайт же блог үчүн өзгөчө бир баш сөз кылат. Бул таза 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
Эффекти бар баш параллакс жана флексбокс жөнөкөй негизинен анын жасалгалуулугу менен айырмаланат.
Түрмөктөгү жабышчаак баш
Анын аты айтып тургандай, качан баш аталышы жылганда чычкан менен жылдырабыз калган веб-баракчаны көрүү үчүн.
Жооптуу сыдыруу жабышчаак
Меню беттин жогору жагына жеткенде, дагы бир чоң эффективдүү баш аталышы эмне үчүнжана ошол учурда ал туруктуу бойдон калууда жана биз сайтты жылдырууну уланта алабыз.
Жылдыруу аталышы
Ал башкалардан айырмаланып турат туура жана назик анимация биз кыймылдап жатканда. Анын аягында, баштын үстү жагында туруктуу бойдон калат.
Жооптуу жылдыруу башы
Үчүн дагы бир сонун анимация бул башты башкалардан айырмалоо HTML, CSS жана JavaScript менен.
Header In / out
Эффект менен айырмаланган баш Жылдырылгандан кийин кирүү / чыгуу жана бул кайра жаралуу сезимин пайда кылат.
Аталышы өчүп калды
Дагы бир анимациялык эффект кызыктуу жана абдан жарашыктуу HTML, CSS жана JavaScript тилдеринде.
Жашырылган баш ат
Ага ылайык жашырганда башка аталыш анимация менен жылдырууну колдонобуз бул байкалбай калат, бирок абдан сапаттуу.
HTML, CSS жана JavaScript менен туруктуу же туруктуу колонтитул. Of көлөкө менен улуу сапат иш жүзүндө.
Үчүн жогорку сапаттагы жана оригиналдуу колонтитул келген адамды таң калтыруу бул веб мейкиндигин көркөм жол менен көрсөтүү үчүн.
Үчүн баса турган колонтитул социалдык тармактарга алып баруучу баскычтар мыкты белгилүү. Чычкан көрсөткүчүн ар бир социалдык тармакка калтырганда пайда болгон анимация өзгөчө орунду ээлейт.
Бул колонтитулду көрүү үчүн веб браузер терезесин кыскартып, сиз жасай аласыз 2-3 бөлүмдү тап колдонуучу мобилдик түзмөктөн таба алган. Ал 767 пиксель боюнча көрсөтүлгөн.
HTML жана CSSте жасалган бул а жөнөкөй колонтитул, анча-мынча ызы-чуусуз жана гүлдөп өсөт.
Видеонун аталышын реакциялоо
Менен баш жөнөкөй видео React.js.
Video Header
башка жөнөкөй видео менен баш жана абдан сапаттуу.
Mix-Blend менен толук экрандын видео башы
Көрсөтүү a толук экрандагы видео аралаштыруу режимин колдонуп катмардагы текст менен.
Video Header анимациясы
Анимация болгон Adobe After Effects менен настройкаланган бардык браузерлерге шайкеш келет. Ал мобилдик телефондо иштебейт.
Градиент менен жооп берген видео баш
El градиент деген эмне калгандарынан ушул видеонун башына.
2 комментарий, өзүңүздүкүн калтырыңыз
Алардын бардыгы мени ишендиришти. Рахмат
Эч нерсе эмес!