logo

Градиент в качестве границы блоков

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.

Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Рассмотрим несколько вариантов задания цвета границ при помощи градиента.

Градиент границы сверху вниз

В качестве примера будем использовать обычный блок, заполнив его просто текстом.

Задаем размеры блока, верхнюю и нижнюю границы. Если задать border-radius граница закруглится только с внешней стороны.

Верхняя и нижняя границы задаются как обычно: border-top: 20px solid #2589AE ; и border-bottom: 20px solid #7DC0FF ;, создаем левую и правую границы. Для этого указываем начальные точки градиента — левую верхнюю и правую верхнюю background-position: 0 0, 100% 0 ;, и размер фонового изображения background-size: 20px 100% ;. Остается градиент — он самый обычный: цвет верхней границы переходит в цвет нижней сверху вниз.

Градиент сверху вниз

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis accusamus quos, fugiat consequuntur ipsum quam autem neque reprehenderit asperiores.

Eos iusto commodi pariatur inventore reprehenderit odit fugiat voluptates non a omnis repellendus ipsam ratione, libero illum quibusdam magnam rerum!

Numquam vitae atque alias sint commodi doloribus voluptates, rerum libero, repudiandae tempore suscipit autem iste tenetur cum vero iusto cumque.


.box {  
    width: 100%;
    height: 270px;
    border-top: 20px solid #2589AE;
    border-bottom: 20px solid #7DC0FF;
    border-radius: 20px;
    box-sizing: border-box;
      /* Создаем левую и правую границы */
    background-image:
      linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%),
      linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%);
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat;
    background-size: 20px 100%;
}

Градиент границы слева направо

В этом варианте в отличие от первого задаются левая и правая границы, а верхняя и нижняя «дорисовываются».

Градиент слева направо

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis accusamus quos, fugiat consequuntur ipsum quam autem neque reprehenderit asperiores.

Eos iusto commodi pariatur inventore reprehenderit odit fugiat voluptates non a omnis repellendus ipsam ratione, libero illum quibusdam magnam rerum!

Numquam vitae atque alias sint commodi doloribus voluptates, rerum libero, repudiandae tempore suscipit autem iste tenetur cum vero iusto cumque.


.box {  
   width: 100%;
   height: 270px;
   padding: 30px 15px;
   margin-bottom: 15px;
   border-left: 20px solid #2589AE; 
   border-right: 20px solid #7DC0FF;
   border-radius: 20px;
   box-sizing: border-box;
   background-image: 
      linear-gradient(to right, #2589AE 0%, #7DC0FF 100%),
      linear-gradient(to right, #2589AE 0%, #7DC0FF 100%);
   background-position: 0 0,  0 100%; 
   background-repeat: no-repeat; 
   background-size: 100% 20px;
}

Второй способ задания градиента

Этот способ основан на использовании CSS3 свойства border-image, с помощью которого код значительно упрощается. Правда еще не все браузеры его поддерживают в достаточной мере.

Это свойство работает только с прямоугольными границами, т.е свойство border-radius здесь не работает.

Принцип работы основан на том, что границе задаются как обычно размер и вид, но цвет прописывается ПРОЗРАЧНЫЙ, и «раскрашивается» при помощи border-image.

Свойство border-image-slice указывает внутренние смещения границы.

Градиент сверху вниз

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis accusamus quos, fugiat consequuntur ipsum quam autem neque reprehenderit asperiores.

Eos iusto commodi pariatur inventore reprehenderit odit fugiat voluptates non a omnis repellendus ipsam ratione, libero illum quibusdam magnam rerum!

Numquam vitae atque alias sint commodi doloribus voluptates, rerum libero, repudiandae tempore suscipit autem iste tenetur cum vero iusto cumque.


            /*  Градиент сверху вниз  */
.box {
   width: 100%;
   height: 270px; 
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to bottom, #2589AE 0%, #7DC0FF 100%);
   border-image-slice: 1;
   }

Градиент слева направо

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis accusamus quos, fugiat consequuntur ipsum quam autem neque reprehenderit asperiores.

Eos iusto commodi pariatur inventore reprehenderit odit fugiat voluptates non a omnis repellendus ipsam ratione, libero illum quibusdam magnam rerum!

Numquam vitae atque alias sint commodi doloribus voluptates, rerum libero, repudiandae tempore suscipit autem iste tenetur cum vero iusto cumque.


            /*  Градиент слева направо  */
.box {  
   width: 100%;
   height: 270px;
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to right, #2589AE 0%, #7DC0FF 100%); 
   border-image-slice: 1;
}  

Диагональный градиент

В отличие от предыдущих вариантов здесь цвет начинает меняться от левого верхнего угла.

Раскрасим эту границу во все цвета радуги.

Диагональный градиент

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis accusamus quos, fugiat consequuntur ipsum quam autem neque reprehenderit asperiores.

Eos iusto commodi pariatur inventore reprehenderit odit fugiat voluptates non a omnis repellendus ipsam ratione, libero illum quibusdam magnam rerum!

Numquam vitae atque alias sint commodi doloribus voluptates, rerum libero, repudiandae tempore suscipit autem iste tenetur cum vero iusto cumque.


.box {  
   width: 100%;
   height: 270px;
   background: #eee;
   box-sizing: border-box;
   border: 20px solid transparent;
   border-image: linear-gradient(to bottom right, red 0%, orange 16%,yellow 33%, green 50%,blue 67%, darkblue 83%,fiolet 100%);
   border-image-slice: 1;
}

Поэксперементируем

Используя градиент «Круги на воде» из предыдущей статьи, получаем:


border-image:
   repeating-radial-gradient(circle at 0 0, #eee,#ccc 50px);
   background-size: 10px 10px;
   border-image-slice: 1;

По-моему неплохие уголки получились?


border-image:
   linear-gradient(30deg, #0970b1 12%, transparent 32%, transparent 67%, #25bed9 87%, #1c8395 100%);
   border-image-slice:87;

Чем то напоминает срез дерева (отдаленно конечно).


border-image:
   repeating-radial-gradient(circle at 450px 50px, rgba(145, 68, 2, 0.36),rgba(242, 242, 49, 0.15) 15px);
   border-image-slice: 1;

Просто менял цвета и цифры.


border-image:
   linear-gradient(13deg, #ff0000 5px, transparent 105px, #ff7400 55px, transparent 205px,
#009999 155px, transparent 305px, #00cc00 255px, transparent 405px) ;
    border-image-slice:127;

Если в градиенте использовать пиксели, блок должен иметь фиксированные размеры, иначе рисунок «поплывет». Поэтому лучше проценты. Вот так, меняя направление, пропорции и цвета заливки градиента можно создавать настоящие шедевры.


Практические примеры 0

Рекомендую прочитать...

Фильтры CSS3
Фильтры CSS

С помощью CSS фильтров можно создавать на сайте различные красивые эффекты , и их можно применить к любому элементу сайта.
CSS фильтры дают замечательные эффекты сайту, но к сожалению, негативно влияют на его производительность, поэтому не стоит ими злоупотреблять.

Читать полностью
3D-трансформация в примерах
3d трансформация в примерах

В первом примере при наведении курсора на изображение как бы открывается обложка альбома, открывая скрытую, но «важную» информацию.
Второй пример — первоначально блоки с анонсом мы видим в перспективе, при наведении мышки блок принимает нормальный вид.

Читать полностью
Анимация SVG — иконок
Анимация SVG-иконок

В этой статье рассмотрим как анимировать иконки, точнее любую SVG-графику. SVG-графика — это масштабируемая векторная графика, которую можно использовать непосредственно в коде страницы сайта. Преимущество перед остальными видами графики в том, что при увеличении размеров картинки — качество не теряется.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.