Демо тут
Думаю многие из вас, знакомы с градиентами в CSS3 и могут использовать их для прорисовки угловых или радиальных градиентов. Но, не все знают, что с их помощью можно создавать и другие, часто используемые дизайнерские решения. Например, клетчатые узоры или полосы.
Основная идея метода заключается в следующем (CSS3 Images spec) — если несколько градиентов имеют одинаковые позиции происходит резкий переход цвета. Например, градиент для горизонтальных полос будет таким:
background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
Почему мы используем « transparent», а не фактический цвет? Для гибкости. А «background-color» служит для нескольких целей: он устанавливает цвет для полосы и служит основным цветом в браузерах, не поддерживающих свойства градиент. Для контроля размера можно использовать «background-size»:
-webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px;
Для создания градиента в стиле «пикник», можно просто наложить горизонтальные полосы на вертикальные:
background-color: white; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))); background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
Самое трудное было нарисовать шахматную доску. Мне до сих пор не удалось найти способ как нарисовать правильную шахматную доску, не под углом 45°, без дополнительных градиентов. Но это будет довольно просто сделать, когда введут поддержку угловых градиентов (сейчас их нет даже в спецификации):
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
Если вы знаете другие интересные решения, созданные с помощью CSS3 без использования картинок, напишите о них в комментариях. Спасибо.
