Фонови текстури под формата на шахматна дъска и ивици, използващи CSS3 градиенти
Вероятно вече сте запознати с градиентите на CSS3 и също така знаете как да добавяте множество цветни спирания, да създавате ъглови или кръгли градиенти. Това, с което може да не сте запознати, е, че CSS3 градиентите могат да се използват за създаване на много различни видове често използвани обикновени фонови текстури, включително текстури на шахматна дъска, ивици и други.
Този пример се изобразява в браузъри Webkit, Firefox 3.6+, Opera 11.5+ и Internet Explorer 10+. Някои обикновени фонови текстури обаче може да не се показват в съвременните браузъри поради промяна в начина на писане на градиенти.
Основната идея зад този метод, взета от спецификацията на изображението CSS3, е следната:
„Ако множество цветни спирки са на едно и също място, те създават безкрайно малък преход от цветната спирка в началото на свойството до последната цветна спирка. В резултат на това цветът на това място се променя рязко и не преминава плавно от един цвят към друг.
Вероятно вече е очевидно как да създавате ивични плочки, освен ако никога преди не сте създавали фонова текстура с ивици, но няма да навлизаме в това подробно в този урок. Например градиентът на хоризонталните ивици е както следва:
Защо се използва стойност на прозрачност, а не определен цвят, който е необходим в конкретна ситуация? Това е за гъвкавост. Цветът на фона служи за две цели в тази ситуация: той задава цвета за половината от лентите и работи като заобиколно решение за браузъри, които не поддържат градиенти.
При такъв запис обаче една плочка ще заема целия блок. За да зададете размера на всяка плочка, можете да използвате размера на фона:
За да създадете обикновена карирана фонова текстура, трябвапросто застъпете хоризонталните ивици с вертикалните.
Най-трудната част е създаването на обикновена шахматна фонова текстура. Състои се от два 45-градусови линейни градиента и два -45-градусови линейни градиента, всеки от които съдържа една четвърт от тъмна клетка. Все още не сме измислили как да създадем обикновена фонова текстура на шахматна дъска, не под ъгъл от 45 градуса, без да използваме твърде много градиенти. Това би било много лесно да се направи, ако се поддържат конични градиенти, но засега те дори не са в спецификацията.
С CSS3 градиенти, без да използвате изображения, можете да създадете много повече различни обикновени текстури на фона, вижте тази галерия, за да се удивите на силата на CSS3.