5

Как сделать градиент закругленного бордюра кнопки с прозрачным содержимым?

введите сюда описание изображения

К примеру, в простом варианте — нет возможности задать градиент для border-bottom, border-top

<html>
   <head>
      <style>
         .box
         {
         margin:50px auto;
         width:250px;
         height:300px;
         border-top:1px solid #3ACFD5;
         border-bottom:1px solid #3a4ed5;
         border-radius:7px;
         -webkit-box-sizing:border-box;
         -moz-box-sizing:border-box;
         box-sizing:border-box;
         background-position:0 0,100% 0;
         background-repeat:no-repeat;
         -webkit-background-size:20px 100%;
         -moz-background-size:20px 100%;
         background-size:1px 100%;
         background-image:-webkit-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%),-webkit-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%);
         background-image:-moz-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%),-moz-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%);
         background-image:-o-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%),-o-linear-gradient(top,#3acfd5 0%,#3a4ed5 100%);
         background-image:linear-gradient(to bottom,#3acfd5 0%,#3a4ed5 100%),linear-gradient(to bottom,#3acfd5 0%,#3a4ed5 100%)
         }
      </style>
   </head>
   <body>
      <div class="box"></div>
   </body>
</html>

Идеальный вариант, теоретически можно с помощью clip-path осуществить заливку середины маской с прозрачностью и выставить отступы от краев, но на данный момент — код работает наоборот и нужно инвертировать маску.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/less">
.border-test {
  margin: 2em;
  height: 100px;
  width: 450px;
  background-color: purple;
  .border-squircle(10%; 50%);
}

.border-squircle(@radius-x; @radius-y) {
  .loop(@radius-x; @radius-y; 359; 100% 0);
}

.loop(@radius-x; @radius-y; @counter; @list) when (@counter >= 0) {
  @cos-x: cos(unit(@counter, deg));
  @x: pow(abs(@cos-x), unit(@radius-x) / 100) * 50 * abs(@cos-x + 0.0000000001) / (@cos-x + 0.0000000001) + 50;
  
  @sin-y: sin(unit(@counter, deg));
  @y: pow(abs(@sin-y), unit(@radius-y) / 100) * 50 * abs(@sin-y + 0.0000000001) / (@sin-y + 0.0000000001) + 50;
  
  @percent-x: percentage(round(@x, 1) / 100);
  @percent-y: percentage(round(@y, 1) / 100);
  
  @new-list: @percent-x @percent-y, @list;
  .loop(@radius-x; @radius-y; (@counter - 1); @new-list);
}

.loop(@radius-x; @radius-y; @counter; @list) when (@counter < 0) {
  clip-path: polygon(@list);
}
  </style>
</head>
<body>
  <div class="border-test"></div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
</body>
</html>

Пробовал вариант с SVG - он растягивается сильно, даже при применение атрибута non-scaling-stroke и preserveAspectRatio

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

3 ответа 3

6

Добавление анимации

Берется соседний цвет градиента по точкам offset

values="violet;blue;violet"   

Анимируется атрибут линейного градиента stop-color

<linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse"> <stop style="stop-color:violet" offset="0"> <animate attributeName="stop-color" dur="0.5s" values="violet;blue;violet" begin="rec.click" repeatCount="2" /> </stop>

и так для каждой точки offset

.container {
  width: 50%;
  height: 50%;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.5s" values="violet;blue;violet" begin="rec.click" repeatCount="2" />
   </stop>
   <stop style="stop-color:blue" offset="0.5">
    <animate attributeName="stop-color" dur="1.0s" values="blue;orange;blue" begin="rec.click" repeatCount="2" />
   </stop>
   <stop style="stop-color:orange" offset="1">
    <animate attributeName="stop-color" dur="1.5s" values="orange;violet;orange" begin="rec.click" repeatCount="2" />
   </stop>
  
  </linearGradient>
 </defs>
 <g id="rec" transform="translate(36 -91)">
  <rect  x="-35" y="93" width="230" height="106" ry="18" style="fill:transparent;stroke-width:3;stroke:url(#linearGradient)"/>
   <text x="0" y="158" font-size="48" fill="gray" >Click me</text>
 </g>
</svg>
</div>

Добавим анимацию для текста кнопки.

Для этого просто используем уже созданный градиент с анимацией к тексту

<text x="0" y="158" font-size="48" fill="url(#linearGradient)" >Click me</text>  

.container {
  width: 50%;
  height: 50%;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:violet" offset="0">
   <animate attributeName="stop-color" dur="0.8s" values="violet;blue;violet" begin="rec.click" repeatCount="2" />
   </stop>
   <stop style="stop-color:blue" offset="0.8">
    <animate attributeName="stop-color" dur="1.0s" values="blue;orange;blue" begin="rec.click" repeatCount="2" />
   </stop>
   <stop style="stop-color:orange" offset="1">
    <animate attributeName="stop-color" dur="1.5s" values="orange;violet;orange" begin="rec.click" repeatCount="2" />
   </stop>
  
  </linearGradient>
 </defs>
 <g id="rec" transform="translate(36 -91)">
  <rect  x="-35" y="93" width="234" height="110" ry="18" style="fill:transparent;stroke-width:2;stroke:url(#linearGradient)"/>
   <text x="0" y="158" font-size="48" fill="url(#linearGradient)" >Click me</text>
 </g>
</svg>
</div>

2
  • @Ubuntu User твой ответ с вариантами анимации 5 дек 2018 в 15:48
  • 1
    спасибо.....познавательно 6 дек 2018 в 16:32
4

В вашем примере я не увидел реализацию на svg а хотелось бы увидеть что не получилось

Так же в вашем примере есть clip-path который поддерживается но не везде, от пример реализации прямоугольника с закруглёнными углами и с градиентной заливкой stroke

<svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:violet" offset="0"/>
   <stop style="stop-color:blue" offset="0.5"/>
   <stop style="stop-color:orange" offset="1"/>
  </linearGradient>
 </defs>
 <g transform="translate(36 -91)">
  <rect x="-35" y="93" width="234" height="110" ry="18" style="fill:none;stroke-width:1;stroke:url(#linearGradient)"/>
 </g>
</svg>

7
  • Спасибо за внимание к посту! Проблема с SVG была в отсутствии возможности обернуть все это дело в CSS class в виде background, svg gradient из иллюстратора "поплыл" при масштабировании блоков. Возможно ли приведенный Вами код упаковать в класс для последующего вызова повсеместно в шаблоне без проблем с масштабированием?
    – aliokero
    5 дек 2018 в 6:19
  • background-image: url(data:image/svg+xml,....); background-repeat: no-repeat; background-size: cover; Но высота зависит от ширины и нижнюю часть не видно...
    – aliokero
    5 дек 2018 в 6:36
  • 1
    @UbuntuUser Хороший ответ (+) 5 дек 2018 в 14:34
  • MaximLensky, добрый день. Ссылка, которую Вы дали в комментарии на Codepen к сожалению не работает. Расскажите пожалуйста - как можно сделать Ваше решение с произвольной высотой/шириной, подстраиваюшейся под контейнер ? 4 янв 2020 в 8:19
  • @ГайратВласов я удалил этот пример на codepen, скажи что там было ? просто я не помню что я там делал 4 янв 2020 в 8:23
1

В целом вопрос такой - есть прямоугольная рамка на SVG. Рамка находится внутри div произвольного неизвестного размера. Можно ли ее сделать так, чтобы она вписалась в div ?

<div><svg></div>

div {
  margin: 50px;
  padding: 5px;
  /*   Когда размер совпадает с заданным - то все хорошо 
  width:calc(10px + 240px * 2.5);
  height:calc(10px + 120px * 2.5);  */
  /*    как можно заставить svg растянуться по высоте когда размер контейнера не соответсвует viebox ?*/
  width: calc(10px + 200px * 2.5);
  height: calc(10px + 120px * 2.5);
  border: 1px solid black;
  background-color: lightskyblue;
}
<div>
  <svg version="1.1" viewBox="0 0 240 120">
     <defs>
      <linearGradient id="linearGradient" gradientTransform="rotate(40)"  >
       <stop style="stop-color:violet; stop-opacity: .7;" offset="0%"/>
       <stop style="stop-color:blue; stop-opacity: .4;" offset="40%"/>
       <stop style="stop-color:orange" offset="90%"/>
      </linearGradient>
     </defs>

     <g >
       <rect x="5" y="5" width="230" height="110" ry="10" 
             style="fill:none;stroke-width:5;stroke:url(#linearGradient);"/> 
     </g>
    </svg>
</div>

В приведенном примере если div задать такой размер - то рамка туда прекрасно впишется (с учетом padding): width:calc(10px + 240px * 2.5); height:calc(10px + 120px * 2.5);

Если поломать соотношение сторон - то в примере видно что рамка до нижней границы не дотягивается.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.