Garth

jak vytvořit barevný přechod v okraji prvku

css3 gradient v border

Tvořit barevné přechody není složité, i na tomto webu je o nich článek, protože je lze generovat. Jenže jak je použít ve vlastnosti "border"? Lze to vůbec? A pokud ano tak jak?

Zásadní vlastnost pro vytvoření přechodu v okraji daného bloku je vlastnost "border-image", která funguje pouze na obdelníkové ("hranaté") tvary či bloky. Tudíž použití v kombinaci s vlastností "border-radius" může nastat odlišný výsledek.
.box{
  width: 250px;
  height: 250px;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}


Přechod z leva do prava by byl:
-moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);

border-image-slice: 1;
Přechod "diagonálně" by byl:
-moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);

border-image-slice: 1;

<< zpět




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML