Creați chenaruri multicolore folosind CSS

Proprietatea de margine CSS are unele opțiuni de personalizare, cum ar fi opțiuni precum solid, punctat, punctat etc. Cu toate acestea, când vine vorba de culoarea chenarului, putem avea doar o culoare solidă pe fiecare parte. Dar, există o altă modalitate de a realiza o linie multicoloră folosind câteva proprietăți la care poate nu te-ai gândit, haideți să aruncăm o privire.

Solid

întreruptă

Punctat

Chenaruri multicolore

Pentru a obține un chenar multicolor, așa cum se arată mai sus, vom folosi proprietatea de position și selectorul ::after cu un gradient de culoare. Mai întâi, vom face o zonă de antet folosind o clasă HTML <div> și apoi o vom stila cu CSS pentru a avea un chenar multicolor care o împarte și conținutul de mai jos.

Creați codul HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Acum, să-l stilăm puțin cu CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Acum ar trebui să aveți ceva care arată astfel:

Cu asta, acum putem adăuga ::after la .ost-multi-header selector . Dar, înainte de a face asta, aș dori să explic puțin despre ce face ::after și de ce avem nevoie de proprietatea poziției pentru chenarul multicolor. ::after creează un pseudo-element cu orice se află în proprietatea conținut la sfârșitul elementului selectat. În cazul nostru, acel element este .ost-multi-header . Haideți să facem un „Hello World!” onorat de timp! exemplu pentru a ilustra.

Adăugați asta la CSS-ul dvs.:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

După cum puteți vedea, acum avem un „Hello World!” element de sub titlul antetului. Deoarece elementul nostru părinte, .ost-multi-header , are proprietatea de poziție relative , putem da unui element copil o poziție absolute . Acest lucru ne va permite să mutăm cu ușurință noul nostru pseudo-element pe care l-am creat cu ::after oriunde ne place în elementul părinte. Îl punem în partea de jos și îl mutăm peste 20px din stânga în cadrul elementului părinte. Rețineți, dacă elementul părinte nu avea proprietatea de poziție setată la relativă, atunci elementul nostru poziționat absolut ar fi în partea de jos și 20px la stânga ferestrei de vizualizare a browserului.

Dar chenarul nostru colorat? Vom modela fundalul pseudo-elementului nostru pentru a fi chenarul nostru multicolor folosind un gradient. Gradienții CSS pot fi liniari sau radiali. Pentru granița noastră, vom folosi linear-gradient . Pur și simplu, asta ne-ar oferi granița pe care o căutăm.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Dar, să încetinim un moment, pas cu pas. În primul rând, proprietatea content este încă acolo, chiar dacă este goală. Acest lucru se datorează faptului că, fără proprietatea content , pseudo-elementul nu este niciodată creat; deci avem nevoie. Trebuie să setăm înălțimea pseudo-elementului nostru, înălțimea marginii noastre. De ce setați ambele proprietăți din left și din right la 0? Fără o lățime setată, acest lucru va întinde pseudo-elementul pentru a avea 100% lățime în interiorul elementului părinte. Poate părea mult, dar setările linear-gradient spun doar culorii să curgă de la stânga „la dreapta” și punem ce culori vrem la anumite procente ale fundalului.

Chiar dacă tot ceea ce facem este să alegem ce culori să fie la anumite procente, este multă muncă pentru picioare. Din fericire, există resurse online gratuite care ajută enorm cu gradienții de culoare. Ultimate CSS Gradient Generator de la ColorZilla este un instrument excelent care include mai multe proprietăți de gradient pentru a susține browserele mai vechi.

Avem deja un gradient setat pe instrument, așa că putem folosi acest link pentru a vedea setările exacte utilizate în acest tutorial: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100. Ar trebui să arate așa:

Există o mulțime de setări pe acest site, dar să ne concentrăm asupra setărilor de care aveam nevoie pentru a crea aspectul pe care îl vom folosi pentru granița noastră. Să o descompunem:

1. Presetari - Acestea pot fi un punct de plecare excelent!
2. Bara de glisare - Puteți adăuga, elimina și edita culori aici
3. Opriri - Această secțiune vă permite să modificați setările pentru opacitatea și locația fiecărei culori. Pur și simplu faceți clic pe caseta de culoare de pe glisorul de mai sus pentru a schimba pe care o controlați în această secțiune.
4. Previzualizare - Aici puteți vedea imediat rezultatele modificărilor dvs.
5. Orientare și dimensiune - Aceasta vă permite să schimbați de la orizontală, verticală, diagonală sau radială. Și pentru a seta dimensiunea gradientului.
6. Cod CSS - Codul generat cu un permalink, astfel încât să puteți oricând să vă întoarceți și să editați cu ușurință gradientul.

Nu am căutat un gradient estompat în cazul nostru, ci mai degrabă o tranziție plată solidă între două culori, așa că tot ce trebuie să facem este să stivuim cele două culori una peste alta acolo unde vrem să se întâmple asta. În exemplul nostru, am stivuit culorile la 33% și, respectiv, 66%.

Simțiți-vă liber să vă jucați cu setările, știind că ceea ce vedeți în previzualizare este ceea ce va genera codul. Când obțineți configurarea aspectului așa cum doriți, puteți utiliza butonul „copiere” din partea dreaptă jos a casetei de cod.

Dacă ați copiat codul așa cum îl aveam în link, CSS-ul final va arăta cam așa:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Și, acel CSS va produce această subliniere multicoloră care este pe deplin receptivă:

Iată-ne! Nu a trebuit să adăugăm umplutura de 6px în partea de jos a .ost-multi-header , dar copilul poziționat absolute nu mai afectează înălțimea elementului părinte. Îl putem lăsa să plutească deasupra conținutului nostru în elementul părinte sau putem adăuga padding pentru a ne asigura că nu acoperă niciun conținut pe care nu vrem să îl obstrucționăm.

Iată un link către acest exercițiu recreat pe CodePen pentru ca toată lumea să-l editeze și să învețe fără griji.

O notă finală, unele browsere mai vechi acceptă doar selectorul de două puncte :after și nu standardul modern dublu ::after . Puteți folosi un singur colon dacă doriți să fiți în siguranță. Deocamdată, va funcționa și în browserele moderne.