Понедельник, 26 Ноября 2012 13:10

Background Gradient CSS. Часть 2

Written by 
Оцени эту запись
(1 Голос)

Данная статья является продолжением темы заливки фона градиентом, начатой в Background Gradient CSS

 

Во второй части мы рассмотрим заливку фона с применением background-size и радиальный градиент. Примеры кода будут приводиться для WebKit.

 

При помощи градиентной заливки -webkit-linear-gradient и background-size можно делать квадратики, треугольнички и полосочки на фоне.

 

Начнем с полосочек:

 

 

<div style="
   background-image: -webkit-linear-gradient(0deg, violet 50%, transparent 50%);
   background-size: 50px;
 "></div>
 
 
 
Для создания полосочек задаем градиентную заливку от нужного цвета до прозрачного (transparent) и каждому цвету 50% ширины (значение может меняться в зависимости от дизайна). Свойство background-size делает повтор нашей одинокой полосочки в каждых 50 пикселях.
 
 
Перейдем к квадратикам:
 
 
<div style="
   background-image: -webkit-linear-gradient(0deg, rgba(255, 0, 0, 0.7) 50%, transparent 50%),
    -webkit-linear-gradient(90deg, rgba(255, 0, 255, 0.7) 50%, transparent 50%);
   background-size: 50px;
"></div>
 
 
 
 
Здесь идея та же, только добавили еще одну заливку, переходящую от другого цвета к прозрачному и начинающуюся сверху.
 
 
Треугольники представлю в пробном варианте, просто чтобы акцентировать внимание на угле поворота градиента:
 
 
 
<div style="
   background-image: -webkit-linear-gradient(70deg, rgba(255, 0, 255, 0.7) 50%, transparent 50%);
   background-size: 50px;
"></div>
 
 
 
 
 
Рассмотрим теперь радиальный градиент:
 
 
<div style="
   background-image: -webkit-radial-gradient(center left, circle, violet 10%, blue 30%, green 90%);
"></div>
 
 
 
 
 
 
Здесь указывается центральная точка градиентной заливки (center left), тип градиента (circle), цвета перехода с размерами.
 
 
А теперь объединим градиентную заливку с background-size:
 
 
<div style="
   background-image: -webkit-radial-gradient(center center, circle, violet 30%, blue 90%);
   background-size: 20px 20px;
 "></div>
 
 
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов