Skip to content

Commit

Permalink
Hareketli ve renk gecisli kenar cizgileri yapmak duzeltme 3
Browse files Browse the repository at this point in the history
  • Loading branch information
fatihhayri committed Jan 22, 2024
1 parent 9259add commit df9cab6
Showing 1 changed file with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ border-image: linear-gradient(to bottom right,#ffb56b,#ac255e) 1;

## Konik renk geçişi örneği

<iframe height="400" style="width: 100%;" scrolling="no" title="Animated gradient border" src="https://codepen.io/fatihhayri/embed/WNmpEge?default-tab=Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
<iframe height="500" style="width: 100%;" scrolling="no" title="Animated gradient border" src="https://codepen.io/fatihhayri/embed/WNmpEge?default-tab=Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

`conic-gradient` ile daha farklı seçenekler görmek mümkün.

## Hareketli renk geçişi örneği

<iframe height="400" style="width: 100%;" scrolling="no" title="Animated gradient border -3" src="https://codepen.io/fatihhayri/embed/oNVZeaq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
<iframe height="500" style="width: 100%;" scrolling="no" title="Animated gradient border -3" src="https://codepen.io/fatihhayri/embed/oNVZeaq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

İşe hareket katmakta kolay. `linear-gradient` tanımındaki yön tanımını açılı verip bu açıyı animasyon ile döndürdüğümüzde işte animayonlu kenar çizgisi. Tabi burada dikkat açı tanımının `@property` tanımını da yapmalıyız.

Expand Down

0 comments on commit df9cab6

Please sign in to comment.