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 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Читать полностью
Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

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

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

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

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