29 CSS горни и долни колонтитули за вашия блог или уебсайт

Долен колонтитул на CSS

Горните и долните колонтитули са Основни елементи при създаването на нова страница уеб или блог, или ако не друго, трябва да ги актуализираме, за да отговарят на настоящите стандарти за уеб дизайн. Това са пространства, на които посетителят на нашия уебсайт обикновено обръща голямо внимание, така че трябва да се грижим за тях и да ги глезим достатъчно, така че да са приятни за окото, освен че са функционални.

Ето защо ще споделим 29 CSS горни и долни колонтитули, които можете да използвате във вашия блог или уебсайт, и по този начин му придадете онази качествена точка, която сте търсили. Този списък се състои от заглавки на статии на цял екран, както и от стандартния размер, фиксирани или фиксирани заглавки, долни колонтитули и някои видео заглавки, за да даде друга гледна точка на вашия уебсайт.

Извит хедър

Извит хедър

Заглавка, която се идентифицира с извитият му стил в долната част което го прави много специален хедър за уебсайт или блог. Това е чист CSS, така че вече отнема време, за да тествате вашата уеб постановка, както ще изглежда, ако го включите в своя блог.

Заглавно изображение Паралакс

Parallax

С чудесен ефект на изображение Parallax, този хедър се идентифицира с използвайте CSS позиция на фоново изображение. Заглавното изображение ще бъде позиционирано в горната част на страницата за чудесен код за ефект.

Хедърът е фиксиран под ъгъл

Ъглова заглавка

Този заглавие е добре фиксиран в горната част на уеб страницата към диференцирайте с тази диагонална линия който пресича цялата хоризонтала на изгледа на потребителя. Той показва как CSS псевдоелементите могат да бъдат използвани за създаване на фиксирана заглавка с фоново изображение.

Наклонен хедър

Наклонен

CSS и HTML за този хедър, който в дадения пример е характеризиран по тази диагонална линия който пресича целия екран от едната страна до другата.

Хедър с SVG анимация

Извит svg

Много проста заглавка, въпреки че използва SVG анимация, за да се разграничите от които имаме в този списък. Можете да получите достъп до голям списък от уеб страници с SVG анимации от тук.

Фиксирана заглавка с Div

Div фиксиран

С ефект на изображение Parallax, фиксиран хедър, който се откроява със страхотния ефект постигнато с фиксираното фоново изображение, докато останалото се превърта, докато превъртаме с мишката.

Паралакс многослойна илюстрация

Многослойна

Глава със страхотен завършек в Многопластови HTML, CSS и JavaScript и това може да се използва перфектно за уебсайт, свързан със света на видеоигрите. Страхотен завършек през цялото време.

Фиксирана заглавка на публикацията

Фиксиран пост

Фиксирана заглавка за всяка публикация, направена в HTML, CSS и JavaScript. В момента, в който се търкаляме надолу, заглавката е сведена до минимум и фиксиран в горната част.

Заглавна част на цял екран с анимация

Анимирани вълни

Заглавка, която предлага анимация, която се движи странично и това създава релаксиращ ефект върху зрителя.

Изображение на герой на цял екран

Изображение на герой

с ефект на мащабиранеТова заглавие на цял екран разкрива се като една с голяма оригиналност. Перфектен за уебсайт, в който посетителят ще използва чудесно превъртането, за да се движи около него.

Flexbox с бутон 

Flexbox с бутон

Заглавка, която отнема цялата ширина на екрана, за да покаже бутон. Перфектен за целеви страници с CSS flexbox.

Flexbox Hero Header

Flexbox герой

Хедър с ефект паралакс и флексбокс съвсем прости което се откроява с елегантността на своя дизайн.

Залепваща заглавка при превъртане

Лепкаво заглавие

Както подсказва името му, фиксирана заглавка когато превъртаме с мишката при движение за да видите останалата част от уеб страницата.

Отзивчиво превъртане лепкаво

Отзивчиво превъртане

Друга фиксирана заглавка с голям ефект, когато менюто достигне върха на страницата, защои в този момент тя остава фиксирана и можем да продължим да превъртаме сайта.

Превъртете заглавката

Превъртете заглавката

Различава се от останалите по правилна и деликатна анимация докато се движим. В края му таблата остава закрепена отгоре.

Отзивчиво заглавие на превъртане

Отзивчиво заглавие на превъртане

Още една страхотна анимация за разграничете този хедър от останалите с HTML, CSS и JavaScript.

Header In / out

анимиране на заглавката

Заглавна част, която се отличава с ефекта Влизане / излизане след превъртане и това създава усещането за отскок.

Заглавното избледняване

Заглавното избледняване

Още един анимационен ефект любопитен и много елегантен в HTML, CSS и JavaScript.

Заглавка, която е скрита

Автоматично скриване

Различен хедър при скриване според използваме превъртане с анимация това остава незабелязано, но със страхотно качество.

Долен колонтитул на паралакс

Долен колонтитул на паралакс

Фиксиран или фиксиран долен колонтитул с HTML, CSS и JavaScript. От страхотно качество със засенчване в сила.

Долен колонтитул със скала на съдържанието

Долен колонтитул

Висококачествен и оригинален долен колонтитул за смайват посетителя за изящния начин за показване на това уеб пространство.

Долен колонтитул на социалните медии

социални медии

Долен колонтитул, който се откроява бутоните, които насочват към социалните мрежи Най-известен. Изпъква анимацията, създадена при оставяне на показалеца на мишката върху всяка от социалните мрежи.

Анимирано меню за долен колонтитул

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

Като намалите прозореца на уеб браузъра, за да видите този долен колонтитул, ще можете намерете 2-3 секции които потребителят може да намери на мобилно устройство. Показва се на 767px.

Прост фиксиран долен колонтитул

Просто Фиксирано

Направено в HTML и CSS е прост долен колонтитул без много шум и излишни украшения.

React Video Header

React Video Header

Заглавна част с просто видео React.js.

Видео заглавка

Видео заглавка

Друг заглавка с просто видео и с отлично качество.

Цял екран видео заглавка с Mix-Blend

Fullscreen

Покажи a видео на цял екран с текст върху слой, използвайки режим на смесване.

Анимация на видео заглавката

Анимация на видео заглавката

Анимацията беше персонализирани с Adobe After Effects за да бъде съвместим с всички браузъри. Не работи на мобилни устройства.

Адаптивна видео заглавка с градиент

Отзивчив

El градиентът е това, което се откроява към тази заглавка на видео от останалите.


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

2 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   TecnOku каза той

    Всички те ме убедиха. Благодаря ти

    1.    Мануел Рамирес каза той

      Моля!