Добавете цвят или тапет към уебсайта [CSS]

7 декември 2013 г.

Можете да персонализирате фона на уебсайта си по един от следните начини:

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

CSS кодът за цвят е: body

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

CSS код за добавяне на фоново изображение: тяло

background: Задава всички свойства на фона в израз
background-color: Задава цвета на фона за CSS елемент
background-image Задава фоновото изображение за CSS елемент
background-position Задава началната позиция на тапет
background-repeat Задава как да се повтори тапет

1. Фон от квадратни изображения.

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

2. Фон от лентови изображения
Вторият проблем е с фоновите изображения, дефинирани като правоъгълници, с които бихте искали общото покритие на ширината на страницата, те се повтарят само вертикално. Проблемите, генерирани от тези фонови ленти, са не само по-трудни за избягване, но са дори по-чести. Колко широка трябва да бъде лентата? Колко голям е прозорецът на браузъра на посетителя. Ако прозорецът на браузъра е по-широк от фоновата лента, той ще се повтори не само вертикално, но и хоризонтално, което ще създаде впечатление за недовършено нещо, излишно разширено от дясната страна.

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

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

2WebDesign

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