[CSS] border linear gradient
Zdravím,
vie niekto ako urobiť v CSS to že bych mal nejaký element ohraničený borderom nasledovným spôsobom:
border mám na lavej a pravej strane elementu, obe sú 4px široké. V lavom bordery chcem prvé 2 pixely bielou farbou, a druhé 2 pixely čiernou farbou. V pravom bordery chcem prvé 2 pixely čiernou farbou, a ďalšie 2 pixely bielou farbou...
môj momentálny CSS kód:
.el {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-image: linear-gradient(to left, #000000 2px, #ffffff 2px); // chcem aplikovať pre ľavý border
border-image: linear-gradient(to right, #000000 2px, #ffffff 2px); // chcem aplikovať pre pravý border
border-image-slice: 1; // ???
}
niekde som našiel niečo ako border-left/right-image ale to nefunguje. Tak som hľadal ďalej, zistil som že nič také ako border-left/right-image nieje, ale že sa to dá riešiť cez slice. Tak som slice nastavil na 2, ovšem ani
border-image: linear-gradient(to left, #000000 2px, #ffffff 2px, #ffffff 2px, #000000 2px) 2;mi nefunguje správne, viete mi poradiť?
Hmm, asi by som skúsil cez tieň:
dík,... avšak s CSS Gridom mi to nefunguje, žiadny "okraj" sa nevykreslí.
tak pod boxshadow jeste pridej border: 4px transparent;
skúšal som a nič, tak som skúsil debugovať, zrejme to budem musieť mať cez border, kedže shadow sa zobrazuje o práve tých 2px posunuté smerom von od elementu, problém je že tam sú už iné elementy s vyšším z-index. Mainu vyšší Z-index nemôžem nastaviť, lebo pri scrollovaní by sa nescrolloval pod tie elementy ale nad tými elementami. Když tam doplním CSS:
skrz chrome konzoli, pričom vypočítaná CSS veľkosť bola 1011px. Tak sa správne zobrazia tie okraje, problém je že ja dopredu neznám vypočítanú veľkosť, a teda pri zmene veľkosti viewportu, pri zoomu či zmenení veľkosti písma alebo v prípade viac obsahu než sa zmestí do viewportu a teda vykreslenia obsahu tak že je nutno scrollovať, tak celé toto jde do kytek a žádne okraje nemám, alebo naopak mám okraj niekde v polovici elementu.
Teda potrebujem ten "okraj" vykresliť tak aby z vnútornej strany okraju elementu nie z vonkajšej strany okraju.
V prípade borderu když mám len jednofarebný okraj tak mi to funguje presne jak potrebujem, len práve že ja bych chcel vytvoriť dvojfarebný okraj...
A prečo nedáš tie dva okraje ako som spomínal? Ten float predsa na to nebude mať vplyv, plávať bude obal. A všetko vnútri je celé pod tvojou kontrolou.
pretože v mojom prípade by tvoj navrhnutý spôsob bol sakra komplikovanej... môj CSS je miešanina Gridov, Flexboxov, Floatov, Positioningu, Marginu a paddingu. A navyše do toho "šťúram" javascriptom. Takže ideálne je to vykresliť bez pridania HTML elementu, a bez zmeny veľkosti či posunutia elementov. Kdyby bolo možné trebárs skrz background linear-gradient() kombinovať to bottom a to left tak by to aj šlo. Inak takto to vidím len na ten border.