Фотавыя малюнкі на целе зроблена лёгка

HTML

Прыемнай асаблівасцю, якую вы знойдзеце на многіх сайтах, з'яўляецца тое, што цэнтральная вобласць змесціва, як уяўляецца, накладвае старонку на цень. На самай справе гэта даволі просты спосаб зрабіць ваш блог прыгожым (альбо іншым сайтам) адным фонавым малюнкам.

Як гэта робіцца?

  1. Высветліце, наколькі шырокі ваш змест. Прыклад: 750 пікс.
  2. Стварыце малюнак у дадатку для ілюстрацый (я выкарыстоўваю Illustrator) шырэй, чым вобласць змесціва. Прыклад: 800 пікс.
  3. Усталюйце фон малюнка на фон, які вы хочаце мець з кожнага боку блога.
  4. Дадайце белы рэгіён на фоне.
  5. Вырабіце цень на белую вобласць, якая выдаляецца з абодвух бакоў вобласці.
  6. Усталюйце шырыню вобласці абрэзкі на 1 піксель у вышыню. Гэта зробіць малюнак загрузным прыемным і кампактным для хуткага адлюстравання.
  7. Вывесці малюнак.

Вось як я сканструяваў яго з дапамогай Illustrator (звярніце ўвагу, што ў мяне вобласць абрэзкі значна вышэй ... гэта проста для таго, каб вы маглі бачыць, што я раблю):
Фон з ілюстратарам

Вось прыклад таго, як выгляд будзе выглядаць з фонавым малюнкам:
Прыклад фонавага малюнка

Вось як прымяніць малюнак, выкарыстоўваючы тэг стылю цела ў вашым CSS файл.

фон: # B2B2B2 url ('images / bg.gif') паўтор-y цэнтр;

Вось разбор тэга стылю фону:

  • # B2B2B2 - задае агульны колер фону старонкі. У гэтым прыкладзе шэры колер адпавядае шэраму на фонавым малюнку.
  • url ('images / bg.gif') - усталёўвае фонавы малюнак, які вы хацелі б выкарыстаць.
  • repeat-y - усталёўвае малюнак для паўтарэння па восі y. Такім чынам, фонавы малюнак будзе паўтарацца зверху ўніз старонкі.
  • цэнтр - усталёўвае малюнак у цэнтры старонкі.

Прыемна і проста ... адзін малюнак, адзін стыль!

2 Каментары

  1. 1
  2. 2

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.