Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Градиент примеры код

Линейный градиент

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(#00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(to top, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(to left top, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(to right top, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(to left, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(to right, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient( to left bottom, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient( to right bottom, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(#1E90FF, #00BFFF, #fff);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(#FF0000, #1E90FF, #00BFFF, #fff, #FFD700);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:linear-gradient(-45deg, #00BFFF 33%, #fff 33%, #fff 66%, #00BFFF 33%);
background-size: 180px 100px;

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background: repeating-linear-gradient(45deg, #00BFFF, #00BFFF 30px, #fff 30px, #fff 60px, #00BFFF 60px);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background: repeating-linear-gradient(90deg, #00BFFF, #00BFFF 30px, #fff 30px, #fff 60px, #00BFFF 60px);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background: repeating-linear-gradient(180deg, #00BFFF, #00BFFF 10px, #fff 10px, #fff 20px, #00BFFF 20px);

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

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(#fff, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(#fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(circle, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at left top, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at top, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at right top, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at right, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at right bottom, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at bottom, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at left bottom, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at left, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(at -80% 50%, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(40px, #fff, #1E90FF, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:100px;
border:1px solid #00BFFF;
background:radial-gradient(40px, #fff, #1E90FF, #00BFFF);
background-size: 50px 50px;

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background:radial-gradient(circle closest-side, #fff 2px, #00BFFF 4px) 50% 50%;
background-size: 10px 10px;

Код:


HTML
<div></div>
CSS
div{
width:100%;
height:80px;
border:1px solid #00BFFF;
background: repeating-radial-gradient(circle at 0px 40px, #00BFFF, #00BFFF 2px, #fff 2px, #fff 4px, #1E90FF 4px, #1E90FF 6px);
background-size: 50px 50px;

Конический градиент

Код:


HTML
<div></div>
CSS
div{
width:100px;
height:100px;
border:1px solid #00BFFF;
border-radius:50%;
margin: 0 auto;
background:conic-gradient(#fff, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100px;
height:100px;
border:1px solid #00BFFF;
border-radius:50%;
margin: 0 auto;
background:conic-gradient(#00BFFF, #fff, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100px;
height:100px;
border:1px solid #00BFFF;
border-radius:50%;
margin: 0 auto;
background:conic-gradient(#00BFFF, #fff, #00BFFF);

Код:


HTML
<div></div>
CSS
div{
width:100px;
height:100px;
border:1px solid #00BFFF;
border-radius:50%;
margin: 0 auto;
background:conic-gradient(#00BFFF 0 120deg, #1E90FF 0 240deg, #fff 0 360deg);

Код:


HTML
<div></div>
CSS
div{
width:100px;
height:100px;
border:1px solid #00BFFF;
border-radius:50%;
margin: 0 auto;
background:conic-gradient(#00BFFF 0 120deg, #1E90FF 0 240deg, #fff 0 360deg);
Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.
А так же:

Один ответ на “Градиент примеры код

  1. Борис говорит:

    Зашибись!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *